react-life-design/lib/Textarea/Textarea.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 index_1 = require("../index");
var bounceUp = styled_components_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: scale3d(1, 1, 1); }\n  50% { transform: scale3d(1.1618, 1.1618, 1.1618); }\n  to { transform: scale3d(1, 1, 1); }\n"], ["\n  from { transform: scale3d(1, 1, 1); }\n  50% { transform: scale3d(1.1618, 1.1618, 1.1618); }\n  to { transform: scale3d(1, 1, 1); }\n"])));
var shake = styled_components_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from, to { transform: translate3d(0, 0, 0); }\n  10%, 30%, 50%, 70%, 90% { transform: translate3d(-3px, 0, 0); }\n  20%, 40%, 60%, 80% { transform: translate3d(3px, 0, 0); }\n"], ["\n  from, to { transform: translate3d(0, 0, 0); }\n  10%, 30%, 50%, 70%, 90% { transform: translate3d(-3px, 0, 0); }\n  20%, 40%, 60%, 80% { transform: translate3d(3px, 0, 0); }\n"])));
var bounceUpRule = styled_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", " .4s forwards;"], ["", " .4s forwards;"])), bounceUp);
var shakeRule = function (props) { return styled_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", " 1s forwards;"], ["", " 1s forwards;"])), props.isInvalid && shake); };
var GroupInput = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  @media screen and (max-width: 600px) {\n    width: 100%;\n  }\n\n"], ["\n  position: relative;\n  @media screen and (max-width: 600px) {\n    width: 100%;\n  }\n\n"])));
var opacityAndTransition = function (opacity, transition) { return "\n  opacity: " + opacity + ";\n  transition: " + transition + ";\n"; };
var Textarea = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  font-weight: 500;\n  color: ", ";\n  width: 100%;\n  max-height: 176px;\n  min-height: 176px;\n  box-sizing: border-box;\n  letter-spacing: 1px;\n  padding: 4px 10px;\n  border: 1px solid ", ";\n  border-bottom: 1px solid currentColor;\n  background-color: transparent;\n  font-family: ", ";\n  line-height: 22px;\n  overflow: auto;\n  resize: vertical;\n\n  &:disabled {\n    opacity: 0.5;\n    border-bottom-color: ", ";\n  }\n\n  &:not(:placeholder-shown) ~ label {\n    top: -16px;\n    color: ", ";\n    z-index: 1; \n    ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n    ", ";\n    font-family: ", ";\n  }\n\n  &:focus::placeholder {\n    ", ";\n  }\n\n  &:focus {\n    outline: none;\n\n    & ~ .bar {\n      width: 100%;\n      transition: 0.4s;\n    }\n\n    & ~ label {\n      top: -16px;\n      color: ", ";\n      opacity: 1;\n      z-index: 1;\n      animation: ", ";\n    }\n  }\n\n  & ~ .bar {\n    position: relative;\n    display: inherit;\n    top: -5px;\n    width: 0;\n    height: 2px;\n    background-color: ", ";\n    transition: 0.4s;\n  }\n\n  ~ label {\n    position: absolute;\n    font-size: ", "em;\n    font-family: ", ";\n    font-weight: 500;\n    left: 0;\n    top: -16px;\n    z-index: -1;\n    letter-spacing: 0.5px;\n    ", ";\n    animation: ", ";\n    text-transform: uppercase;\n  }\n\n  ~ .feedback {\n    position: absolute;\n    font-size: ", "em;\n    font-family: ", ";\n    overflow: hidden;\n    font-style: italic;\n\n    ", "\n  }\n\n  ", "\n"], ["\n  position: relative;\n  font-weight: 500;\n  color: ", ";\n  width: 100%;\n  max-height: 176px;\n  min-height: 176px;\n  box-sizing: border-box;\n  letter-spacing: 1px;\n  padding: 4px 10px;\n  border: 1px solid ", ";\n  border-bottom: 1px solid currentColor;\n  background-color: transparent;\n  font-family: ", ";\n  line-height: 22px;\n  overflow: auto;\n  resize: vertical;\n\n  &:disabled {\n    opacity: 0.5;\n    border-bottom-color: ", ";\n  }\n\n  &:not(:placeholder-shown) ~ label {\n    top: -16px;\n    color: ", ";\n    z-index: 1; \n    ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n    ", ";\n    font-family: ", ";\n  }\n\n  &:focus::placeholder {\n    ", ";\n  }\n\n  &:focus {\n    outline: none;\n\n    & ~ .bar {\n      width: 100%;\n      transition: 0.4s;\n    }\n\n    & ~ label {\n      top: -16px;\n      color: ", ";\n      opacity: 1;\n      z-index: 1;\n      animation: ", ";\n    }\n  }\n\n  & ~ .bar {\n    position: relative;\n    display: inherit;\n    top: -5px;\n    width: 0;\n    height: 2px;\n    background-color: ", ";\n    transition: 0.4s;\n  }\n\n  ~ label {\n    position: absolute;\n    font-size: ", "em;\n    font-family: ", ";\n    font-weight: 500;\n    left: 0;\n    top: -16px;\n    z-index: -1;\n    letter-spacing: 0.5px;\n    ", ";\n    animation: ", ";\n    text-transform: uppercase;\n  }\n\n  ~ .feedback {\n    position: absolute;\n    font-size: ", "em;\n    font-family: ", ";\n    overflow: hidden;\n    font-style: italic;\n\n    ",
    "\n  }\n\n  ",
    "\n"])), index_1.Colors.codGray, index_1.Colors.line, index_1.TextHelper.fontVariant('medium'), index_1.Colors.line, index_1.Colors.support, opacityAndTransition(1, '0.3s'), index_1.Colors.support, opacityAndTransition(1, '0.2s'), index_1.TextHelper.fontVariant('medium'), opacityAndTransition(0, '0.2s'), index_1.Colors.mongeral, bounceUpRule, index_1.Colors.mongeral, index_1.TextHelper.pxToEm(index_1.Sizes.s2), index_1.TextHelper.fontVariant('medium'), opacityAndTransition(0, 'all .2s ease'), shakeRule, index_1.TextHelper.pxToEm(index_1.Sizes.s2), index_1.TextHelper.fontVariant('medium'), function (_a) {
    var comment = _a.comment;
    return comment && "\n      font-style: italic;\n    ";
}, function (_a) {
    var isInvalid = _a.isInvalid, isWarning = _a.isWarning;
    return (isInvalid || isWarning) && "\n    border-color: " + (isInvalid ? index_1.Colors.chestnut : index_1.Colors.goldDrop) + ";\n    ~ .feedback,\n    ~ label,\n    &:focus ~ label, &:not(:placeholder-shown) ~ label {\n      color: " + (isInvalid ? index_1.Colors.chestnut : index_1.Colors.goldDrop) + "\n    }\n\n    ~ label { opacity: 1; }\n  ";
});
exports.default = {
    Textarea: Textarea,
    GroupInput: GroupInput,
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=Textarea.styled.js.map