# All files / src/AvatarStack AvatarStack.styles.ts

100% Statements 15/15
100% Branches 14/14
100% Functions 1/1
100% Lines 15/15

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
    544x
    4x
    4x
    4x
    4x
    4x

    4x

    4x

    4x
    65x

    4x

    4x

    4x

    4x

    4x

     import styled from 'styled-components'
    import { Avatar } from '../Avatar/Avatar'
    import { ContactItem } from '../ContactItem/ContactItem'
    import { Modal } from '../Modal/Modal'
    import { Color, colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    const maxModalWidth = 528

    const StyledBaseAvatar = styled(Avatar)`
      border-color: ${colors.white};
      border-style: solid;
      border-width: 1px;

      &:hover {
        z-index: 1;
      }
      &[role='img']:focus {
        outline: none;
      }
    `

    export const StyledAvatar = styled(StyledBaseAvatar)<{ $color: Color }>`
      background-color: ${(props: { $color: Color }) => colors[props.$color]};
    `

    export const StyledContactItems = styled.div`
      padding-top: ${spacing.sm}px;
      padding-bottom: ${spacing.sm}px;
      padding-left: ${spacing.xs}px;
    `

    export const StyledWrapper = styled.div`
      display: flex;

      ${StyledAvatar} + ${StyledAvatar} {
        margin-left: -${spacing.sm}px;
      }
    `

    export const StyledViewAllWrapper = styled.div`
      display: flex;
      margin-left: ${spacing.md}px;
      margin-bottom: ${spacing.lg}px;
    `

    export const StyledModalBody = styled(Modal.Body)`
      max-width: ${maxModalWidth}px;
    `

    export const StyledContactItem = styled(ContactItem)`
      flex-shrink: 0;
    `