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)}; } `; |