@wulperstudio/cms/node/components/InputTrueFalse/styled.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IOSSwitch = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("@mui/material/styles");
var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
var _jsxRuntime = require("react/jsx-runtime");
var IOSSwitch = exports.IOSSwitch = (0, _styles.styled)(function (props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch["default"], Object.assign({
    focusVisibleClassName: ".Mui-focusVisible",
    disableRipple: true
  }, props));
})(function (_ref) {
  var theme = _ref.theme;
  return {
    width: 42,
    height: 26,
    padding: 0,
    '& .MuiSwitch-switchBase': {
      padding: 0,
      margin: 2,
      position: 'absolute',
      transitionDuration: '300ms',
      '&.Mui-checked': {
        transform: 'translateX(16px)',
        color: '#fff',
        '& + .MuiSwitch-track': {
          backgroundColor: '#54D3AD',
          opacity: 1,
          border: 0
        },
        '&.Mui-disabled + .MuiSwitch-track': {
          opacity: 0.5
        }
      },
      '&.Mui-focusVisible .MuiSwitch-thumb': {
        color: '#33cf4d',
        border: '6px solid #fff'
      },
      '&.Mui-disabled .MuiSwitch-thumb': {
        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
      },
      '&.Mui-disabled + .MuiSwitch-track': {
        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3
      }
    },
    '& .MuiSwitch-thumb': {
      boxSizing: 'border-box',
      width: 22,
      height: 22
    },
    '& .MuiSwitch-track': {
      borderRadius: 26 / 2,
      backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
      opacity: 1,
      transition: theme.transitions.create(['background-color'], {
        duration: 500
      })
    }
  };
});