@helpscout/hsds-react/components/Switch/Switch.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.StateUI = exports.ToggleUI = exports.BackdropUI = exports.InputUI = exports.SwitchUI = exports.WrapperUI = exports.config = void 0;

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

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

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

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

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

var config = {
  backgroundColor: {
    default: (0, _color.getColor)('grey.500'),
    disabled: (0, _color.getColor)('grey.300'),
    hover: (0, _color.getColor)('grey.600')
  },
  backgroundColorChecked: {
    default: (0, _color.getColor)('green.500'),
    disabled: (0, _color2.rgba)((0, _color.getColor)('green.500'), 0.5),
    hover: (0, _color.getColor)('green.600')
  },
  borderRadius: 100,
  color: {
    default: (0, _color.getColor)('charcoal.200'),
    disabled: (0, _color.getColor)('charcoal.400'),
    checked: 'white'
  },
  fontSize: 12,
  padding: '0 10px',
  toggle: {
    offset: 2
  },
  size: {
    lg: 28,
    md: 21,
    sm: 16
  },
  transition: {
    switch: 'all 300ms ease',
    toggle: 'all 200ms ease'
  }
};
exports.config = config;

function getWidth(size) {
  return Math.floor(size * 2);
}

function makeSizeStyles(config) {
  return (0, _forEach.default)(config.size, function (size, value) {
    return "\n    &.is-" + size + " {\n      height: " + value + "px;\n      line-height: " + value + "px;\n      width: " + getWidth(value) + "px;\n    }\n  ";
  });
}

function makeToggleSizeStyles(config) {
  return (0, _forEach.default)(config.size, function (size, value) {
    return "\n    &.is-" + size + " {\n      height: " + (value - config.toggle.offset * 2) + "px;\n      width: " + (value - config.toggle.offset * 2) + "px;\n    }\n  ";
  });
}

function makeToggleOffsetStyles(config) {
  return (0, _forEach.default)(config.size, function (size, value) {
    return "\n    &.is-" + size + " {\n      margin-left: -" + (value / 2 - config.toggle.offset / 1) + "px;\n    }\n  ";
  });
}

var WrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Switchcss__WrapperUI",
  componentId: "sc-1f71duy-0"
})(["display:inline-block;"]);
exports.WrapperUI = WrapperUI;
var SwitchUI = (0, _styledComponents.default)('label').withConfig({
  displayName: "Switchcss__SwitchUI",
  componentId: "sc-1f71duy-1"
})(["cursor:pointer;display:block;margin:0;position:relative;&.is-disabled{pointer-events:none;}&.is-loading{pointer-events:none;}&:hover .c-Switch__backdrop{background-color:", ";}&:hover .c-Switch__backdrop.is-checked{background-color:", ";}"], config.backgroundColor.hover, config.backgroundColorChecked.hover);
exports.SwitchUI = SwitchUI;
var InputUI = (0, _styledComponents.default)('input').withConfig({
  displayName: "Switchcss__InputUI",
  componentId: "sc-1f71duy-2"
})(["bottom:0;height:100%;left:0;margin:0;opacity:0;position:absolute;right:0;top:0;width:100%;z-index:-1;"]);
exports.InputUI = InputUI;
var BackdropUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Switchcss__BackdropUI",
  componentId: "sc-1f71duy-3"
})(["background-color:", ";border-radius:", "px;box-shadow:0 0 0 0 rgba(0,0,0,0.1) inset;box-sizing:border-box;color:", ";cursor:pointer;font-size:", "px;padding:", ";pointer-events:none;position:relative;text-align:right;transition:", ";z-index:1;&.is-focused{", ";--focusRingOffset:-2px;--focusRingRadius:", "px;}&.is-disabled{background-color:", ";color:", ";}&.is-checked{background-color:", ";color:", ";text-align:left;&.is-disabled{background-color:", ";color:", ";}}", ";"], config.backgroundColor.default, config.borderRadius, config.color.default, config.fontSize, config.padding, config.transition.switch, _focusRing.focusRing, config.borderRadius, config.backgroundColor.disabled, config.color.disabled, config.backgroundColorChecked.default, config.color.checked, config.backgroundColorChecked.disabled, config.color.disabled, makeSizeStyles(config));
exports.BackdropUI = BackdropUI;
var ToggleUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Switchcss__ToggleUI",
  componentId: "sc-1f71duy-4"
})(["background-color:white;border-radius:", "px;box-shadow:0 2px 4px rgba(0,0,0,0.1);box-sizing:border-box;content:'';left:", "px;pointer-events:none;position:absolute;top:", "px;transition:", ";", ";&.is-active{width:60%;}&.is-checked{left:inherit;right:", "px;}&.is-loading{animation:SwitchTogglePulse 1000ms linear infinite;left:50%;right:inherit;", ";}@keyframes SwitchTogglePulse{0%{box-shadow:0 0 0 rgba(0,0,0,0);transform:scale(0.8);}50%{box-shadow:0 0 0 rgba(0,0,0,0);transform:scale(0.6);}100%{box-shadow:0 0 0 rgba(0,0,0,0);transform:scale(0.8);}}"], config.borderRadius, config.toggle.offset, config.toggle.offset, config.transition.toggle, makeToggleSizeStyles(config), config.toggle.offset, makeToggleOffsetStyles(config));
exports.ToggleUI = ToggleUI;
var StateUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Switchcss__StateUI",
  componentId: "sc-1f71duy-5"
})(["border-radius:100px;bottom:0;", ";--focusRingOffset:-2px;--focusRingRadius:", "px;--focusRingColor:", ";display:block;left:0;position:absolute;right:0;top:0;z-index:0;&:before{opacity:1;}"], _focusRing.focusRing, config.borderRadius, (0, _color.getColor)('pink.900'));
exports.StateUI = StateUI;
var _default = SwitchUI;
exports.default = _default;