# All files / src/Dialog Dialog.styled.ts

66.67% Statements 6/9
100% Branches 0/0
0% Functions 0/3
100% Lines 6/6

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

    1x

    1x

    1x

    1x

    1x

    1x

     import { Theme } from '../styles'
    import { Style, Styles } from 'jss'
    import { DialogClassProps } from './Dialog.type'

    const root = (theme: Theme): Style => ({
      position: 'fixed',
      top: '50%',
      left: '50%',
      zIndex: 1001,
      transform: 'translate(-50%, -50%)',
      backgroundColor: theme.colors!.white!.default,
      borderRadius: 2,
      padding: '16px 24px 24px'
    })

    const title: Style = {
      display: 'flex',
      justifyContent: 'space-between'
    }
    const content: Style = {
      marginTop: 16,
      minHeight: 40
    }
    const actions: Style = {
      display: 'flex',
      justifyContent: 'flex-end',
      marginTop: 16,
      '> *': {
        margin: '0 4px',
        '&:last-child': {
          marginRight: 0
        }
      }
    }

    const mask = (theme: Theme): Style => ({
      position: 'fixed',
      top: 0,
      left: 0,
      zIndex: 1000,
      width: '100%',
      height: '100%',
      backgroundColor: theme.colors!.standard!.transparent2
    })

    export const styles = (theme: Theme): Styles<DialogClassProps> => ({
      root: root(theme),
      title,
      content,
      actions,
      mask: mask(theme)
    })