phx-react/dist/cjs/components/Checkbox/styles/StyleCheckbox.js

PHX REACT

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const StyledCheckboxLayout = ({ activeData, id }) => (react_1.default.createElement("style", null, `
        .checkbox {
            display: inline-block;
            position: relative;
            font-weight: bold;
            cursor: pointer;
        }
        
        .checkbox:active .text {
            transform: scale(0.9);
        }
        
        .checkbox .icon {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        
        .checkbox .icon::before,
        .checkbox .icon::after {
            content: '';
            display: block;
            position: absolute;
        }
        
        .checkbox .icon::before {
            height: 100%;
            width: 100%;
            border-radius: 0px;
            background: transparent;
            transition: background 80ms cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        
        .checkbox .icon::after {
            border: 2px solid transparent;
            width: 0px;
            height: 0px;
            bottom: 7px;
            left: 1px;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 3px;
            transform-origin: bottom left;
            transform: rotate(45deg);
        }
        
        .checkbox.large .icon::before {
            height: 22px;
            width: 22px;
            border-radius: 5px;
        }
        
        .checkbox.large .icon::after {
            bottom: 11px;
            left: 2px;
        }
        
        .checkbox.disabled .icon::before {
            background: #E5E7EB;
        }
        
        .checkbox.disabled {
            cursor: not-allowed;
        }
        
        #${id}:checked + .checkbox .icon::after {
            width: 6px;
            height: 10px;
            border-right-color: white;
            border-bottom-color: white;
            transition: width 80ms ease-in, height 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;
        }
        
        #${id}:checked + .checkbox.large .icon::after {
            width: 9px;
            height: 15px;
            border-right-color: white;
            border-bottom-color: white;
        }
        
        #${id}:checked + .checkbox .icon::before {
            background: ${(activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a'};
            border-radius: 2.5px;
        }
        
        #${id}:checked + .checkbox.disabled .icon::before {
            background: #E5E7EB;
        }
        
        #${id}:checked + .checkbox.disabled .icon::after {
            border-right-color: #9CA3AF;
            border-bottom-color: #9CA3AF;
        }
        
        #${id}:checked + .checkbox.disabled.large .icon::after {
            width: 9px;
            height: 15px;
            border-right-color: #9CA3AF;
            border-bottom-color: #9CA3AF;
        }
        
        #${id}:indeterminate + .checkbox .icon::before {
            background: ${(activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a'};
            border-radius: 2.5px;
        }

        #${id}:indeterminate + .checkbox .icon::after {
            width: 8px;
            height: 2px;
            border-right: none;
            border-bottom: none;
            background-color: white;
            transform-origin: none;
            transform: rotate(0deg);
            left: 3px;
            bottom: 6px;
            border-radius: 0px;
            transition: cubic-bezier(0.165, 0.84, 0.44, 1) 80ms 80ms;
        }
    `));
exports.default = StyledCheckboxLayout;
//# sourceMappingURL=StyleCheckbox.js.map