@helpscout/hsds-react/components/DropList/DropList.togglers.css.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.IconButtonUI = exports.SelectErrorTooltipIconUI = exports.SelectArrowsUI = exports.SelectUI = exports.SplitButtonTogglerUI = exports.SplitButtonUI = exports.NavLinkTogglerUI = void 0;

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

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

var _Button = _interopRequireDefault(require("../Button"));

var _IconButton = _interopRequireDefault(require("../IconButton"));

var _focusRing = require("../../styles/mixins/focusRing.css");

var NavLinkTogglerUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "DropListtogglerscss__NavLinkTogglerUI",
  componentId: "sc-1jw7z77-0"
})(["display:flex;justify-content:flex-start;align-items:center;height:55px;padding:0 18px;background:transparent;border:0;font-family:var(--HSDSGlobalFontFamily);font-size:14px;color:", ";cursor:pointer;&.is-active{color:white;}.c-Icon{margin:3px 0 0 3px;}"], (0, _color.getColor)('blue.300'));
exports.NavLinkTogglerUI = NavLinkTogglerUI;
var SplitButtonUI = (0, _styledComponents.default)(_Button.default).withConfig({
  displayName: "DropListtogglerscss__SplitButtonUI",
  componentId: "sc-1jw7z77-1"
})(["&.is-theme-blue{--focusRingShadow:", ";margin-right:0;}"], _focusRing.focusShadowWithInset);
exports.SplitButtonUI = SplitButtonUI;
var SplitButtonTogglerUI = (0, _styledComponents.default)(_Button.default).withConfig({
  displayName: "DropListtogglerscss__SplitButtonTogglerUI",
  componentId: "sc-1jw7z77-2"
})(["pointer-events:all;--focusRingShadow:", ";&:not(.is-style-outlined){&.is-theme-blue{box-shadow:-1px 0 0 ", ";}&.is-theme-green{box-shadow:-1px 0 0 ", ";}&.is-theme-red{box-shadow:-1px 0 0 ", ";}&[disabled]{box-shadow:-1px 0 0 ", ";}}&.is-size-lg{--buttonMinWidth:30px;padding:0;}.c-Button__content{padding-top:2px;width:16px;}"], _focusRing.focusShadowWithInset, (0, _color.getColor)('blue.600'), (0, _color.getColor)('green.600'), (0, _color.getColor)('red.600'), (0, _color.getColor)('grey.600'));
exports.SplitButtonTogglerUI = SplitButtonTogglerUI;
var SelectUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "DropListtogglerscss__SelectUI",
  componentId: "sc-1jw7z77-3"
})(["display:flex;align-items:center;justify-content:space-between;width:150px;height:40px;padding:0 15px;margin:0;background:white;border:0;box-shadow:inset 0 0 0 1px ", ";box-sizing:border-box;border-radius:3px;font-family:var(--HSDSGlobalFontFamily);font-size:13px;color:", ";&.is-error{box-shadow:inset 0 0 0 2px ", ";padding-right:10px;}&.is-active,&:focus{outline:0;box-shadow:inset 0 0 0 2px ", ";}&[disabled]{cursor:not-allowed;color:", ";}"], (0, _color.getColor)('grey.800'), (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('red.500'), (0, _color.getColor)('blue.500'), (0, _color.getColor)('charcoal.200'));
exports.SelectUI = SelectUI;
var SelectArrowsUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "DropListtogglerscss__SelectArrowsUI",
  componentId: "sc-1jw7z77-4"
})(["margin-left:auto;width:7px;height:14px;position:relative;&::before,&::after{content:'';border-left:3.5px solid transparent;border-right:3.5px solid transparent;position:absolute;left:0;}&::before{border-bottom:6px solid ", ";top:0;}&::after{border-top:6px solid ", ";bottom:0;}"], (0, _color.getColor)('charcoal.700'), (0, _color.getColor)('charcoal.700'));
exports.SelectArrowsUI = SelectArrowsUI;
var SelectErrorTooltipIconUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "DropListtogglerscss__SelectErrorTooltipIconUI",
  componentId: "sc-1jw7z77-5"
})(["margin-left:8px;"]);
exports.SelectErrorTooltipIconUI = SelectErrorTooltipIconUI;
var IconButtonUI = (0, _styledComponents.default)(_IconButton.default).withConfig({
  displayName: "DropListtogglerscss__IconButtonUI",
  componentId: "sc-1jw7z77-6"
})(["&.is-active,&[aria-expanded='true']{color:var(--buttonColorHover);&:not(:focus-visible){background-color:var(--buttonBackgroundColorHover);}}"]);
exports.IconButtonUI = IconButtonUI;