All files / src/Dialog styles.ts

93.75% Statements 15/16
62.5% Branches 5/8
87.5% Functions 7/8
100% Lines 8/8

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