@coko/client
Version:
Client side common code for coko apps
30 lines (26 loc) • 2.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _styledComponents = require("styled-components");
var _toolkit = require("../../toolkit");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
/* stylelint-disable string-quotes */
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var underlineFade = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &::before {\n opacity: 0;\n transition: ", " ease;\n }\n\n &:hover::before {\n opacity: 1;\n }\n"])), (0, _toolkit.th)('transitionDuration'));
// const underlineGrow = css`
// &:before {
// transform: scaleX(0);
// transition: ${th('transitionDuration')} ease;
// }
// &:hover:before {
// transform: scaleX(1);
// }
// `
var underlineAnimation = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n &:hover,\n &:focus,\n &:active {\n text-decoration: none;\n }\n\n &::before {\n background-color: ", ";\n bottom: 0;\n content: '';\n height: 2px;\n left: 0;\n position: absolute;\n visibility: hidden;\n width: 100%;\n }\n\n &:hover::before {\n visibility: visible;\n }\n\n /* stylelint-disable-next-line order/properties-alphabetical-order */\n ", ";\n"])), (0, _toolkit.th)('colorPrimary'), underlineFade);
var active = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-weight: normal;\n\n &::before {\n opacity: 1;\n visibility: visible;\n }\n"])));
var _default = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), underlineAnimation, function (props) {
return props.active && active;
});
exports["default"] = _default;