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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.SelectedCheckmarkUI = exports.ItemSelectedCheckUI = exports.SubMenuIncidatorUI = exports.TriggerUI = exports.DividerUI = exports.HeaderUI = exports.GroupUI = exports.ItemUI = exports.ActionContentUI = exports.ActionUI = exports.WrapperUI = exports.BlockUI = exports.MenuUI = exports.MenuWrapperUI = exports.CardUI = exports.MenuContainerUI = exports.DropdownUI = void 0;

var _Dropdown = require("./Dropdown.utils");

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

var _Card = _interopRequireDefault(require("../Card"));

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

var _color2 = require("../../utilities/color");

var _MenuUI$defaultProps, _WrapperUI$defaultPro, _ActionUI$defaultProp, _ItemUI$defaultProps, _TriggerUI$defaultPro;

var DropdownUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__DropdownUI",
  componentId: "sc-1a5b51p-0"
})(["position:relative;"]);
exports.DropdownUI = DropdownUI;
var MenuContainerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__MenuContainerUI",
  componentId: "sc-1a5b51p-1"
})(["position:absolute;font-family:var(--HSDSGlobalFontFamily);font-size:var(--HSDSGlobalFontSize);&.is-dropUp{bottom:calc(100% + 5px);}&.is-dropLeft{right:0%;}&:not(.is-dropUp){top:5px;}.c-DropdownBlock + .c-DropdownBlock{border-top:1px solid ", ";}"], (0, _color.getColor)('grey.600'));
exports.MenuContainerUI = MenuContainerUI;
var CardUI = (0, _styledComponents.default)(_Card.default).withConfig({
  displayName: "Dropdowncss__CardUI",
  componentId: "sc-1a5b51p-2"
})(["display:flex;flex-direction:column;min-height:30px;min-width:160px;max-height:360px;"]);
exports.CardUI = CardUI;
CardUI.defaultProps = {
  floating: true,
  seamless: true
};
var MenuWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__MenuWrapperUI",
  componentId: "sc-1a5b51p-3"
})(["overflow-y:auto;overflow-x:hidden;max-height:100%;min-height:0;height:100%;width:100%;"]);
exports.MenuWrapperUI = MenuWrapperUI;
var MenuUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__MenuUI",
  componentId: "sc-1a5b51p-4"
})(["padding:8px 0;width:100%;"]);
exports.MenuUI = MenuUI;
MenuUI.defaultProps = (_MenuUI$defaultProps = {}, _MenuUI$defaultProps[_Dropdown.SELECTORS.menuAttribute] = true, _MenuUI$defaultProps.floating = true, _MenuUI$defaultProps);
var BlockUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__BlockUI",
  componentId: "sc-1a5b51p-5"
})(["flex:none;padding:8px 16px;min-height:0;max-height:100%;&.is-seamless{padding:0;}&.is-stretchy{flex:1;}"]);
exports.BlockUI = BlockUI;
var WrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__WrapperUI",
  componentId: "sc-1a5b51p-6"
})(["visibility:hidden;pointer-events:none;position:relative;&:before{content:'';position:absolute;width:15%;right:calc(100% - 20px);top:34px;height:50%;}"]);
exports.WrapperUI = WrapperUI;
WrapperUI.defaultProps = (_WrapperUI$defaultPro = {}, _WrapperUI$defaultPro[_Dropdown.SELECTORS.wrapperAttribute] = true, _WrapperUI$defaultPro);
var ActionUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__ActionUI",
  componentId: "sc-1a5b51p-7"
})(["display:flex;align-items:center;justify-content:space-between;padding:8px 16px;&.is-open{background-color:", ";color:", ";", "{color:initial;}}&:active{background-color:", ";}"], (0, _color2.rgba)((0, _color.getColor)('grey.300'), 1), (0, _color.getColor)('link.base'), MenuUI, (0, _color2.rgba)((0, _color.getColor)('grey.400'), 1));
exports.ActionUI = ActionUI;
ActionUI.defaultProps = (_ActionUI$defaultProp = {}, _ActionUI$defaultProp[_Dropdown.SELECTORS.actionAttribute] = true, _ActionUI$defaultProp);
var ActionContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__ActionContentUI",
  componentId: "sc-1a5b51p-8"
})(["flex:1;min-width:0;max-width:100%;"]);
exports.ActionContentUI = ActionContentUI;

