@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
127 lines (119 loc) • 8.69 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Li_1 = __importDefault(require("@smart-react-components/core/Element/Li"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Li_1.default)(({ theme, isActive, isDisabled, isOutline, isSoft, palette, separator, shape }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50;
return `
flex: 0 0 auto;
padding: 0;
> a {
border-radius: ${theme.$.radius.breadcrumb[shape]};
cursor: ${isDisabled ? theme.$.cursor.breadcrumbDisabled : theme.$.cursor.breadcrumb};
display: inline-flex;
padding: ${theme.$.length.breadcrumb.padding.y} ${theme.$.length.breadcrumb.padding.x};
text-decoration: none;
transition: 200ms 0s ease-in-out;
transition-property: background, border, color, fill;
${isSoft
? `
font-weight: ${theme.$.fontWeight.bold};
`
: ''}
${!isDisabled
? `
&:hover {
text-decoration: underline;
}
`
: `
opacity: ${theme.$.opacity.breadcrumbDisabled};
pointer-events: none;
`}
${!isOutline
? `
${!isSoft
? `
${(!isActive && !isDisabled) || isDisabled
? `
color: ${(_b = (_a = theme.$.palette[palette].breadcrumb) === null || _a === void 0 ? void 0 : _a.font) !== null && _b !== void 0 ? _b : theme.$.palette[palette].font};
fill: ${(_d = (_c = theme.$.palette[palette].breadcrumb) === null || _c === void 0 ? void 0 : _c.font) !== null && _d !== void 0 ? _d : theme.$.palette[palette].font};
`
: `
color: ${(_g = (_f = (_e = theme.$.palette[palette].breadcrumb) === null || _e === void 0 ? void 0 : _e.active) === null || _f === void 0 ? void 0 : _f.font) !== null && _g !== void 0 ? _g : theme.$.palette[palette].darkest};
fill: ${(_k = (_j = (_h = theme.$.palette[palette].breadcrumb) === null || _h === void 0 ? void 0 : _h.active) === null || _j === void 0 ? void 0 : _j.font) !== null && _k !== void 0 ? _k : theme.$.palette[palette].darkest};
`}
`
: `
${(!isActive && !isDisabled) || isDisabled
? `
color: ${(_o = (_m = (_l = theme.$.palette[palette].breadcrumb) === null || _l === void 0 ? void 0 : _l.soft) === null || _m === void 0 ? void 0 : _m.font) !== null && _o !== void 0 ? _o : theme.$.palette[palette].softFont};
fill: ${(_r = (_q = (_p = theme.$.palette[palette].breadcrumb) === null || _p === void 0 ? void 0 : _p.soft) === null || _q === void 0 ? void 0 : _q.font) !== null && _r !== void 0 ? _r : theme.$.palette[palette].softFont};
`
: `
color: ${(_v = (_u = (_t = (_s = theme.$.palette[palette].breadcrumb) === null || _s === void 0 ? void 0 : _s.soft) === null || _t === void 0 ? void 0 : _t.active) === null || _u === void 0 ? void 0 : _u.font) !== null && _v !== void 0 ? _v : theme.$.palette[palette].softDynamicest};
fill: ${(_z = (_y = (_x = (_w = theme.$.palette[palette].breadcrumb) === null || _w === void 0 ? void 0 : _w.soft) === null || _x === void 0 ? void 0 : _x.active) === null || _y === void 0 ? void 0 : _y.font) !== null && _z !== void 0 ? _z : theme.$.palette[palette].softDynamicest};
`}
`}
`
: `
${!isDisabled
? `
${!isSoft
? `
${!isActive
? `
color: ${(_2 = (_1 = (_0 = theme.$.palette[palette].breadcrumb) === null || _0 === void 0 ? void 0 : _0.outline) === null || _1 === void 0 ? void 0 : _1.font) !== null && _2 !== void 0 ? _2 : theme.$.palette[palette].main};
fill: ${(_5 = (_4 = (_3 = theme.$.palette[palette].breadcrumb) === null || _3 === void 0 ? void 0 : _3.outline) === null || _4 === void 0 ? void 0 : _4.font) !== null && _5 !== void 0 ? _5 : theme.$.palette[palette].main};
`
: `
color: ${(_9 = (_8 = (_7 = (_6 = theme.$.palette[palette].breadcrumb) === null || _6 === void 0 ? void 0 : _6.outline) === null || _7 === void 0 ? void 0 : _7.active) === null || _8 === void 0 ? void 0 : _8.font) !== null && _9 !== void 0 ? _9 : theme.$.color.dynamic.bodyFont};
fill: ${(_13 = (_12 = (_11 = (_10 = theme.$.palette[palette].breadcrumb) === null || _10 === void 0 ? void 0 : _10.outline) === null || _11 === void 0 ? void 0 : _11.active) === null || _12 === void 0 ? void 0 : _12.font) !== null && _13 !== void 0 ? _13 : theme.$.color.dynamic.bodyFont};
`}
`
: `
${!isActive
? `
color: ${(_17 = (_16 = (_15 = (_14 = theme.$.palette[palette].breadcrumb) === null || _14 === void 0 ? void 0 : _14.soft) === null || _15 === void 0 ? void 0 : _15.outline) === null || _16 === void 0 ? void 0 : _16.font) !== null && _17 !== void 0 ? _17 : theme.$.palette[palette].soft};
fill: ${(_21 = (_20 = (_19 = (_18 = theme.$.palette[palette].breadcrumb) === null || _18 === void 0 ? void 0 : _18.soft) === null || _19 === void 0 ? void 0 : _19.outline) === null || _20 === void 0 ? void 0 : _20.font) !== null && _21 !== void 0 ? _21 : theme.$.palette[palette].soft};
`
: `
color: ${(_26 = (_25 = (_24 = (_23 = (_22 = theme.$.palette[palette].breadcrumb) === null || _22 === void 0 ? void 0 : _22.soft) === null || _23 === void 0 ? void 0 : _23.outline) === null || _24 === void 0 ? void 0 : _24.active) === null || _25 === void 0 ? void 0 : _25.font) !== null && _26 !== void 0 ? _26 : theme.$.color.dynamic.bodyFont};
fill: ${(_31 = (_30 = (_29 = (_28 = (_27 = theme.$.palette[palette].breadcrumb) === null || _27 === void 0 ? void 0 : _27.soft) === null || _28 === void 0 ? void 0 : _28.outline) === null || _29 === void 0 ? void 0 : _29.active) === null || _30 === void 0 ? void 0 : _30.font) !== null && _31 !== void 0 ? _31 : theme.$.color.dynamic.bodyFont};
`}
`}
`
: `
color: ${(_35 = (_34 = (_33 = (_32 = theme.$.palett[palette].breadcrumb) === null || _32 === void 0 ? void 0 : _32.outline) === null || _33 === void 0 ? void 0 : _33.disabled) === null || _34 === void 0 ? void 0 : _34.font) !== null && _35 !== void 0 ? _35 : theme.$.color.dynamic.accent};
fill: ${(_39 = (_38 = (_37 = (_36 = theme.$.palett[palette].breadcrumb) === null || _36 === void 0 ? void 0 : _36.outline) === null || _37 === void 0 ? void 0 : _37.disabled) === null || _38 === void 0 ? void 0 : _38.font) !== null && _39 !== void 0 ? _39 : theme.$.color.dynamic.accent};
`}
`}
}
&:not(:last-child)::after {
content: "${separator !== null && separator !== void 0 ? separator : theme.$.i18n.breadcrumb.separator}";
display: inline-block;
padding: 0 1px;
${!isOutline
? `
${!isSoft
? `
color: ${(_42 = (_41 = (_40 = theme.$.palette[palette].breadcrumb) === null || _40 === void 0 ? void 0 : _40.separator) === null || _41 === void 0 ? void 0 : _41.font) !== null && _42 !== void 0 ? _42 : theme.$.palette[palette].font};
`
: `
color: ${(_46 = (_45 = (_44 = (_43 = theme.$.palette[palette].breadcrumb) === null || _43 === void 0 ? void 0 : _43.soft) === null || _44 === void 0 ? void 0 : _44.separator) === null || _45 === void 0 ? void 0 : _45.font) !== null && _46 !== void 0 ? _46 : theme.$.palette[palette].softFont};
`}
`
: `
color: ${(_50 = (_49 = (_48 = (_47 = theme.$.palette[palette].breadcrumb) === null || _47 === void 0 ? void 0 : _47.outline) === null || _48 === void 0 ? void 0 : _48.separator) === null || _49 === void 0 ? void 0 : _49.font) !== null && _50 !== void 0 ? _50 : theme.$.color.dynamic.accent};
`}
${isSoft
? `
font-weight: ${theme.$.fontWeight.bold};
`
: ''}
}
`;
});