phx-react
Version:
PHX REACT
10 lines • 2.49 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var StyledCheckboxLayout = function (_a) {
var activeData = _a.activeData, id = _a.id;
return (react_1["default"].createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: 100%;\n width: 100%;\n /* border-radius: 100%; */\n background: transparent;\n transition: background 80ms cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n \n .checkbox .icon::after {\n border: 2px solid transparent;\n transition: height 80ms ease-in, width 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms 80ms;\n width: 0px;\n height: 0px;\n bottom: 7px;\n left: 1px;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 3px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n }\n \n #".concat(id, ":checked + .checkbox .icon::after {\n width: 6px;\n height: 10px;\n border-right-color: white;\n border-bottom-color: white;\n transition: width 80ms ease-in, height 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;\n }\n \n #").concat(id, ":checked + .checkbox .icon::before {\n background: ").concat((activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a', "\n ")));
};
exports["default"] = StyledCheckboxLayout;
//# sourceMappingURL=StyleCheckbox.js.map