# All files / components/TimePicker/styles TimeInputContainer.js

0% Statements 0/7
0% Branches 0/6
0% Functions 0/2
0% Lines 0/2

    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

     import styled, { css } from 'styled-components';

    export default styled.div`
      .TimeInput-input {
        letter-spacing: 0.02em;
        line-height: 1.5;
        font-size: 14px;
        font-family: var(--fonts-brand);
        transition: all 0.2s ease;
        padding: calc(var(--spacing-extra-small) - 1px) var(--spacing-extra-small);
        border-width: var(--thicknesses-wide);
        border-style: solid;

        color: var(--colors-text-default);
        background: var(--colors-background-default);
        opacity: 1;
        border-color: var(--colors-border-light);

        width: 4em;
        text-align: center;

        outline: none;

        &:focus {
          box-shadow: inset 0 -5px 0 var(--colors-primary-light);
          border-color: var(--colors-border-medium);
        }

        ${({ disabled }) =>
          disabled &&
          css`
            pointer-events: none;
            background: var(--colors-background-disabled);
            border-color: var(--colors-border-disabled);
            opacity: 1;
            color: var(--colors-text-disabled);
          `};
      }
    `;