# All files / layouts/Flow/styles FlowItemContainer.js

100% Statements 6/6
100% Branches 3/3
100% Functions 1/1
100% Lines 6/6

    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
    98

    4x

    23x

    1x

    1x

    21x

    4x

     import styled from 'styled-components';
    import Content from './FlowItemContent';
    import FlexibleContent from './FlowItemFlexibleContent';
    import MoreContent from './FlowItemMoreContent';
    import {
      LABEL_HEIGHT,
      MIN_HELP_TEXT_HEIGHT,
      MIN_CONTENT_HEIGHT,
      HORIZONTAL_CONTENT_SPACING,
    } from '../constants';

    const FlowItemContainer = styled.div.withConfig({
      displayName: 'FlowItemContainer',
    })`
      display: flex;
      flex-direction: column;
      font-size: 1em;
      align-items: ${({ alignment }) => {
        switch (alignment) {
          case 'left':
            return 'flex-start';
          case 'right':
            return 'flex-end';
          default:
            return 'stretch';
        }
      }};

      & > .FlowItem-label {
        height: ${LABEL_HEIGHT};
        margin: 0 0 5.6px 0;
        overflow-x: hidden;
        flex-basis: ${LABEL_HEIGHT};
        flex-grow: 0;
        flex-shrink: 0;
        padding: 0;
      }

      & > ${Content} {
        height: ${MIN_CONTENT_HEIGHT};
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;

        & > * {
          margin: auto;
        }

        & > *:not(:last-child):not(:only-child) {
          margin-right: ${HORIZONTAL_CONTENT_SPACING};
        }
      }

      & > ${FlexibleContent} {
        height: auto;
        flex-basis: ${MIN_CONTENT_HEIGHT};
        flex-grow: 1;
        flex-shrink: 0;
      }

      & > .FlowItem-helpText {
        min-height: ${MIN_HELP_TEXT_HEIGHT};
        margin: 5.6px 0 0 0;
        flex-basis: ${MIN_HELP_TEXT_HEIGHT};
        flex-grow: 1;
        flex-shrink: 0;
        padding: 0;
      }

      & > ${MoreContent} {
        flex: 1 0 0;
      }
    `;

    FlowItemContainer.Small = FlowItemContainer.extend`
      font-size: 0.75em;

      & > .FlowItem-label {
        height: auto;
        margin: 0;
      }

      & > ${Content} {
        height: 20px;
      }

      & > ${FlexibleContent} {
        min-height: 20px;
      }

      & > .FlowItem-helpText {
        min-height: 14px;
        margin: 0;
      }
    `;

    export default FlowItemContainer;