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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.CloseButtonUI = exports.IconUI = exports.config = void 0;

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

var _Icon = _interopRequireDefault(require("../Icon"));

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

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var config = {
  color: (0, _color.getColor)('grey.700'),
  colorHover: (0, _color.getColor)('grey.800'),
  colorActive: (0, _color.getColor)('charcoal.200'),
  padding: '2px 6px',
  size: '32px',
  sizes: {
    md: {
      size: '32px',
      padding: '2px 6px'
    },
    sm: {
      size: '28px',
      padding: '2px 3px'
    },
    xs: {
      size: '24px',
      padding: '2px 1px'
    },
    tiny: {
      size: '20px',
      padding: '0 0'
    }
  }
};
exports.config = config;
var IconUI = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "CloseButtoncss__IconUI",
  componentId: "juktbm-0"
})(["opacity:0.5;position:relative;transition:opacity 0.1s ease;z-index:1;"]);
exports.IconUI = IconUI;
var CloseButtonUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "CloseButtoncss__CloseButtonUI",
  componentId: "juktbm-1"
})(["appearance:none;cursor:pointer;outline:none;position:relative;background-color:white;border:none;border-radius:50%;color:", ";cursor:pointer;display:block;height:", ";padding:", ";position:relative;transition:background-color 300ms ease;width:", ";&:hover,&:focus{color:", ";outline:none;", "{opacity:0.8;}}&:active{color:", ";outline:none;", "{opacity:0.8;}}&.is-seamless{background-color:transparent;color:currentColor;&:hover,&:active,&:focus{background-color:transparent;color:currentColor;}}", ";"], config.color, config.size, config.padding, config.size, config.colorHover, IconUI, config.colorActive, IconUI, makeSizeStyles);
exports.CloseButtonUI = CloseButtonUI;

function makeSizeStyles() {
  return (0, _forEach.default)(config.sizes, function (size, values) {
    return "\n    &.is-" + size + " {\n      height: " + values.size + ";\n      padding: " + values.padding + ";\n      width: " + values.size + ";\n    }\n  ";
  });
}