All files / src/Callout styles.ts

94.44% Statements 17/18
100% Branches 4/4
88.89% Functions 8/9
100% Lines 10/10

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      32x                         48x           13x               24x                 4x               30x                             32x                   1x                   1x 1x                            
import { css, cssClass } from '../styled';
import { fontSize, fontWeight, palette, space, theme, altitude } from '../utils';
 
export const Callout = styleProps => cssClass`
  ${styleProps.showCloseButton &&
    css`
      position: relative;
    `}
 
  ${styleProps.hasTint && getTintAttributes(styleProps)};
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const CalloutContent = styleProps => cssClass`
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const CalloutHeader = styleProps => cssClass`
  margin-bottom: ${space(1, 'major')(styleProps)}rem;
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const CalloutTitle = styleProps => cssClass`
  font-size: ${fontSize('300')(styleProps)}em;
  font-weight: ${fontWeight('semibold')(styleProps)};
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const CalloutFooter = styleProps => cssClass`
  margin-top: ${space(3, 'major')(styleProps)}rem;
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const CalloutIconWrapper = 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 CalloutClose = styleProps => cssClass`
  position: absolute;
  top: ${space(1, 'major')(styleProps)}rem;
  right: ${space(1, 'major')(styleProps)}rem;
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const CalloutOverlay = styleProps => cssClass`
  max-width: 500px;
 
  ${altitude('200')(styleProps)};
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const getTintAttributes = (styleProps: any) => {
  return css`
    && {
      border-color: ${palette(`${styleProps.type}100`)(styleProps)} !important;
    }
 
    background-color: ${palette(`${styleProps.type}Tint`)(styleProps)};
    color: ${palette(`${styleProps.type}TintInverted`)(styleProps)};
    fill: ${palette(`${styleProps.type}TintInverted`)(styleProps)};
 
    & {
      ${theme(styleProps.themeKey, `tint`)(styleProps)};
    }
  `;
};