vcc-ui/dist/esm/components/select-input/select-input.styles.js

A React library for building user interfaces at Volvo Cars

const FIREFOX_INNER_PADDING = 4;
const arrowIcon = color => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' viewBox='0 0 16 9' fill='none' %3E %3Cpath d='M15 1L8 8L1 1' stroke='${encodeURIComponent(color)}' stroke-linecap='round' stroke-linejoin='round'%3E %3C/path%3E %3C/svg%3E")`;
export const wrapperStyle = {
  flexDirection: 'column',
  width: '100%',
  ':focus-within label': {
    transform: 'translateY(8px)',
    fontSize: 12
  }
};
export const styles = _ref => {
  let {
    loading,
    isValid,
    theme
  } = _ref;
  return {
    ...theme.typeScale.columbus.standard.styles,
    appearance: 'none',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 4,
    boxSizing: 'border-box',
    display: 'block',
    width: '100%',
    margin: 0,
    outlineWidth: 0,
    paddingTop: loading ? theme.tokens.inputPaddingHorizontal - 1 : theme.tokens.inputPaddingVertical * 2,
    paddingBottom: loading ? theme.tokens.inputPaddingHorizontal - 1 : theme.tokens.inputPaddingVertical / 2,
    paddingLeft: theme.tokens.inputPaddingHorizontal - 1,
    paddingRight: theme.tokens.inputPaddingHorizontal - 1 + (loading ? 0 : 30),
    color: theme.tokens.inputForeground,
    backgroundColor: theme.tokens.inputBackground,
    backgroundImage: arrowIcon(theme.tokens.inputForeground),
    backgroundSize: '15px 7px',
    backgroundPosition: 'right 18px top 51%',
    backgroundRepeat: 'no-repeat',
    userSelect: 'none',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    borderColor: isValid ? theme.tokens.inputBorder : theme.color.foreground.alert,
    ':disabled': {
      cursor: 'not-allowed',
      borderColor: theme.tokens.inputDisabledBorder,
      backgroundColor: theme.tokens.inputDisabledBackground,
      color: theme.tokens.inputDisabledForeground
    },
    '& option:disabled': {
      color: theme.tokens.inputDisabledForeground
    },
    ':invalid': {
      color: theme.tokens.inputPlaceholder
    },
    ':focus:invalid': {
      color: theme.tokens.inputPlaceholder
    },
    '::-ms-expand': {
      display: 'none'
    },
    '::-ms-value': {
      background: 'none',
      color: theme.tokens.inputForeground
    },
    ':valid': {
      color: theme.tokens.inputForeground
    },
    '& option': {
      color: theme.tokens.inputForeground
    },
    ':-moz-focusring': {
      color: 'transparent',
      textShadow: '0 0 0 #000'
    },
    ':focus': {
      color: theme.tokens.inputForeground,
      borderColor: theme.tokens.inputBorderFocus
    },
    // firefox has some weird inner padding
    '@supports (-moz-appearance: none)': {
      paddingLeft: theme.tokens.inputPaddingHorizontal - FIREFOX_INNER_PADDING - 1
    },
    extend: [{
      condition: loading,
      style: {
        backgroundImage: 'none',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%'
      }
    }, {
      condition: !isValid,
      style: {
        ':not(:focus)': {
          borderWidth: 2,
          backgroundPosition: 'right 17px top 51%',
          borderColor: theme.color.foreground.alert,
          paddingTop: loading ? theme.tokens.inputPaddingVertical + 2 : theme.tokens.inputPaddingVertical * 2 - 1,
          paddingBottom: loading ? theme.tokens.inputPaddingVertical + 2 : theme.tokens.inputPaddingVertical / 2 - 1,
          paddingLeft: theme.tokens.inputPaddingHorizontal - 2,
          paddingRight: theme.tokens.inputPaddingHorizontal - 2 + (loading ? 0 : 30),
          // firefox has some weird inner padding
          '@supports (-moz-appearance: none)': {
            paddingLeft: theme.tokens.inputPaddingHorizontal - FIREFOX_INNER_PADDING - 2
          }
        }
      }
    }]
  };
};
export const labelStyle = _ref2 => {
  let {
    isEmpty,
    isValid,
    theme
  } = _ref2;
  return {
    paddingLeft: theme.tokens.inputPaddingHorizontal,
    paddingRight: theme.tokens.inputPaddingHorizontal,
    color: isValid ? theme.color.foreground.secondary : theme.color.foreground.alert,
    transitionProperty: 'font-size, transform',
    transitionDuration: '60ms',
    transitionTimingFunction: 'ease-out',
    transform: 'translateY(' + (isEmpty ? 17 : 8) + 'px)',
    fontSize: isEmpty ? 16 : 12,
    letterSpacing: '0.02em',
    fontFamily: theme.fontTypes.NOVUM,
    fontWeight: 300,
    position: 'absolute',
    pointerEvents: 'none'
  };
};