All files / components/Form commonFormStyles.js

100% Statements 4/4
100% Branches 0/0
100% Functions 2/2
100% Lines 4/4

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                  13x                                 9x                       13x                                                 6x                      
import { css } from 'styled-components';
import {
  getRegularInputCommonStyle,
  getRegularInputStyle,
  getMiscInputCommonStyle,
  getMiscInputStyle,
} from './formSelectors';
import { rem } from '../Typography';
 
export const commonInputStyles = css`
  -webkit-appearance: none;
  max-width: 100%;
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  transition: 0.2s ease-in-out;
  transition-property: color, background-color, border;
  border-radius: ${rem(6)};
  &:focus {
    outline: none;
  }
  &::placeholder {
    color: inherit;
  }
  ${({ theme, invalid }) => css`
    ${getRegularInputCommonStyle(theme)}
    ${getRegularInputStyle(theme, invalid, 'normal')}
    &:focus {
      ${getRegularInputStyle(theme, invalid, 'active')}
    }
    &:disabled {
      ${getRegularInputStyle(theme, invalid, 'disabled')}
    }
  `}
`;
 
export const miscInputStyles = css`
  -webkit-appearance: none;
  overflow: hidden;
  box-szing: border-box;
  display: inline-block;
  font-size: ${rem(16)};
  height: 1.5em;
  width: 1.5em;
  margin-top: -0.4em;
  vertical-align: middle;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-width: 1px;
  border-style: solid;
  transition: 0.2s ease-in-out;
  transition-property: background-color, border;
  cursor: pointer;
  &:focus {
    outline: none;
  }
  &:disabled {
    cursor: default;
    opacity: 0.6;
  }
  ${({ theme, invalid }) => css`
    ${getMiscInputCommonStyle(theme)}
    ${getMiscInputStyle(theme, invalid, 'normal')}
    &:focus {
      ${getMiscInputStyle(theme, invalid, 'active')}
    }
    &:checked {
      ${getMiscInputStyle(theme, invalid, 'checked')}
    }
  `}
`;