@procore/core-react/dist/Select/Select.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Button } from '../Button';
import { StyledContent } from '../Button/Button.styles';
import { Card } from '../Card';
import { StyledCircle } from '../Spinner/Spinner.styles';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { arrowDown, arrowUp } from '../_styles/arrows';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { getEllipsis, getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var dataQa = {
  focused: 'core-select-focused',
  hovered: 'core-select-hovered'
};
export var tableSelectClassName = 'select--table';
var styledSelectButtonDefaultWidth = 248;
export var StyledSelectButtonWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSelectButtonWrapper",
  componentId: "core-12_44_0__sc-mr8gwe-0"
})(["display:inline-block;position:relative;width:", ";"], function (_ref) {
  var $block = _ref.$block;
  return $block ? '100%' : "".concat(styledSelectButtonDefaultWidth, "px");
});
export var StyledSelectMenu = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledSelectMenu",
  componentId: "core-12_44_0__sc-mr8gwe-1"
})(["display:flex;max-height:40vh;max-width:", "px;min-width:inherit;"], styledSelectButtonDefaultWidth);
export var StyledSelectButtonLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSelectButtonLabel",
  componentId: "core-12_44_0__sc-mr8gwe-2"
})(["", " flex-grow:1;margin-right:", "px;outline:none;pointer-events:", ";user-select:none;"], getEllipsis(), spacing.sm, function (_ref2) {
  var $hoverable = _ref2.$hoverable;
  return $hoverable ? 'initial' : 'none';
});
export var StyledSelectSpinner = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSelectSpinner",
  componentId: "core-12_44_0__sc-mr8gwe-3"
})(["align-items:center;display:flex;flex:0 0 auto;justify-content:center;line-height:0;"]);
export var StyledSelectArrowContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSelectArrowContainer",
  componentId: "core-12_44_0__sc-mr8gwe-4"
})(["align-items:center;display:inline-flex;height:16px;justify-content:flex-end;margin-left:", "px;width:8px;"], spacing.sm);
export var StyledSelectArrow = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSelectArrow",
  componentId: "core-12_44_0__sc-mr8gwe-5"
})(["position:relative;", ""], arrowDown(4, 'gray45'));
export var StyledSelectClearIcon = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledSelectClearIcon",
  componentId: "core-12_44_0__sc-mr8gwe-6"
})(["position:absolute;right:29px;top:50%;transform:translateY(-50%);", "{pointer-events:none;}"], StyledContent);
export var StyledSelectButton = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSelectButton",
  componentId: "core-12_44_0__sc-mr8gwe-7"
})(["", " align-items:center;background-color:", ";border-color:", ";border-radius:", "px;border-style:solid;border-width:1px;color:", ";cursor:pointer;display:inline-flex;height:36px;min-height:36px;outline:none;padding:0 ", "px;position:relative;white-space:nowrap;width:", ";&::placeholder{border-color:", ";}&:hover,&:active,&[data-qa=", "]{background-color:", ";border-color:", ";color:", ";}&.focus,&:focus,&[data-qa=", "],", ":focus-within &{", " ", "{stroke:", ";}}", " ", " ", " ", " ", " ", " &.", "{", " ", " ", "}"], getTypographyIntent('body'), colors.white, colors.gray50, borderRadius.md, colors.gray15, spacing.md, function (_ref3) {
  var $block = _ref3.$block;
  return $block ? '100%' : "".concat(styledSelectButtonDefaultWidth, "px");
}, colors.gray45, dataQa.hovered, colors.white, colors.gray20, colors.gray15, dataQa.focused, StyledSelectButtonWrapper, getFocus(), StyledCircle, colors.blue50, function (_ref4) {
  var _ref4$$placeholder = _ref4.$placeholder,
    $placeholder = _ref4$$placeholder === void 0 ? false : _ref4$$placeholder;
  return $placeholder && css(["", "{color:", ";}"], StyledSelectButtonLabel, colors.gray45);
}, function (_ref5) {
  var $disabled = _ref5.$disabled;
  return $disabled && css(["background-color:", ";border-color:", ";color:", ";cursor:default;pointer-events:none;", "{color:", ";}", "{", "}"], colors.gray94, colors.gray50, colors.gray45, StyledSelectButtonLabel, colors.gray70, StyledSelectArrow, arrowDown(4, 'gray70'));
}, function (_ref6) {
  var $error = _ref6.$error,
    $disabled = _ref6.$disabled,
    $loading = _ref6.$loading;
  if ($error && !$disabled) {
    return css(["&,&:hover{border-color:", ";border-color:var(--core-input-error-border-color,", ");}&:hover:focus{", "}"], colors.red50, colors.red50, getFocus());
  }
}, function (_ref7) {
  var $hasClearIcon = _ref7.$hasClearIcon;
  return css(["gap:", ";"], $hasClearIcon ? "".concat(spacing.xl, "px") : 0);
}, function (_ref8) {
  var $showClearIcon = _ref8.$showClearIcon;
  return css(["& + ", "{opacity:", ";pointer-events:", ";}"], StyledSelectClearIcon, $showClearIcon ? 1 : 0, $showClearIcon ? 'auto' : 'none');
}, function (_ref9) {
  var $open = _ref9.$open;
  return $open && css(["", "{", "}"], StyledSelectArrow, arrowUp(4, 'gray45'));
}, tableSelectClassName, function (_ref0) {
  var $open = _ref0.$open;
  return $open && css(["background-color:", ";", "{white-space:nowrap;}", "{opacity:1;pointer-events:all;}"], colors.white, StyledSelectButtonLabel, StyledSelectArrow);
}, function (_ref1) {
  var $open = _ref1.$open,
    $showClearIcon = _ref1.$showClearIcon;
  return $open && $showClearIcon && css(["& + ", "{opacity:1;pointer-events:all;}"], StyledSelectClearIcon);
}, function (_ref10) {
  var $open = _ref10.$open,
    _ref10$$placeholder = _ref10.$placeholder,
    $placeholder = _ref10$$placeholder === void 0 ? false : _ref10$$placeholder;
  return $open && $placeholder && css(["", "{opacity:1;pointer-events:all;}"], StyledSelectButtonLabel);
});
//# sourceMappingURL=Select.styles.js.map