Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 29x 27x 18x 18x 5x 29x 5x 1x | import { css, cssClass } from '../styled';
import { altitude, borderRadius, fontSize, fontWeight, palette, space, theme } from '../utils';
export const Dialog = styleProps => cssClass`
border-radius: ${borderRadius('default')(styleProps)};
background-color: white;
overflow: hidden;
position: relative;
${altitude('100')(styleProps)};
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogContent = styleProps => cssClass`
display: flex;
padding: ${space(3, 'major')(styleProps)}rem;
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogHeader = styleProps => cssClass`
margin-bottom: ${space(2, 'major')(styleProps)}rem;
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogTitle = styleProps => cssClass`
font-size: ${fontSize('300')(styleProps)}em;
font-weight: ${fontWeight('semibold')(styleProps)};
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogFooter = styleProps => cssClass`
align-items: center;
background-color: ${palette('white600')(styleProps)};
display: flex;
padding: ${space(5, 'minor')(styleProps)}rem ${space(6, 'minor')(styleProps)}rem;
${styleProps.showActionButtons &&
styleProps.footer &&
css`
justify-content: space-between;
`};
${styleProps.showActionButtons &&
!styleProps.footer &&
css`
justify-content: flex-end;
`};
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogClose = styleProps => cssClass`
position: absolute;
top: ${space(2, 'major')(styleProps)}rem;
right: ${space(2, 'major')(styleProps)}rem;
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogIconWrapper = styleProps => cssClass`
margin-right: ${space(2, 'major')(styleProps)}rem;
& .fp-Icon {
vertical-align: -0.125em;
}
& .fp-CalloutContent .fp-Icon {
font-size: 1.25em;
}
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
export const DialogModal = styleProps => cssClass`
max-width: 600px;
width: 100%;
${altitude('400')(styleProps)};
& .fp-DialogContent {
max-height: 70vh;
overflow-y: ${styleProps.hasScroll ? 'scroll' : 'visible'};
}
& {
${theme(styleProps.themeKey, `css.root`)(styleProps)};
}
`;
|