var ItemUI = _styledComponents.default.div.withConfig({
  displayName: "Dropdowncss__ItemUI",
  componentId: "sc-1a5b51p-9"
})(["background-color:", ";border-radius:0 !important;color:", ";cursor:pointer;display:block;outline:none;position:static;text-decoration:none;transition:background-color 0.1s ease;user-select:none;&.is-option{padding:8px 16px;}&.is-active{> ", ",&.is-option{font-weight:500;}}&.c-SelectionClearerItem + .c-DropdownItem{padding-top:12px;}&:focus{", "{color:initial;}}&:hover{text-decoration:none;}&:last-child{border:none;}", "{position:absolute;padding-left:20px;padding-right:20px;margin-left:-20px;margin-right:-20px;}&.is-focused{> ", ",&.is-option{background-color:", ";color:", ";}}&.is-focused:hover,&.is-open{> ", "{visibility:visible;pointer-events:auto;}}&.is-disabled{cursor:initial;pointer-events:none;opacity:0.4;}"], (0, _color2.rgba)((0, _color.getColor)('grey.400'), 0), (0, _color.getColor)('charcoal.400'), ActionUI, MenuUI, WrapperUI, ActionUI, (0, _color2.rgba)((0, _color.getColor)('grey.300'), 1), (0, _color.getColor)('link.base'), WrapperUI);

exports.ItemUI = ItemUI;
ItemUI.defaultProps = (_ItemUI$defaultProps = {}, _ItemUI$defaultProps[_Dropdown.SELECTORS.itemAttribute] = true, _ItemUI$defaultProps);
var GroupUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__GroupUI",
  componentId: "sc-1a5b51p-10"
})(["margin-top:0;& + &{margin-top:10px;}"]);
exports.GroupUI = GroupUI;
var HeaderUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__HeaderUI",
  componentId: "sc-1a5b51p-11"
})(["padding:8px 16px;"]);
exports.HeaderUI = HeaderUI;
var DividerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__DividerUI",
  componentId: "sc-1a5b51p-12"
})(["background-color:", ";margin:8px 0;height:1px;"], (0, _color.getColor)('grey.400'));
exports.DividerUI = DividerUI;
var TriggerUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "Dropdowncss__TriggerUI",
  componentId: "sc-1a5b51p-13"
})(["color:", ";cursor:pointer;display:inline-block;outline:none;&.is-disabled{color:", ";pointer-events:none;}&.is-open{color:", ";}& > *{pointer-events:none;}"], (0, _color.getColor)('link.base'), (0, _color.getColor)('charcoal.200'), (0, _color.getColor)('blue.700'));
exports.TriggerUI = TriggerUI;
TriggerUI.defaultProps = (_TriggerUI$defaultPro = {}, _TriggerUI$defaultPro[_Dropdown.SELECTORS.triggerAttribute] = true, _TriggerUI$defaultPro.tabIndex = 0, _TriggerUI$defaultPro);
var SubMenuIncidatorUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__SubMenuIncidatorUI",
  componentId: "sc-1a5b51p-14"
})(["pointer-events:none;margin-right:-8px;min-width:0;"]);
exports.SubMenuIncidatorUI = SubMenuIncidatorUI;
var ItemSelectedCheckUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__ItemSelectedCheckUI",
  componentId: "sc-1a5b51p-15"
})(["display:flex;justify-content:space-between;align-items:center;height:20px;&.is-selectionClearer-active{font-weight:bold;}"]);
exports.ItemSelectedCheckUI = ItemSelectedCheckUI;
var SelectedCheckmarkUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Dropdowncss__SelectedCheckmarkUI",
  componentId: "sc-1a5b51p-16"
})(["width:28px;padding-left:4px;margin-left:auto;.c-Icon{right:-4px;}"]);
exports.SelectedCheckmarkUI = SelectedCheckmarkUI;