infinity-forge/dist/ui/components/form/input-switch/styles.js

codie Library

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputSwitchCheckbox = exports.InputSwitch = void 0;
var styled_components_1 = __importDefault(require("styled-components"));
exports.InputSwitch = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n\n  .container-switch {\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .custom-checkbox {\n    display: none;\n  }\n\n  .custom-checkbox-label {\n    position: relative;\n    margin: 0;\n    cursor: pointer;\n    text-indent: -9999px;\n    width: 40px;\n    height: 20px;\n    background: grey;\n    display: block;\n    border-radius: 100px;\n    position: relative;\n\n    &:after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 5px;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border-radius: 12px;\n      transition: 0.3s;\n    }\n\n    &.checked {\n      border: none;\n    }\n\n    svg {\n      stroke: #fff;\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  input:checked + .custom-checkbox-label {\n    background: #bada55;\n  }\n\n  input:checked + .custom-checkbox-label:after {\n    left: calc(100% - 15px);\n  }\n"], ["\n  width: fit-content;\n\n  .container-switch {\n    display: flex;\n    flex-direction: row-reverse;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .custom-checkbox {\n    display: none;\n  }\n\n  .custom-checkbox-label {\n    position: relative;\n    margin: 0;\n    cursor: pointer;\n    text-indent: -9999px;\n    width: 40px;\n    height: 20px;\n    background: grey;\n    display: block;\n    border-radius: 100px;\n    position: relative;\n\n    &:after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 5px;\n      width: 12px;\n      height: 12px;\n      background: #fff;\n      border-radius: 12px;\n      transition: 0.3s;\n    }\n\n    &.checked {\n      border: none;\n    }\n\n    svg {\n      stroke: #fff;\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  input:checked + .custom-checkbox-label {\n    background: #bada55;\n  }\n\n  input:checked + .custom-checkbox-label:after {\n    left: calc(100% - 15px);\n  }\n"])));
exports.InputSwitchCheckbox = (0, styled_components_1.default)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: fit-content;\n\n  &:has(input[readonly]) {\n    pointer-events: none;\n  }\n\n  .container-switch {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-direction: row-reverse;\n  }\n\n  .custom-checkbox {\n    display: none;\n  }\n\n  .checkbox-mark svg {\n    width: 14px;\n    height: 14px;\n  }\n\n  &:not(.icon-alternative) {\n    .custom-checkbox-label {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 18px;\n      height: 18px;\n      border: 2px solid #444;\n      border-radius: 4px;\n      background: #fff;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      margin-bottom: 0;\n    }\n\n    .custom-checkbox-label .checkbox-mark {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    input:checked + .custom-checkbox-label {\n      background: #444;\n      border-color: #444;\n    }\n\n    input:checked + .custom-checkbox-label .checkbox-mark {\n      color: white;\n    }\n\n    .checkbox-mark svg {\n      stroke: white;\n      display: none;\n    }\n\n    input:checked + .custom-checkbox-label .checkbox-mark svg {\n      display: block;\n    }\n  }\n"], ["\n  width: fit-content;\n\n  &:has(input[readonly]) {\n    pointer-events: none;\n  }\n\n  .container-switch {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-direction: row-reverse;\n  }\n\n  .custom-checkbox {\n    display: none;\n  }\n\n  .checkbox-mark svg {\n    width: 14px;\n    height: 14px;\n  }\n\n  &:not(.icon-alternative) {\n    .custom-checkbox-label {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 18px;\n      height: 18px;\n      border: 2px solid #444;\n      border-radius: 4px;\n      background: #fff;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      margin-bottom: 0;\n    }\n\n    .custom-checkbox-label .checkbox-mark {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n    }\n\n    input:checked + .custom-checkbox-label {\n      background: #444;\n      border-color: #444;\n    }\n\n    input:checked + .custom-checkbox-label .checkbox-mark {\n      color: white;\n    }\n\n    .checkbox-mark svg {\n      stroke: white;\n      display: none;\n    }\n\n    input:checked + .custom-checkbox-label .checkbox-mark svg {\n      display: block;\n    }\n  }\n"])));
var templateObject_1, templateObject_2;
//# sourceMappingURL=styles.js.map