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

100% Statements 18/18
100% Branches 2/2
100% Functions 5/5
100% Lines 13/13

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

    4x

    4x

    1x

    1x

    4x

    1x

    4x

    1x

    1x

    1x

    1x

    1x

    4x

     import { Style, Styles } from 'jss'
    import { Theme } from '../styles'
    import { ItemGroupClassProps, ItemGroupProps } from './ItemGroup.type'

    const root = (theme: Theme): Style => ({
      overflow: 'visible',
      boxShadow: theme.shadows![3],
      zIndex: 9999
    })
    const level = (props: ItemGroupProps): Style => ({
      '& .FItem-root': {
        paddingLeft: props.level && 40 + props.level * 12
      }
    })
    const float: Style = {
      '& .FItem-root': {
        paddingRight: 40
      }
    }

    const titleRoot: Style = {
      position: 'relative',
      color: 'inherit'
    }
    const titleActive = (theme: Theme): Style => ({
      color: theme.colors!.primary!.default
    })
    const titleFloatAndHorizontal: Style = {
      '& > .FItem-root': {
        paddingRight: 36
      }
    }
    const titlePrefix = (theme: Theme): Style => ({
      width: 24,
      height: 24,
      position: 'absolute',
      right: 12,
      top: '50%',
      cursor: 'pointer',
      marginTop: -12,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: 12,
      transition: theme.transitions!.default,
      // acrylic false
      zIndex: 1,
      // horizontal === false && expanded === true
      opacity: 0
    })
    const titlePrefixAcrylic: Style = {
      zIndex: -1
    }
    const titlePrefixNotFloatOpen: Style = {
      transform: 'rotate(180deg)'
    }
    const titlePrefixNotFloatClose: Style = {
      transform: 'rotate(0deg)'
    }
    const titlePrefixHorizontal: Style = {
      opacity: 1
    }
    const titlePrefixExpanded: Style = {
      opacity: 1
    }

    export const styles = (theme: Theme): Styles<ItemGroupClassProps> => ({
      root: root(theme),
      level,
      float,
      titleRoot,
      titleActive: titleActive(theme),
      titleFloatAndHorizontal,
      titlePrefix: titlePrefix(theme),
      titlePrefixAcrylic,
      titlePrefixNotFloatOpen,
      titlePrefixNotFloatClose,
      titlePrefixHorizontal,
      titlePrefixExpanded
    })