react-life-design/lib/Checkbox/Checkbox.styled.js

Life Design UI components

"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = require("styled-components");
var Colors_1 = require("../Colors");
var Sizes_1 = require("../Sizes");
var TextHelper_1 = require("../TextHelper");
var bounceUp = styled_components_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0%,\n  20%,\n  50%,\n  80%,\n  100% { transform: scale(1); }\n  40% { transform: scale(1.3); }\n  60% { transform: scale(1.1); }\n"], ["\n  0%,\n  20%,\n  50%,\n  80%,\n  100% { transform: scale(1); }\n  40% { transform: scale(1.3); }\n  60% { transform: scale(1.1); }\n"])));
var check = styled_components_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { stroke-dashoffset: 31.26; }\n  to { stroke-dashoffset: 0; }\n"], ["\n  from { stroke-dashoffset: 31.26; }\n  to { stroke-dashoffset: 0; }\n"])));
exports.CheckBox = styled_components_1.default.input.attrs(function () { return ({
    type: 'checkbox',
}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n\n  & + label .check {\n    position: absolute;\n    stroke-width: 2px;\n    stroke: #fff;\n    fill: none;\n    top: 5px;\n    left: 0;\n    height: 16px;\n    opacity: 0;\n    stroke-dasharray: 31.26;\n    stroke-dashoffset: 0;\n  }\n\n  &:checked + label .check {\n    opacity: 1;\n    animation: ", " 0.3s linear forwards;\n  }\n\n  &:checked + label::before {\n    animation: ", " .5s forwards;\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  opacity: 0;\n  position: absolute;\n\n  & + label .check {\n    position: absolute;\n    stroke-width: 2px;\n    stroke: #fff;\n    fill: none;\n    top: 5px;\n    left: 0;\n    height: 16px;\n    opacity: 0;\n    stroke-dasharray: 31.26;\n    stroke-dashoffset: 0;\n  }\n\n  &:checked + label .check {\n    opacity: 1;\n    animation: ", " 0.3s linear forwards;\n  }\n\n  &:checked + label::before {\n    animation: ", " .5s forwards;\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ""], ["", ""])), check), styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", ""], ["", ""])), bounceUp), Colors_1.default.mongeral, Colors_1.default.mongeral);
exports.Label = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  line-height: 1.618;\n  padding-left: ", "px;\n  font-family: ", ";\n  cursor: pointer;\n\n  &:before, &:after {\n    content: '';\n    display: inline-block;\n    position: absolute;\n  }\n\n  &:before {\n    width: ", "px;\n    height: ", "px;\n    box-sizing: border-box;\n    border: 2px solid ", ";\n    left: 0;\n    top: 3px;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  line-height: 1.618;\n  padding-left: ", "px;\n  font-family: ", ";\n  cursor: pointer;\n\n  &:before, &:after {\n    content: '';\n    display: inline-block;\n    position: absolute;\n  }\n\n  &:before {\n    width: ", "px;\n    height: ", "px;\n    box-sizing: border-box;\n    border: 2px solid ", ";\n    left: 0;\n    top: 3px;\n  }\n"])), Sizes_1.default.s4, TextHelper_1.default.fontVariant('medium'), Sizes_1.default.s3, Sizes_1.default.s3, Colors_1.default.mongeral);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=Checkbox.styled.js.map