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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.ContentUI = exports.HeadingUI = exports.IconWrapperUI = exports.RadioCardUI = void 0;

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

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

var _depth = require("../../styles/mixins/depth.css");

var _Heading = _interopRequireDefault(require("../Heading"));

var _Text = _interopRequireDefault(require("../Text"));

var RadioCardUI = (0, _styledComponents.default)('label').withConfig({
  displayName: "RadioCardcss__RadioCardUI",
  componentId: "sc-9td1m4-0"
})(["box-sizing:border-box;position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;max-width:", ";min-width:0;min-height:", ";height:", ";padding:14px 12px 14px;border-radius:4px;", " cursor:pointer;transition:all 0.15s;&:hover{", " transform:translateY(-2px);}&.is-checked:active,&.is-focused,&.is-focused.is-checked,&:focus-within,&.is-checked:focus-within{border-radius:7px;box-shadow:0px 0px 0 2px ", ";}&.is-checked{&:hover{transform:scale(1.05) translateY(-2px);}&,&:active,&.is-focused,&.is-focused.is-checked,&:focus-within,&.is-checked:focus-within{transform:scale(1.05);}}"], function (_ref) {
  var maxWidth = _ref.maxWidth;
  return maxWidth ? maxWidth : '80px';
}, function (_ref2) {
  var withContent = _ref2.withContent,
      withHeading = _ref2.withHeading;
  return withHeading || withContent ? 'auto' : '100px';
}, function (_ref3) {
  var height = _ref3.height;
  return height ? height : 'auto';
}, _depth.d300Effect, _depth.d400Effect, (0, _color.getColor)('blue.500'));
exports.RadioCardUI = RadioCardUI;
var IconWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "RadioCardcss__IconWrapperUI",
  componentId: "sc-9td1m4-1"
})(["align-items:center;justify-content:center;display:flex;width:auto;height:", ";min-height:", ";margin-bottom:", ";color:", ";.has-selected-value &:not(.is-checked){opacity:0.5;}&.is-checked{opacity:1;color:", ";}"], function (_ref4) {
  var iconSize = _ref4.iconSize;
  return iconSize ? iconSize + "px" : 'auto';
}, function (_ref5) {
  var iconSize = _ref5.iconSize;
  return iconSize ? iconSize + "px" : '52px';
}, function (_ref6) {
  var withHeading = _ref6.withHeading;
  return withHeading ? '0' : '10px';
}, (0, _color.getColor)('charcoal.200'), (0, _color.getColor)('charcoal.600'));
exports.IconWrapperUI = IconWrapperUI;
var HeadingUI = (0, _styledComponents.default)(_Heading.default).withConfig({
  displayName: "RadioCardcss__HeadingUI",
  componentId: "sc-9td1m4-2"
})(["font-size:13px;margin-bottom:0;color:", ";text-align:center;"], (0, _color.getColor)('charcoal.700'));
exports.HeadingUI = HeadingUI;
var ContentUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "RadioCardcss__ContentUI",
  componentId: "sc-9td1m4-3"
})(["font-size:13px;margin-bottom:10px;color:", ";text-align:center;.has-selected-value &,.with-heading &{color:", ";}.is-checked:not(.with-heading) &{color:", ";font-weight:500;}"], (0, _color.getColor)('charcoal.500'), (0, _color.getColor)('charcoal.200'), (0, _color.getColor)('charcoal.600'));
exports.ContentUI = ContentUI;
var _default = RadioCardUI;
exports.default = _default;