# All files / components/Steps/styles StepNumber.js

11.11% Statements 1/9
0% Branches 0/8
0% Functions 0/8
11.11% Lines 1/9

    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

    4x

     import styled from 'styled-components';
    import icons from 'components/Icon/icons';
    import get from 'extensions/themeGet';
    import StepContainer from './StepContainer';

    const NUMBER_SIZE = '2.5em';

    export default styled.div.attrs({
      number: props => (props.complete ? icons('checkmark') : props.number),
      numberFont: props =>
        props.complete ? get('fonts.icon')(props) : get('fonts.default')(props),
      numberColor: props =>
        props.complete
          ? get('colors.positive.default')(props)
          : get('colors.text.default')(props),
      numberBorderColor: props =>
        props.complete
          ? get('colors.positive.border')(props)
          : get('colors.shadow.light')(props),
    })`
      &:before {
        display: inline-block;
        content: "${props => props.number}";
        font-family: ${props => props.numberFont};
        width: ${NUMBER_SIZE};
        height: ${NUMBER_SIZE};
        line-height: ${NUMBER_SIZE};
        background-color: ${get('colors.background.default')};
        border-radius: 2em;
        border-width: ${get('thicknesses.normal')};
        border-style: solid;
        border-color: ${props => props.numberBorderColor};
        text-align: center;
        color: ${props => props.numberColor};
      }

      ${StepContainer} > & {
        flex: 0 0 auto;
      }
    `;