@devseed-ui/form/src/select/index.js

devseed UI Kit Form

import styled, { css } from 'styled-components';
import { themeVal } from '@devseed-ui/theme-provider';

import createFormSkinStyles, { paddingMatrix } from '../controlskin';

const getPaddingValue = (size) => {
  // horizontal padding if there are 2 values, otherwise it is the same for all
  // directions.
  const [v, h] = paddingMatrix[size].split(' ');
  return h || v;
};

const FormSelect = styled.select`
  ${createFormSkinStyles}
  cursor: pointer;
  line-height: 1;
  background-image: ${({ theme }) =>
    `url('data:image/svg+xml;utf8,${encodeURIComponent(
      `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16"><polygon fill="${theme.color.base}" points="12.586,4.586 8,9.172 3.414,4.586 2,6 8,12 14,6" /></svg>`
    )}');`};
  background-repeat: no-repeat;

  /* Paddings and sizes dependent on input size. */
  ${({ size = 'medium' }) => {
    const p = getPaddingValue(size);
    return css`
      background-position: calc(100% - ${p}) center;
      /* padding + icons size + padding */
      padding-right: calc(1rem + ${p} * 2);
    `;
  }}

  /* IE specific */

  &::-ms-expand {
    display: none;
  }

  /* Firefox specific */

  @-moz-document url-prefix() {
    & {
      text-overflow: '';
      text-indent: -2px;
    }
  }

  :-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 ${themeVal('type.base.color')};
  }
`;

export default FormSelect;