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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.InputRadioUI = exports.InputPlaceholderUI = exports.InputInputUI = exports.InputUI = exports.InputIconUI = exports.inputConfig = exports.ChoiceLabelTextUI = exports.ChoiceHelpTextUI = exports.ChoiceLabelUI = exports.choiceConfig = void 0;

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

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

var _visuallyHidden = _interopRequireDefault(require("../../styles/mixins/visuallyHidden.css"));

var choiceConfig = {
  color: {
    labelDefault: (0, _color.getColor)('text.muted'),
    labelSelected: (0, _color.getColor)('text.default')
  },
  helpTextOffset: '26px',
  labelTextMargin: '10px'
};
exports.choiceConfig = choiceConfig;
var ChoiceLabelUI = (0, _styledComponents.default)('label').withConfig({
  displayName: "Choicecss__ChoiceLabelUI",
  componentId: "qoq3kn-0"
})(["cursor:pointer;display:inline-block;margin-bottom:0;vertical-align:middle;&.is-block{display:block;}&.is-disabled{cursor:not-allowed;}&.is-stacked{color:", ";&.is-selected{color:", ";}}"], choiceConfig.color.labelDefault, choiceConfig.color.labelSelected);
exports.ChoiceLabelUI = ChoiceLabelUI;
var ChoiceHelpTextUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Choicecss__ChoiceHelpTextUI",
  componentId: "qoq3kn-1"
})(["margin-left:", ";&.is-stacked{margin-left:0;}"], choiceConfig.helpTextOffset);
exports.ChoiceHelpTextUI = ChoiceHelpTextUI;
var ChoiceLabelTextUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "Choicecss__ChoiceLabelTextUI",
  componentId: "qoq3kn-2"
})(["padding-left:2px;&.is-stacked{display:block;font-weight:bold;margin-top:", ";}"], choiceConfig.labelTextMargin);
exports.ChoiceLabelTextUI = ChoiceLabelTextUI;
var inputConfig = {
  iconColor: 'white',
  radioSize: 4,
  radioOffset: 3,
  size: 16,
  customSize: 20
};
exports.inputConfig = inputConfig;
var InputIconUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Choicecss__InputIconUI",
  componentId: "qoq3kn-3"
})(["color:", ";padding:3px;position:relative;z-index:1;"], inputConfig.iconColor);
exports.InputIconUI = InputIconUI;
var InputUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Choicecss__InputUI",
  componentId: "qoq3kn-4"
})(["align-items:center;display:flex;justify-content:center;height:", "px;position:relative;width:", "px;&.is-custom{height:", "px;width:", "px;}&.is-top{top:2px;}.c-InputBackdropV2__focus{top:-3px;bottom:-3px;right:-3px;left:-3px;}&.is-checkbox{.c-InputBackdropV2__focus{border-radius:4px;}}&.is-disabled{", "{color:", " !important;}}"], inputConfig.size, inputConfig.size, inputConfig.customSize, inputConfig.customSize, InputIconUI, (0, _color.getColor)('grey.600'));
exports.InputUI = InputUI;
var InputInputUI = (0, _styledComponents.default)('input').withConfig({
  displayName: "Choicecss__InputInputUI",
  componentId: "qoq3kn-5"
})(["", ";"], (0, _visuallyHidden.default)());
exports.InputInputUI = InputInputUI;
var InputPlaceholderUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Choicecss__InputPlaceholderUI",
  componentId: "qoq3kn-6"
})(["background-color:", ";box-shadow:none;border-radius:50%;height:", "px;width:", "px;"], inputConfig.iconColor, inputConfig.radioSize, inputConfig.radioSize);
exports.InputPlaceholderUI = InputPlaceholderUI;
var InputRadioUI = (0, _styledComponents.default)(InputPlaceholderUI).withConfig({
  displayName: "Choicecss__InputRadioUI",
  componentId: "qoq3kn-7"
})(["animation:ChoiceInputRadioScale 300ms;@keyframes ChoiceInputRadioScale{from{transform:scale(1.5);}to{transform:scale(1);}}"]);
exports.InputRadioUI = InputRadioUI;