react-life-design/lib/Radio/Radio.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");
exports.RadioItem = styled_components_1.default.input.attrs(function () { return ({
    type: 'radio',
}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n\n  ", "\n\n  \n"], ["\n  opacity: 0;\n  position: absolute;\n\n  ",
    "\n\n  \n"])), function (_a) {
    var isClassic = _a.isClassic;
    return isClassic ? "\n    & + .radio-item__label {\n      position: relative;\n      text-transform: none;\n\n      &:after {\n        content: '';\n        position: absolute;\n        display: inline-block;\n        width: " + (Sizes_1.default.s3 + 4) + "px;\n        height: " + (Sizes_1.default.s3 + 4) + "px;\n        background-color: " + Colors_1.default.mongeral + ";\n        margin-right: " + Sizes_1.default.s2 + "px;\n        border-radius: 50%;\n        border: 2px solid " + Colors_1.default.mongeral + ";\n        transform: scale(0.5);\n        opacity: 0;\n        transition: .25s all ease;\n      }\n    }\n\n    & + .radio-item__label {\n      &:hover:before {\n        border: 2px solid " + Colors_1.default.regalBlue + ";\n      }\n    }\n\n    &:checked {\n\n      & + .radio-item__label {\n        &:before {\n          border-color: " + Colors_1.default.mongeral + ";\n          background-color: " + Colors_1.default.mongeral + ";\n          transform: scale(0.5);\n        }\n  \n        &:after {\n          transform: scale(1);\n          opacity: 1;\n          color: " + Colors_1.default.mongeral + ";\n          background: none;\n        }\n      }\n    }\n  " : "\n    & + .radio-item__label {\n      transition: 0.4s all;\n      background-size: 205% 100%;\n      background-position: right bottom;\n      background-repeat: no-repeat;\n      background-image: linear-gradient(to left, " + Colors_1.default.white + " 50%, " + Colors_1.default.mongeral + " 0%);\n    }\n\n    &:checked {\n\n      & + .radio-item__label {\n        background-position: left bottom;\n        border-color: " + Colors_1.default.mongeral + ";\n        color: white;\n\n        &:before {\n          border-color: " + Colors_1.default.mongeral + ";\n          background-color: " + Colors_1.default.regalBlue + ";\n        }\n      }\n    }\n  ";
});
exports.LabelItem = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 30px;\n  padding: 10px 20px 10px 10px;\n  cursor: pointer;\n  font-family: ", ";\n\n  &:before {\n    content: '';\n    transition: 0.4s;\n    display: inline-block;\n    width: ", "px;\n    height: ", "px;\n    margin-right: ", "px;\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 30px;\n  padding: 10px 20px 10px 10px;\n  cursor: pointer;\n  font-family: ", ";\n\n  &:before {\n    content: '';\n    transition: 0.4s;\n    display: inline-block;\n    width: ", "px;\n    height: ", "px;\n    margin-right: ", "px;\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n"])), TextHelper_1.default.fontVariant('medium'), Sizes_1.default.s3 + 4, Sizes_1.default.s3 + 4, Sizes_1.default.s2, Colors_1.default.mongeral);
var templateObject_1, templateObject_2;
//# sourceMappingURL=Radio.styled.js.map