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

100% Statements 19/19
100% Branches 24/24
100% Functions 3/3
100% Lines 18/18

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
    982x
    2x
    2x

    2x

    2x

    2x

    2x
    4x

    4x
    4x
    1x

    4x
    4x
    1x

    2x

    2x

    2x

    2x

     import styled, { css } from 'styled-components'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    export const StyledListPageMain = styled.div`
      display: flex;
      flex: 1 0 auto;
      flex-direction: column;
      min-width: 0;
      padding: ${spacing.lg}px ${spacing.xl}px;
      width: 100%;
    `

    export const StyledListPageBanner = styled.div`
      flex: 0 0 auto;
    `

    export const StyledListPageToolHeader = styled.div`
      flex: 0 0 auto;
      padding-bottom: ${spacing.lg}px;
    `

    interface StyledListPageControlProps {
      $alignRight: boolean
      $block: boolean
      $search: boolean
    }

    export const StyledListPageControl = styled.div<StyledListPageControlProps>`
      flex: ${({ $block }) => ($block ? '1 0 auto' : '0 0 auto')};

      ${({ $alignRight }) => {
        if ($alignRight) {
          return css`
            margin-left: auto;
          `
        }
      }}

      ${({ $search }) => {
        if ($search) {
          return css`
            width: 240px;
          `
        }
      }}
    `

    export const StyledListPageContentControls = styled.div`
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      justify-content: space-between;
      padding: ${spacing.md}px 0;

      ${StyledListPageControl} + ${StyledListPageControl} {
        margin-left: ${spacing.lg}px;
      }
    `

    export const StyledListPageBody = styled.div`
      display: flex;
      flex: 1 0 auto;
      padding-top: ${spacing.md}px;
    `

    export const StyledListPageBodyContent = styled.div`
      flex: 1 1 auto;
    `

    export const StyledListPage = styled.div`
      display: flex;
      flex-direction: row;
      height: 100%;
      width: 100%;

      ${StyledListPageBanner} + ${StyledListPageToolHeader} {
        padding-top: ${spacing.lg}px;
      }

      ${StyledListPageContentControls} + ${StyledListPageContentControls} {
        border-top-color: ${colors.gray85};
        border-top-style: solid;
        border-top-width: 1px;
      }

      ${StyledListPageToolHeader} + ${StyledListPageContentControls},
      ${StyledListPageToolHeader} + ${StyledListPageBody} {
        border-top-color: ${colors.gray85};
        border-top-style: solid;
        border-top-width: 1px;
      }

      ${StyledListPageContentControls} + ${StyledListPageBody} {
        padding-top: 0;
      }
    `