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

87.5% Statements 7/8
63.63% Branches 7/11
100% Functions 1/1
87.5% Lines 7/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
    3514x
    14x

    14x

    14x

    124x
    124x

    124x

     import styled, { css } from 'styled-components'
    import { StyledBox } from '../Box/Box.styles'
    import { FlexDirection } from '../Box/Box.types'
    import { Flex } from '../Flex/Flex'

    export const StyledFlex = styled(Flex)<{ $direction?: FlexDirection }>`
      > ${StyledBox} {
        ${({ $direction }) => {
          Iif ($direction?.includes('reverse')) {
            return css`
              &:first-child {
                margin-bottom: 0;
                margin-right: 0;
              }
              &:last-child {
                margin-left: 0;
                margin-top: 0;
              }
            `
          }

          return css`
            &:first-child {
              margin-left: 0;
              margin-top: 0;
            }
            &:last-child {
              margin-bottom: 0;
              margin-right: 0;
            }
          `
        }}
      }
    `