react-life-design/lib/ColorPicker/ColorPicker.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 Sizes_1 = require("../Sizes");
var Colors_1 = require("../Colors");
var TextHelper_1 = require("../TextHelper");
var styles_1 = require("../utils/styles");
exports.ColorPicker = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: white;\n  border: 1px solid ", ";\n  position: relative;\n  width: 100%;\n  margin-bottom: ", "px;\n  ", "\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 128px;\n    left: 50%;\n    margin-left: -6px;\n    border-left: 10px solid transparent;\n    border-right: 10px solid transparent;\n    border-bottom: 12px solid white;\n  }\n"], ["\n  background-color: white;\n  border: 1px solid ", ";\n  position: relative;\n  width: 100%;\n  margin-bottom: ", "px;\n  ", "\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 128px;\n    left: 50%;\n    margin-left: -6px;\n    border-left: 10px solid transparent;\n    border-right: 10px solid transparent;\n    border-bottom: 12px solid white;\n  }\n"])), Colors_1.default.line, Sizes_1.default.s4, styles_1.styledByMediaQuery("width: 308px;"));
exports.BoxColor = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 140px;\n  background-color: ", ";\n  transition: 0.6s;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ", "px;\n"], ["\n  height: 140px;\n  background-color: ", ";\n  transition: 0.6s;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: ", "px;\n"])), function (_a) {
    var color = _a.color;
    return color;
}, Sizes_1.default.s4);
exports.GridColors = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "px ", "px;\n  display: grid;\n  grid-template-columns: repeat(5, 31px);\n  grid-row-gap: ", "px;\n  justify-content: space-between;\n"], ["\n  padding: ", "px ", "px;\n  display: grid;\n  grid-template-columns: repeat(5, 31px);\n  grid-row-gap: ", "px;\n  justify-content: space-between;\n"])), Sizes_1.default.s3, Sizes_1.default.s5, Sizes_1.default.s3);
exports.ColumnColor = styled_components_1.default.button.attrs({
    type: 'button',
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 31px;\n  height: 31px;\n  background-color: ", ";\n  border: 0 none;\n  cursor: pointer;\n"], ["\n  width: 31px;\n  height: 31px;\n  background-color: ", ";\n  border: 0 none;\n  cursor: pointer;\n"])), function (_a) {
    var color = _a.color;
    return color;
});
exports.InputColor = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 130px;\n  margin: 0 auto ", "px;\n  padding: ", "px;\n\n  .input {\n    width: 100%;\n    color: ", ";\n    border: 0 none;\n    border-bottom: 1px solid;\n    background-color: inherit;\n    outline: 0 none;\n    font-family: ", ";\n  }\n"], ["\n  background-color: ", ";\n  width: 130px;\n  margin: 0 auto ", "px;\n  padding: ", "px;\n\n  .input {\n    width: 100%;\n    color: ", ";\n    border: 0 none;\n    border-bottom: 1px solid;\n    background-color: inherit;\n    outline: 0 none;\n    font-family: ", ";\n  }\n"])), Colors_1.default.heaven, Sizes_1.default.s3, Sizes_1.default.s2, Colors_1.default.codGray, TextHelper_1.default.fontVariant('medium'));
exports.Check = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  &:after {\n    content: '';\n    display: block;\n    width: 12px;\n    height: 24px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n"], ["\n  display: inline-block;\n  &:after {\n    content: '';\n    display: block;\n    width: 12px;\n    height: 24px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=ColorPicker.styled.js.map