design-system-simplefi
Version:
Design System for SimpleFi Applications
31 lines • 2.29 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { getColor, getFontSize, getFontWeight, getLineHeight, pxToRem, } from '../../utils';
import { Button } from '../Button';
import { ButtonVariants } from '../Button/Button.enums';
var NavItem = styled(Button)
.attrs(function () { return ({
variant: ButtonVariants.text,
}); })
.withConfig({
shouldForwardProp: function (prop) { return prop !== 'isActive'; },
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n height: ", ";\n font-size: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n cursor: pointer;\n color: ", ";\n padding: 0;\n background: ", ";\n text-decoration: ", ";\n align-items: center;\n transition: background 0.1s , color 0.1s ease-in 0.1s ;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n background: ", ";\n transition: background 0.3s , color 0s ease-in 0.1s ;\n }\n"], ["\n width: 100%;\n display: flex;\n height: ", ";\n font-size: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n cursor: pointer;\n color: ", ";\n padding: 0;\n background: ", ";\n text-decoration: ", ";\n align-items: center;\n transition: background 0.1s , color 0.1s ease-in 0.1s ;\n\n &:hover {\n color: ", ";\n text-decoration: none;\n background: ", ";\n transition: background 0.3s , color 0s ease-in 0.1s ;\n }\n"])), pxToRem(75), pxToRem(22), getFontSize('lg'), function (_a) {
var isActive = _a.isActive;
return isActive ? getFontWeight('bold') : getFontWeight('regular');
}, getLineHeight('lg'), function (_a) {
var isActive = _a.isActive;
return getColor(isActive ? 'midPurple' : 'lightPurple');
}, getColor('white'), function (_a) {
var isActive = _a.isActive;
return (isActive ? 'underline' : 'none');
}, getColor('white'), getColor('midPurple'));
NavItem.propTypes = {
isActive: PropTypes.bool,
};
export default NavItem;
var templateObject_1;
//# sourceMappingURL=NavItem.js.map