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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AndWrapperUI = exports.OperatorWrapperBaseUI = exports.ButtonUI = exports.ButtonWrapperUI = exports.SplittedButtonUI = exports.OperatorUI = exports.SelectedOptionUI = exports.OptionsWrapperUI = exports.ConditionContentUI = exports.ConditionUI = exports.config = void 0;

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

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

var _Flexy = _interopRequireDefault(require("../Flexy"));

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

var _DropList = require("../DropList/DropList.togglers");

var config = {
  backgroundColor: (0, _color.getColor)('grey.200'),
  border: "1px solid " + (0, _color.getColor)('border.ui'),
  borderRadius: '3px',
  padding: '10px',
  optionsWidth: '170px',
  operatorBorderWidth: '2px',
  operatorHeight: '56px'
};
exports.config = config;
var ConditionUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Conditioncss__ConditionUI",
  componentId: "h36xbb-0"
})(["color:", ";"], (0, _color.getColor)('text.subtle'));
exports.ConditionUI = ConditionUI;
var ConditionContentUI = (0, _styledComponents.default)(_Flexy.default).withConfig({
  displayName: "Conditioncss__ConditionContentUI",
  componentId: "h36xbb-1"
})(["background-color:", ";border:", ";border-radius:", ";padding:", ";"], config.backgroundColor, config.border, config.borderRadius, config.padding);
exports.ConditionContentUI = ConditionContentUI;
var OptionsWrapperUI = (0, _styledComponents.default)(_Flexy.default.Item).withConfig({
  displayName: "Conditioncss__OptionsWrapperUI",
  componentId: "h36xbb-2"
})(["width:", ";.SelectTagToggler{width:100%;}"], config.optionsWidth);
exports.OptionsWrapperUI = OptionsWrapperUI;
var SelectedOptionUI = (0, _styledComponents.default)(_Flexy.default).withConfig({
  displayName: "Conditioncss__SelectedOptionUI",
  componentId: "h36xbb-3"
})(["align-items:center;height:40px;font-weight:500;font-size:14px;color:", ";padding:0 16px;"], (0, _color.getColor)('charcoal.700'));
exports.SelectedOptionUI = SelectedOptionUI;
var OperatorUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Conditioncss__OperatorUI",
  componentId: "h36xbb-4"
})(["background:", ";border-radius:", ";box-shadow:0 0 0 ", " white;color:white;display:inline-block;margin:5px 0;padding:3px 5px;text-transform:uppercase;line-height:1;&.is-borderless{box-shadow:none;}"], (0, _color.getColor)('grey.600'), config.operatorBorderWidth, config.operatorBorderWidth);
exports.OperatorUI = OperatorUI;
var SplittedButtonUI = (0, _styledComponents.default)(_DropList.SplittedButton).withConfig({
  displayName: "Conditioncss__SplittedButtonUI",
  componentId: "h36xbb-5"
})(["& .c-ControlGroupItem{margin-top:2px;margin-bottom:2px;& .SplitButton__Action{min-width:32px;text-transform:uppercase;padding:0 6px;}& .SplitButton__Toggler{--buttonPadding:0;width:20px;}& ul{overflow-y:hidden;}& .DropList__Select{width:80px;}}"]);
exports.SplittedButtonUI = SplittedButtonUI;
var ButtonWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Conditioncss__ButtonWrapperUI",
  componentId: "h36xbb-6"
})(["", ";"], function (_ref) {
  var align = _ref.align;
  return "text-align: " + align + ";";
});
exports.ButtonWrapperUI = ButtonWrapperUI;
var ButtonUI = (0, _styledComponents.default)(_Button.default).withConfig({
  displayName: "Conditioncss__ButtonUI",
  componentId: "h36xbb-7"
})(["box-shadow:0 0 0 ", " white;margin-bottom:", ";margin-top:", ";text-transform:uppercase;"], config.operatorBorderWidth, config.operatorBorderWidth, config.operatorBorderWidth);
exports.ButtonUI = ButtonUI;
var OperatorWrapperBaseUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Conditioncss__OperatorWrapperBaseUI",
  componentId: "h36xbb-8"
})(["position:relative;height:", ";display:flex;align-items:center;justify-content:center;&::before{background:", ";bottom:0;content:'';height:100%;left:50%;margin-left:-0.5px;position:absolute;top:0;width:1px;}> *{z-index:1;}"], config.operatorHeight, (0, _color.getColor)('border.ui'));
exports.OperatorWrapperBaseUI = OperatorWrapperBaseUI;
var AndWrapperUI = OperatorWrapperBaseUI;
exports.AndWrapperUI = AndWrapperUI;