@skbkontur/ui-kit
Version:
34 lines • 6.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var styled_components_1 = tslib_1.__importDefault(require("../../lib/styled-components"));
var focus_visible_selector_1 = require("../internal/focus-visible-selector");
var IconOk_1 = tslib_1.__importDefault(require("./IconOk"));
var boxTheme = function (_a) {
var theme = _a.theme;
return theme.checkbox.box;
};
var boxProp = function (prop) { return function (props) {
return boxTheme(props)[prop];
}; };
var stateProp = function (prop, state, type) {
if (state === void 0) { state = 'default'; }
if (type === void 0) { type = 'unchecked'; }
return function (_a) {
var theme = _a.theme;
return theme.checkbox[type][state][prop] || '';
};
};
var getIconMargin = function (props) {
var ICON_SIZE = 20;
var boxSize = parseInt(boxProp('size')(props), 10);
var baseNumber = (ICON_SIZE - boxSize) / 2;
return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n margin-top: ", "px;\n margin-left: ", "px;\n "], ["\n margin-top: ", "px;\n margin-left: ", "px;\n "])), -baseNumber - 2, -baseNumber);
};
exports.CheckboxLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n display: inline-flex;\n align-items: baseline;\n"], ["\n display: inline-flex;\n align-items: baseline;\n"])));
exports.CheckboxBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n width: ", ";\n height: ", ";\n line-height: ", ";\n\n color: ", ";\n background: ", ";\n box-shadow: ", ";\n border: ", ";\n border-radius: ", ";\n"], ["\n width: ", ";\n height: ", ";\n line-height: ", ";\n\n color: ", ";\n background: ", ";\n box-shadow: ", ";\n border: ", ";\n border-radius: ", ";\n"])), boxProp('size'), boxProp('size'), boxProp('size'), stateProp('color'), stateProp('background'), stateProp('box-shadow'), stateProp('border'), boxProp('borderRadius'));
exports.CheckboxCaption = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n margin-left: 10px;\n"], ["\n margin-left: 10px;\n"])));
exports.CheckboxIcon = styled_components_1.default(IconOk_1.default)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n opacity: 0;\n flex-shrink: 0;\n vertical-align: middle;\n\n ", ";\n\n fill: ", ";\n\n transform: scale(0.8);\n transition-property: transform;\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n"], ["\n opacity: 0;\n flex-shrink: 0;\n vertical-align: middle;\n\n ", ";\n\n fill: ", ";\n\n transform: scale(0.8);\n transition-property: transform;\n transition-duration: 0.15s;\n transition-timing-function: ease-out;\n"])), getIconMargin, stateProp('color'));
exports.CheckboxInput = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n display: none;\n\n &:hover + ", " {\n color: ", ";\n background: ", ";\n box-shadow: ", ";\n border: ", ";\n }\n\n &:active + ", " {\n color: ", ";\n background: ", ";\n box-shadow: ", ";\n border: ", ";\n }\n\n ", " {\n & + ", " {\n box-shadow: ", ";\n }\n }\n\n ", " {\n background: ", ";\n box-shadow: ", ";\n }\n\n &:checked + ", " {\n background: ", ";\n box-shadow: ", ";\n }\n\n &:checked + ", " > ", " {\n opacity: 1;\n transform: scale(1);\n fill: ", ";\n }\n\n &:disabled + ", " {\n background: ", ";\n box-shadow: ", ";\n pointer-events: none;\n\n & > ", " {\n fill: ", ";\n }\n\n & + ", " {\n color: ", ";\n }\n }\n\n &:checked:disabled ", " > ", " {\n background: ", ";\n box-shadow: ", ";\n\n & > ", " {\n fill: ", ";\n }\n }\n"], ["\n display: none;\n\n &:hover + ", " {\n color: ", ";\n background: ", ";\n box-shadow: ", ";\n border: ", ";\n }\n\n &:active + ", " {\n color: ", ";\n background: ", ";\n box-shadow: ", ";\n border: ", ";\n }\n\n ", " {\n & + ", " {\n box-shadow: ", ";\n }\n }\n\n ", " {\n background: ", ";\n box-shadow: ", ";\n }\n\n &:checked + ", " {\n background: ", ";\n box-shadow: ", ";\n }\n\n &:checked + ", " > ", " {\n opacity: 1;\n transform: scale(1);\n fill: ", ";\n }\n\n &:disabled + ", " {\n background: ", ";\n box-shadow: ", ";\n pointer-events: none;\n\n & > ", " {\n fill: ", ";\n }\n\n & + ", " {\n color: ", ";\n }\n }\n\n &:checked:disabled ", " > ", " {\n background: ", ";\n box-shadow: ", ";\n\n & > ", " {\n fill: ", ";\n }\n }\n"])), exports.CheckboxBox, stateProp('color', 'hover'), stateProp('background', 'hover'), stateProp('box-shadow', 'hover'), stateProp('border', 'hover'), exports.CheckboxBox, stateProp('color', 'active'), stateProp('background', 'active'), stateProp('box-shadow', 'active'), stateProp('border', 'active'), focus_visible_selector_1.FocusVisible, exports.CheckboxBox, stateProp('box-shadow', 'focus'), exports.CheckboxBox, stateProp('background'), stateProp('box-shadow'), exports.CheckboxBox, stateProp('background', 'default', 'checked'), stateProp('box-shadow', 'default', 'checked'), exports.CheckboxBox, exports.CheckboxIcon, stateProp('color', 'default', 'checked'), exports.CheckboxBox, stateProp('background', 'disabled'), stateProp('box-shadow', 'disabled'), exports.CheckboxIcon, function (props) { return stateProp('color', 'disabled'); }, exports.CheckboxCaption, function (props) { return stateProp('color', 'disabled'); }, exports.CheckboxBox, exports.CheckboxIcon, stateProp('background', 'disabled', 'checked'), stateProp('box-shadow', 'disabled', 'checked'), exports.CheckboxIcon, function (props) { return stateProp('color', 'disabled', 'checked'); });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=CheckboxView.js.map