@helpscout/hsds-react/components/Select/Select.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SelectArrowsUI = exports.FieldUI = exports.ItemUI = exports.SelectUI = exports.InlinePrefixSuffixUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Input = require("../Input/Input.css");

exports.InlinePrefixSuffixUI = _Input.InlinePrefixSuffixUI;

var _color = require("../../styles/utilities/color");

var SelectUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Selectcss__SelectUI",
  componentId: "sc-581eve-0"
})(["align-items:center;background-color:transparent;border:none;display:flex;padding-bottom:1px;padding-top:1px;padding-left:16px;padding-right:16px;position:relative;& > *:first-child{padding-left:0;}&.is-focused{z-index:2;}"]);
exports.SelectUI = SelectUI;
var ItemUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Selectcss__ItemUI",
  componentId: "sc-581eve-1"
})(["position:relative;z-index:1;&.is-icon{margin-right:-4px;}"]);
exports.ItemUI = ItemUI;
var FieldUI = (0, _styledComponents.default)('select').withConfig({
  displayName: "Selectcss__FieldUI",
  componentId: "sc-581eve-2"
})(["", ";&.c-InputField{", ";padding-left:8px;padding-right:20px;&:first-child{padding-left:0;}}&.has-placeholder{opacity:0.3;}"], getFirefoxStyles(), _Input.makeFieldStyles);
exports.FieldUI = FieldUI;
var SelectArrowsUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Selectcss__SelectArrowsUI",
  componentId: "sc-581eve-3"
})(["align-self:center;color:", ";display:block;padding:0 12px;pointer-events:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;z-index:1;&::before,&::after{content:'';border-left:3px solid transparent;border-right:3px solid transparent;margin:2px;position:absolute;}&::before{border-bottom:5px solid currentColor;bottom:-1px;}&::after{border-top:5px solid currentColor;top:-1px;}&.is-error{right:40px;}", ""], (0, _color.getColor)('charcoal.600'), function (_ref) {
  var disabled = _ref.disabled;
  var color = disabled ? 'charcoal.200' : 'charcoal.600';
  return "color: " + (0, _color.getColor)(color) + " !important;";
});
exports.SelectArrowsUI = SelectArrowsUI;

function getFirefoxStyles() {
  // Removes outline in Firefox
  // https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/11603104#11603104
  return "\n    @-moz-document url-prefix() {\n      color: transparent !important;\n      text-shadow: 0 0 0 black !important;\n    }\n  ";
}