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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.RateActionUI = exports.config = void 0;

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

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

var _color2 = require("../../utilities/color");

var _Emoticon = require("../Emoticon/Emoticon.css");

var config = {
  size: {
    default: '28px',
    xl: '42px',
    lg: '28px',
    md: '24px',
    sm: '20px'
  },
  boxShadowColor: (0, _color2.rgba)((0, _color.getColor)('grey.600'), 0.5),
  transition: 'all 200ms ease-in-out'
};
exports.config = config;

function getBorderHoverColor(name) {
  if (name === 'happy' || name === 'reaction-happy') {
    return (0, _color.getColor)('yellow.200');
  } else if (name === 'sad' || name === 'reaction-sad') {
    return (0, _color.getColor)('indigo.200');
  } else if (name === 'meh' || name === 'reaction-okay') {
    return (0, _color.getColor)('grey.300');
  }
}

var RateActionUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "RateActioncss__RateActionUI",
  componentId: "sc-1xs3x9r-0"
})(["&.c-RateAction{.c-Emoticon{border:2px solid white;border-radius:50%;width:calc(100%);height:calc(100%);}-webkit-appearance:none;border-radius:50%;border:none;box-shadow:0 3px 6px 0 ", ";height:", ";margin:0;outline:none;padding:0;position:relative;transition:", ";user-select:none;width:", ";will-change:box-shadow,transform,fill;-webkit-user-drag:none;path{transition:fill 200ms linear;}", " &::-moz-focus-inner{border:0;}&:after{content:'';border-radius:50%;border:", ";display:none;height:calc(", " + 4px);left:-2px;pointer-events:none;position:absolute;top:-2px;width:calc(", " + 4px);will-change:transform;@keyframes HSDSRateActionSelected{0%{transform:scale(0.5);}100%{transform:scale(1);}}}&.is-active{", ";&:focus{transform:scale(1.3);}&:after{animation:HSDSRateActionSelected 200ms cubic-bezier(0.39,0.575,0.565,1) both;display:block;}}&[disabled]{pointer-events:none;}&:hover,&:focus{outline:none;box-shadow:0 4px 7px 0 ", ";transform:scale(1.3);z-index:1;}&.is-xl{height:", ";width:", ";&:after{height:calc(", " + 4px);width:calc(", " + 4px);}}&.is-lg{width:", ";height:", ";}&.is-md{width:", ";height:", ";&:after{height:calc(", " + 4px);width:calc(", " + 4px);}}&.is-sm{width:", ";height:", ";&:after{height:calc(", " + 4px);width:calc(", " + 4px);}}&:hover{cursor:pointer;}", ";}"], config.boxShadowColor, config.size.default, config.transition, config.size.default, function (_ref) {
  var name = _ref.name,
      size = _ref.size,
      withCircle = _ref.withCircle;

  var _size = parseInt(config.size[size], 10) * 2 + 4;

  return withCircle && "\n          &:before {\n            content: '';\n            background: " + (0, _color.getColor)('grey.200') + ";\n            border-radius: 50% !important;\n            display: block;\n            height: " + _size + "px;\n            left: 50%;\n            top: 50%;\n            margin-left: -" + _size / 2 + "px;\n            margin-top: -" + _size / 2 + "px;\n            position: absolute;\n            width: " + _size + "px;\n            z-index: -1;\n          }\n          &:hover:before, &.is-active:before {\n            background-color: " + getBorderHoverColor(name) + "\n          }";
}, function (_ref2) {
  var withCircle = _ref2.withCircle,
      outlineColor = _ref2.outlineColor;
  return !withCircle ? "2px solid " + outlineColor : 'none';
}, config.size.default, config.size.default, function (withCircle) {
  return withCircle && "transform: scale(1.3)";
}, config.boxShadowColor, config.size.xl, config.size.xl, config.size.xl, config.size.xl, config.size.lg, config.size.lg, config.size.md, config.size.md, config.size.md, config.size.md, config.size.sm, config.size.sm, config.size.sm, config.size.sm, _Emoticon.emoticonAnimationCSS);
exports.RateActionUI = RateActionUI;