react-life-design
Version:
Life Design UI components
40 lines • 4.29 kB
JavaScript
"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 Hiperlink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: \"sentico-sans-medium\";\n\t-webkit-font-smoothing: antialiased;\n\ttransition: all 0.15s ease-in-out;\n display: inline-block;\n cursor: pointer;\n text-decoration: none;\n will-change: transform;\n\n & svg {\n position: relative;\n top: 3px;\n height: 16px;\n fill:none;\n stroke: ", ";\n stroke-miterlimit: 10;\n stroke-width: 2px;\n margin-left: 6px;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"], ["\n font-family: \"sentico-sans-medium\";\n\t-webkit-font-smoothing: antialiased;\n\ttransition: all 0.15s ease-in-out;\n display: inline-block;\n cursor: pointer;\n text-decoration: none;\n will-change: transform;\n\n & svg {\n position: relative;\n top: 3px;\n height: 16px;\n fill:none;\n stroke: ", ";\n stroke-miterlimit: 10;\n stroke-width: 2px;\n margin-left: 6px;\n }\n\n ",
"\n\n ",
"\n\n ",
"\n\n ",
"\n\n ",
"\n\n ",
"\n\n ",
"\n"])), index_1.Colors.mongeral, function (_a) {
var isType = _a.isType;
return (isType === 'forward' || isType === 'backward') && "\n &:hover {\n .switch-arrow-elements {\n transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;\n }\n\n .switch-arrow-elements.one {\n stroke: " + index_1.Colors.line + ";\n transform: translateX(-1px);\n }\n\n .switch-arrow-elements.two {\n stroke: " + index_1.Colors.regalBlue + ";\n transform: translateX(5px);\n }\n }\n ";
}, function (_a) {
var isType = _a.isType;
return isType === 'arrow-plus' && "\n .link-arrow-elements {\n fill: none;\n transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;\n }\n\n &:hover .link-arrow-elements {\n stroke: " + index_1.Colors.regalBlue + ";\n transform: translateX(5px);\n }\n ";
}, function (_a) {
var isType = _a.isType;
return isType === 'download' && "\n .link-arrow-elements {\n fill: none;\n transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;\n }\n\n &:hover .link-arrow-elements {\n stroke: " + index_1.Colors.regalBlue + ";\n transform: translateX(3px);\n }\n ";
}, function (_a) {
var isType = _a.isType;
return isType === 'plus' && "\n .plus { transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out; }\n &:hover .plus { stroke: " + index_1.Colors.regalBlue + "; }\n &:hover .plus.up { transform: translate(0, -4px); }\n &:hover .plus.right { transform: translate(4px, 0); }\n &:hover .plus.down { transform: translate(0, 4px); }\n &:hover .plus.left { transform: translate(-4px, 0); }\n ";
}, function (_a) {
var className = _a.className;
return className !== 'navItem' && "\n color: " + index_1.Colors.mongeral + ";\n text-transform: uppercase;\n &:hover { color: " + index_1.Colors.regalBlue + "; }\n ";
}, function (_a) {
var className = _a.className;
return className === 'navItem' && "\n color: " + index_1.Colors.support + ";\n display: block;\n margin-bottom: " + index_1.Sizes.s4 + "px;\n text-transform: capitalize;\n font-family: inherit;\n\n &:hover {\n color: " + index_1.Colors.line + ";\n }\n ";
}, function (_a) {
var isActiveRoute = _a.isActiveRoute;
return isActiveRoute && "\n position: relative;\n font-family: 'sentico-sans-medium';\n &:before {\n content: '';\n position: absolute;\n height: 25px;\n width: 3px;\n left: -" + index_1.Sizes.s5 + "px;\n top: -4px;\n background-color: " + index_1.Colors.mongeral + ";\n }\n ";
});
exports.default = Hiperlink;
var templateObject_1;
//# sourceMappingURL=Link.styled.js.map