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

0% Statements 0/22
0% Branches 0/16
0% Functions 0/11
0% Lines 0/15

    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

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

    const CIRCLE_SIZE = 32;

    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.text.inverted')(props)
          : get('colors.text.default')(props),
      numberBorderColor: props =>
        props.complete
          ? get('colors.positive.default')(props)
          : get('colors.border.light')(props),
    })`
      width: ${CIRCLE_SIZE}px;
      height: ${CIRCLE_SIZE}px;

      &:before {
        display: inline-block;
        font-size: ${props =>
          props.complete ? (CIRCLE_SIZE * 2) / 3 : (CIRCLE_SIZE * 2) / 5}px;
        content: "${props => props.number}";
        font-family: ${props => props.numberFont};
        width: ${CIRCLE_SIZE}px;
        height: ${CIRCLE_SIZE}px;
        line-height: ${CIRCLE_SIZE}px;
        background-color: ${props =>
          props.complete
            ? get('colors.positive.default')(props)
            : get('colors.background.default')(props)};
        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;
      }
    `;