@chayns-components/core/lib/cjs/components/checkbox/Checkbox.styles.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckboxBox = exports.StyledCheckbox = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _checkBox = require("../../utils/checkBox");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledCheckbox = exports.StyledCheckbox = _styledComponents.default.div`
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
    min-height: 20px;
`;
const StyledCheckboxInput = exports.StyledCheckboxInput = _styledComponents.default.input`
    display: none;
`;
const StyledCheckboxBox = exports.StyledCheckboxBox = _styledComponents.default.label`
    color: ${({
  theme
}) => theme.text};
    cursor: ${({
  $isDisabled
}) => $isDisabled ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    padding-left: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '48px' : '20px'};
    transition: opacity 0.2s ease;
    user-select: none;
    height: 16px;

    &:after {
        ${({
  $isChecked,
  $shouldShowAsSwitch,
  $lineHeight,
  theme
}) => $shouldShowAsSwitch ? (0, _styledComponents.css)`
                      background-color: white;
                      border-radius: 50%;
                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                      height: 16px;
                      left: 7px;
                      top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 6}px` : '50%'};
                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                      transition: transform 0.2s ease;
                      width: 16px;
                  ` : (0, _styledComponents.css)`
                      border-right: 2px solid #fff;
                      border-bottom: 2px solid #fff;
                      height: 10px;
                      left: 2px;
                      opacity: ${$isChecked ? 1 : 0};
                      top: ${$lineHeight ? `${((0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
                      transform: rotateZ(37deg) translateY(-50%);
                      transition: opacity 0.2s ease;
                      width: 5.5px;
                  `}

        content: ' ';
        position: absolute;
    }

    &:before {
        background-color: ${({
  $isChecked,
  $shouldShowAsSwitch,
  theme
}) => {
  if ($shouldShowAsSwitch) {
    return $isChecked ? theme.green : theme.red;
  }
  return $isChecked ? theme['408'] : theme['403'];
}};

        ${({
  $shouldShowAsSwitch,
  theme
}) => !$shouldShowAsSwitch && (0, _styledComponents.css)`
                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
            `}

        border-radius: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '100px' : 0};
        content: ' ';
        height: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '13px' : '15px'};
        left: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '10px' : 0};
        position: absolute;
        transition: background-color 0.2s ease;
        width: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '28px' : '15px'};
        ${({
  $lineHeight,
  theme,
  $shouldShowAsSwitch
}) => $lineHeight ? (0, _styledComponents.css)`
                      top: ${(0, _checkBox.getCheckBoxPosition)(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
                  ` : (0, _styledComponents.css)`
                      top: 50%;
                      transform: translateY(-50%);
                  `}
    }
}
`;
const StyledCheckboxLabel = exports.StyledCheckboxLabel = _styledComponents.default.label`
    color: ${({
  theme
}) => theme.text};
    cursor: ${({
  $shouldChangeOnLabelClick
}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    transition: opacity 0.2s ease;
    user-select: none;
`;
//# sourceMappingURL=Checkbox.styles.js.map