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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.CheckMarkCardGridUI = exports.HeadingUI = exports.SubtitleUI = exports.CheckMarkCardUI = exports.CheckMarkCardContentUI = exports.AvatarWrapperUI = exports.MarkUI = void 0;

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

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

var _ChoiceGroup = _interopRequireDefault(require("../ChoiceGroup"));

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

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

var MarkUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "CheckMarkCardcss__MarkUI",
  componentId: "sc-191v3r1-0"
})(["", ";--focusRingRadius:3px;position:absolute;top:0;left:0;height:28px;width:28px;border-radius:3px;opacity:0;transition:opacity 0.15s cubic-bezier(0.55,0,1,0.45);will-change:opacity;background-color:", ";z-index:100;outline:none;&.is-visible{opacity:1;}.mark-icon{color:white;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}"], _focusRing.focusRing, (0, _color.getColor)('blue.500'));
exports.MarkUI = MarkUI;

var AvatarWrapperUI = _styledComponents.default.div.withConfig({
  displayName: "CheckMarkCardcss__AvatarWrapperUI",
  componentId: "sc-191v3r1-1"
})(["margin-bottom:14px;"]);

exports.AvatarWrapperUI = AvatarWrapperUI;

var CheckMarkCardContentUI = _styledComponents.default.div.withConfig({
  displayName: "CheckMarkCardcss__CheckMarkCardContentUI",
  componentId: "sc-191v3r1-2"
})(["position:relative;border-radius:3px;flex:1 1 100%;display:flex;align-items:center;flex-direction:column;justify-content:center;width:100%;transition:background-color 0.15s linear;"]);

exports.CheckMarkCardContentUI = CheckMarkCardContentUI;
var CheckMarkCardUI = (0, _styledComponents.default)('label').withConfig({
  displayName: "CheckMarkCardcss__CheckMarkCardUI",
  componentId: "sc-191v3r1-3"
})(["", ";", ";--headingColor:", ";--subtitleColor:", ";--focusRingOffset:0;--focusRingRadius:4px;display:flex;box-sizing:border-box;position:relative;border-radius:4px;will-change:transform,box-shadow;transition:transform 0.16s ease-in-out,box-shadow 0.16s ease-in-out;cursor:pointer;padding:3px;margin-bottom:0;height:", ";min-height:", ";width:", ";max-width:", ";&:not(.is-disabled):hover{", " transform:translateY(-2px);}&.is-disabled{cursor:not-allowed;transition:none;}&.is-disabled:not(.with-status){--headingColor:", ";--subtitleColor:", ";box-shadow:none;background:", ";", "{opacity:0.5;}&:hover{box-shadow:none;}}&.with-status{cursor:default;&:hover{", " transform:translateY(0);}}&.is-checked ", "{background:", ";}&.is-lavender{&:before{opacity:0;}", "{background-color:", ";}", "{background:", ";}}"], _focusRing.focusRing, _depth.d400, (0, _color.getColor)('charcoal.600'), (0, _color.getColor)('charcoal.400'), function (_ref) {
  var height = _ref.height;
  return height ? height : 'auto';
}, function (_ref2) {
  var height = _ref2.height;
  return !height ? '160px' : '0';
}, function (_ref3) {
  var maxWidth = _ref3.maxWidth;
  return maxWidth ? '100%' : '170px';
}, function (_ref4) {
  var maxWidth = _ref4.maxWidth;
  return maxWidth ? maxWidth : '170px';
}, _depth.d400Effect, (0, _color.getColor)('charcoal.400'), (0, _color.getColor)('charcoal.400'), (0, _color.getColor)('grey.200'), AvatarWrapperUI, _depth.d400, CheckMarkCardContentUI, (0, _color.getColor)('blue.100'), MarkUI, (0, _color.getColor)('lavender.600'), CheckMarkCardContentUI, (0, _color.getColor)('purple.100'));
exports.CheckMarkCardUI = CheckMarkCardUI;
var SubtitleUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "CheckMarkCardcss__SubtitleUI",
  componentId: "sc-191v3r1-4"
})(["font-size:13px;color:var(--subtitleColor);"]);
exports.SubtitleUI = SubtitleUI;
var HeadingUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "CheckMarkCardcss__HeadingUI",
  componentId: "sc-191v3r1-5"
})(["font-size:14px;margin:0 0 4px;text-align:center;overflow:hidden;padding:0 10px;font-weight:500;color:var(--headingColor);text-overflow:ellipsis;width:100%;white-space:nowrap;"]);
exports.HeadingUI = HeadingUI;
var CheckMarkCardGridUI = (0, _styledComponents.default)(_ChoiceGroup.default).withConfig({
  displayName: "CheckMarkCardcss__CheckMarkCardGridUI",
  componentId: "sc-191v3r1-6"
})(["display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:", ";grid-gap:10px;gap:10px;.c-FormGroupChoice{margin:0;}"], function (_ref5) {
  var choiceHeight = _ref5.choiceHeight;
  return "" + choiceHeight;
});
exports.CheckMarkCardGridUI = CheckMarkCardGridUI;