@buffetjs/styles/dist/components/Toggle/index.js

Buffetjs Styles - The styling solution of Buffetjs

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _colors = _interopRequireDefault(require("../../assets/styles/colors"));

var _sizes = _interopRequireDefault(require("../../assets/styles/sizes"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: ", ";\n  margin: 0;\n  opacity: 0;\n  & + span {\n    border-top-left-radius: 2px;\n    border-bottom-left-radius: 2px;\n    background-color: ", ";\n    color: ", ";\n    font-weight: ", ";\n    & + span {\n      color: ", ";\n      background: white;\n      font-weight: ", ";\n    }\n  }\n  &:not(:checked) + span {\n    font-weight: ", ";\n  }\n  &:checked + span {\n    color: ", ";\n    background: white;\n    & + span {\n      border-top-right-radius: 2px;\n      border-bottom-right-radius: 2px;\n      background-color: ", ";\n      color: ", ";\n      font-weight: ", ";\n    }\n  }\n  &:disabled {\n    &:not(:checked) + span {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.1);\n    }\n\n    &:checked + span {\n      & + span {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);\n      }\n    }\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Toggle = _styledComponents["default"].input(_templateObject(), function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? 'not-allowed' : 'pointer';
}, _colors["default"].darkOrange, _colors["default"].white, _sizes["default"].fontWeight.bold, _colors["default"].greyToggle, _sizes["default"].fontWeight.bold, _sizes["default"].fontWeight.black, _colors["default"].greyToggle, _colors["default"].blue, _colors["default"].white, _sizes["default"].fontWeight.black, _colors["default"].greyIconBkgd, _colors["default"].brightGrey, _colors["default"].greyIconBkgd, _colors["default"].brightGrey);

Toggle.defaultProps = {
  disabled: false,
  type: 'checkbox'
};
Toggle.propTypes = {
  disabled: _propTypes["default"].bool,
  type: _propTypes["default"].string
};
var _default = Toggle;
exports["default"] = _default;