@procore/core-react/dist/MultiSelect/MultiSelect.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 { StyledSelectArrow, StyledSelectArrowContainer, StyledSelectButton, StyledSelectMenu } from '../Select/Select.styles';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var StyledMultiSelectInner = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiSelectInner",
  componentId: "core-12_44_0__sc-s9ym9q-0"
})(["display:flex;flex-wrap:wrap;margin-bottom:2px;margin-left:", "px;margin-right:", "px;margin-top:2px;min-width:0;width:100%;"], spacing.md, spacing.xs);
export var StyledMultiSelectValues = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiSelectValues",
  componentId: "core-12_44_0__sc-s9ym9q-1"
})(["display:contents;"]);
export var StyledMultiSelectToken = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiSelectToken",
  componentId: "core-12_44_0__sc-s9ym9q-2"
})(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:0 1 auto;> div{max-width:178px;width:100%;}"], spacing.xs);
export var StyledMultiSelectSearchInput = /*#__PURE__*/styled.input.withConfig({
  displayName: "StyledMultiSelectSearchInput",
  componentId: "core-12_44_0__sc-s9ym9q-3"
})(["background-color:transparent;border-width:0;font-family:inherit;padding:0;height:24px;width:100%;", " ", " &::-ms-clear{display:none;}&:focus{box-shadow:none;outline:none;}&::placeholder{color:", ";}"], getTypographyIntent('body'), function (_ref) {
  var $isNavigatingTokens = _ref.$isNavigatingTokens;
  return $isNavigatingTokens && css(["color:transparent;"]);
}, colors.gray45);
export var StyledMultiSelectSearch = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiSelectSearch",
  componentId: "core-12_44_0__sc-s9ym9q-4"
})(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:1;max-width:100%;min-width:24px;"], spacing.xs);
export var StyledMultiSelectSearchIcon = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiSelectSearchIcon",
  componentId: "core-12_44_0__sc-s9ym9q-5"
})(["align-items:center;align-self:flex-start;display:flex;height:34px;justify-content:flex-end;margin-left:", "px;margin-right:", "px;min-width:40px;width:40px;"], spacing.xs, spacing.md);
export var StyledMultiSelectClearIcon = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledMultiSelectClearIcon",
  componentId: "core-12_44_0__sc-s9ym9q-6"
})(["", " ", "{pointer-events:none;}"], function (_ref2) {
  var $show = _ref2.$show;
  return css(["opacity:", ";"], $show ? 1 : 0);
}, StyledContent);
export var StyledMultiSelectArrowContainer = StyledSelectArrowContainer;
export var StyledMultiSelectArrow = StyledSelectArrow;
export var StyledMultiSelectMenu = StyledSelectMenu;
export var StyledMultiSelectButton = /*#__PURE__*/styled(StyledSelectButton).withConfig({
  displayName: "StyledMultiSelectButton",
  componentId: "core-12_44_0__sc-s9ym9q-7"
})(["height:auto;padding:0;white-space:normal;&:focus-within{", "}", ""], getFocus(), function (_ref3) {
  var $emptyValue = _ref3.$emptyValue;
  return $emptyValue && css(["", "{cursor:pointer;}"], StyledMultiSelectSearchInput);
});
//# sourceMappingURL=MultiSelect.styles.js.map