@braineet/ui/dist/cjs/components/switch/styles.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.SwitchInput = exports.SwitchCircle = exports.StyledText = exports.StyledLabel = exports.DefaultToggleInput = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _utils = require("../../utils");
var _box = _interopRequireDefault(require("../box"));
var _text = _interopRequireDefault(require("../text"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* stylelint-disable no-descending-specificity */

var StyledLabel = (0, _styledComponents.default)(_box.default).withConfig({
  displayName: "styles__StyledLabel",
  componentId: "sc-1g1klcf-0"
})(["position:relative;display:inline-flex;align-items:center;flex-grow:0;padding:8px;box-sizing:border-box;cursor:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (p) {
  return !p.readOnly ? 'pointer' : 'default';
}, (0, _utils.borderRadius)(4), function (props) {
  return props.disabled && DisabledLabel;
}, function (p) {
  return !p.readOnly && !p.checked && (0, _styledComponents.css)(["&:hover{background-color:", ";}"], function (props) {
    return props.theme.utils.lighten('black', 0.1);
  });
}, (0, _utils.borderRadius)(4), function (p) {
  return p.style;
}, function (props) {
  return props.checked && CheckedToggle;
}, function (props) {
  return props.disabled && DisabledToggle;
}, function (props) {
  return props.error && ErrorToggle;
}, function (p) {
  return p.stylesProps;
});
exports.StyledLabel = StyledLabel;
var DefaultToggleInput = _styledComponents.default.input.withConfig({
  displayName: "styles__DefaultToggleInput",
  componentId: "sc-1g1klcf-1"
})(["position:relative;display:flex;align-items:center;justify-content:center;appearance:none;flex-shrink:0;cursor:pointer;"]);
exports.DefaultToggleInput = DefaultToggleInput;
var StyledText = (0, _styledComponents.default)(_text.default).withConfig({
  displayName: "styles__StyledText",
  componentId: "sc-1g1klcf-2"
})(["display:block;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-wrap:break-word;", ""], function (props) {
  return props.error && ErrorText;
});

/**
 * Styles Label
 */
exports.StyledText = StyledText;
var DisabledLabel = (0, _styledComponents.css)(["cursor:not-allowed;"]);

/**
 * Styles Toggle
 */
var CheckedToggle = (0, _styledComponents.css)(["background-color:", ";"], function (props) {
  return props.theme.colors.brand10;
});
var DisabledToggle = (0, _styledComponents.css)(["opacity:", ";&:hover{background-color:transparent;}"], function (props) {
  return props.opacity || '0.24';
});
var ErrorToggle = (0, _styledComponents.css)(["background-color:", ";"], function (props) {
  return props.theme.colors.error10;
});
var ErrorText = (0, _styledComponents.css)(["color:", ";"], function (props) {
  return props.theme.colors.error50;
});
var SwitchInput = (0, _styledComponents.default)(DefaultToggleInput).withConfig({
  displayName: "styles__SwitchInput",
  componentId: "sc-1g1klcf-3"
})(["width:", ";min-width:", ";height:", ";transition:background-color 0.4s;background-color:", ";", " &:checked{background-color:", ";}&:focus:not(:disabled){border:none;outline-offset:2px;outline:2px solid ", ";}&:focus:not(:focus-visible){border:none;outline:none;}&:disabled{background-color:", ";cursor:not-allowed;}"], (0, _utils.fluid)(26), (0, _utils.fluid)(26), (0, _utils.fluid)(16), function (props) {
  return props.theme.colors.black;
}, (0, _utils.borderRadius)(37), function (props) {
  return props.theme.colors.brand;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.blackOpacity10;
});
exports.SwitchInput = SwitchInput;
var SwitchCircle = _styledComponents.default.span.withConfig({
  displayName: "styles__SwitchCircle",
  componentId: "sc-1g1klcf-4"
})(["position:absolute;top:calc(50% - 6px);line-height:1;height:", ";width:", ";transition:all 0.2s cubic-bezier(0.4,0,0.2,1);transform:translate(2px);background-color:", ";svg,path{fill:", ";color:", ";display:block;opacity:0;}", " ", ":checked ~ &{svg,path{opacity:1;}transform:translate(12px);}", ":disabled ~ &{svg,path{fill:", ";color:", ";display:block;}}"], (0, _utils.fluid)(12), (0, _utils.fluid)(12), function (props) {
  return props.theme.colors.background.white;
}, function (props) {
  return props.theme.colors.brand;
}, function (props) {
  return props.theme.colors.brand;
}, (0, _utils.borderRadius)(50, true), SwitchInput, SwitchInput, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.colors.black;
});
exports.SwitchCircle = SwitchCircle;