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

100% Statements 16/16
100% Branches 14/14
100% Functions 0/0
100% Lines 16/16

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

    2x

    2x
    2x

    2x

    2x

    2x

    2x

    2x

    2x

    2x

    2x

     import styled from 'styled-components'
    import { Box } from '../Box/Box'
    import { Card } from '../Card/Card'
    import { Page } from '../PageLayout/PageLayout'
    import {
      getActions,
      StyledPageBanner,
      StyledPageTitle,
    } from '../PageLayout/PageLayout.styles'
    import {
      sectionClassnames,
      StyledSection,
      StyledSectionInner,
    } from '../Section/Section.styles'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    export const StyledDetailPage = styled.div`
      background-color: ${colors.gray96};
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    `

    export const StyledDetailPageBody = styled.div`
      padding-bottom: ${spacing.xl}px;

      > ${StyledPageBanner}:first-child, > ${StyledPageTitle} {
        margin-top: ${spacing.xl}px;
      }
    `

    export const StyledDetailPageFooterNotation = styled.div`
      flex-grow: 1;
      z-index: 1;
    `

    export const StyledDetailPageFooter = styled(Page.Footer)`
      display: flex;
      padding: ${spacing.lg}px 0;
      background-color: ${colors.white};
      justify-content: center;
    `

    export const StyledDetailPageFooterActions = styled(Box)`
      ${getActions()}
    `

    const maxFooterContentWidth = 1920

    export const StyledDetailPageFooterContent = styled.div`
      width: 100%;
      align-items: center;
      display: flex;
      justify-content: flex-end;
      padding: 0 ${spacing.xl}px;
      max-width: ${maxFooterContentWidth}px;
    `

    export const StyledDetailPageCard = styled(Card)`
      margin-top: ${spacing.xl}px;
      width: 100%;

      & > ${StyledPageBanner} {
        padding: ${spacing.xl}px ${spacing.xl}px 0 ${spacing.xl}px;
        max-width: 100%;

        &:empty {
          padding: 0;
        }
      }

      & > ${StyledPageBanner} + ${StyledSection} > ${StyledSectionInner} {
        border-top: 0;
      }

      > .${sectionClassnames.levelAnonymous}:first-child
        + .${sectionClassnames.level(2)},
        > ${StyledPageBanner}
        + .${sectionClassnames.levelAnonymous}
        + .${sectionClassnames.level(2)} {
        margin-top: ${spacing.xxl * -1}px;
      }
    `