oolib 2.14.2 → 2.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionMenu/index.d.ts +1 -1
- package/dist/components/ActionMenu/index.js +3 -3
- package/dist/components/ActionMenu/styled.js +3 -9
- package/dist/components/Loader/index.js +3 -1
- package/dist/components/OKELink/comps/AvatarDisplay/styled.js +1 -1
- package/dist/components/OKELink/styled.js +33 -19
- package/dist/components/Tags/index.js +2 -3
- package/dist/components/Tags/index.styled.d.ts +2 -0
- package/dist/components/Tags/index.styled.js +20 -17
- package/dist/themes/mixins/index.d.ts +2 -0
- package/dist/themes/mixins/index.js +17 -1
- package/package.json +1 -1
|
@@ -41,9 +41,9 @@ var Typo_1 = require("../Typo");
|
|
|
41
41
|
var utils_1 = require("./utils");
|
|
42
42
|
var styled_1 = require("./styled");
|
|
43
43
|
var ActionMenu = function (_a) {
|
|
44
|
-
var
|
|
44
|
+
var _b = _a.icon, icon = _b === void 0 ? 'DotsThree' : _b, invert = _a.invert, actions = _a.actions, _c = _a.align, align = _c === void 0 ? 'left' : _c, buttonText = _a.buttonText, sideEffect = _a.sideEffect;
|
|
45
45
|
var actionMenuRef = (0, react_1.useRef)(null);
|
|
46
|
-
var
|
|
46
|
+
var _d = (0, react_1.useState)(false), showActions = _d[0], setShowActions = _d[1];
|
|
47
47
|
(0, utils_1.useTrackFocus)(actionMenuRef, setShowActions);
|
|
48
48
|
(0, react_1.useEffect)(function () {
|
|
49
49
|
// if you want this click to trigger a sideeffect in parent.
|
|
@@ -53,7 +53,7 @@ var ActionMenu = function (_a) {
|
|
|
53
53
|
if (!actions || actions.length === 0)
|
|
54
54
|
return null;
|
|
55
55
|
return (react_1.default.createElement(styled_1.StyledActionMenu, { ref: actionMenuRef },
|
|
56
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon
|
|
56
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, children: buttonText, invert: invert, onClick: function (e) {
|
|
57
57
|
e.stopPropagation();
|
|
58
58
|
setShowActions(!showActions);
|
|
59
59
|
} }),
|
|
@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
34
34
|
var Buttons_1 = require("../Buttons");
|
|
35
|
-
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10,
|
|
35
|
+
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor100 = themes_1.colors.greyColor100;
|
|
36
36
|
exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: max-content;\n"], ["\n position: relative;\n width: max-content;\n"])));
|
|
37
37
|
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"], ["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"])), function (_a) {
|
|
38
38
|
var unfold = _a.unfold;
|
|
@@ -43,18 +43,12 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6
|
|
|
43
43
|
var unfold = _a.unfold;
|
|
44
44
|
return "scaleY(".concat(Number(unfold), ")");
|
|
45
45
|
}) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ": 0;"], ["", ": 0;"])), align);
|
|
46
|
-
}, greyColor5, function (_a) {
|
|
47
|
-
var invert = _a.invert;
|
|
48
|
-
return invert ? greyColor80 : white;
|
|
49
|
-
}, function (_a) {
|
|
46
|
+
}, greyColor5, white, function (_a) {
|
|
50
47
|
var align = _a.align;
|
|
51
48
|
return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
|
|
52
49
|
}, greyColor10);
|
|
53
50
|
exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover{\n background-color: ", ";\n }\n"], ["\n white-space: nowrap;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover{\n background-color: ", ";\n }\n"])), function (_a) {
|
|
54
51
|
var align = _a.align;
|
|
55
52
|
return align === 'center' ? 'center' : 'left';
|
|
56
|
-
},
|
|
57
|
-
var invert = _a.invert;
|
|
58
|
-
return invert ? white : greyColor80;
|
|
59
|
-
}, (0, mixins_1.transition)('background-color'), greyColor10);
|
|
53
|
+
}, greyColor100, (0, mixins_1.transition)('background-color'), greyColor10);
|
|
60
54
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -18,15 +18,17 @@ exports.Loader = void 0;
|
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var Typo_1 = require("../Typo");
|
|
20
20
|
var colors_1 = require("../../themes/colors");
|
|
21
|
+
var styled_components_1 = require("styled-components");
|
|
21
22
|
var greyColor100 = colors_1.colors.greyColor100;
|
|
22
23
|
var index_styled_1 = require("./index.styled");
|
|
23
24
|
var LoaderDiv = function (props) {
|
|
25
|
+
var theme = (0, styled_components_1.useTheme)();
|
|
24
26
|
var SuitableTypo = props.L ? Typo_1.SANS_5_6 : props.M ? Typo_1.SANS_4 : Typo_1.SANS_3;
|
|
25
27
|
return (!props.children ?
|
|
26
28
|
react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props)) :
|
|
27
29
|
react_1.default.createElement(index_styled_1.StyledLoaderWrapper, __assign({}, props),
|
|
28
30
|
react_1.default.createElement(index_styled_1.StyledLoader, __assign({}, props, { children: null })),
|
|
29
|
-
react_1.default.createElement(SuitableTypo, __assign({ color: greyColor100, invert: props.invert }, (props.L ? { bold: true } : { semibold: true })), props.children)));
|
|
31
|
+
react_1.default.createElement(SuitableTypo, __assign({ color: greyColor100, invert: props.invert }, (props.L ? { bold: true } : { semibold: true })), ((theme === null || theme === void 0 ? void 0 : theme._Env) === 'dev' && props.debug) || props.children)));
|
|
30
32
|
};
|
|
31
33
|
var Loader = function (props) {
|
|
32
34
|
return (!props.isBlock ?
|
|
@@ -41,7 +41,7 @@ exports.StyledAvatarImg = styled_components_1.default.img(templateObject_2 || (t
|
|
|
41
41
|
var theme = _a.theme, invert = _a.invert, size = _a.size;
|
|
42
42
|
return commonStyle({ theme: theme, invert: invert, size: size });
|
|
43
43
|
});
|
|
44
|
-
exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n display: grid;\n place-items: center;\n"], ["\n ", "\n display: grid;\n place-items: center;\n"])), function (_a) {
|
|
44
|
+
exports.StyledAvatarTXT = (0, styled_components_1.default)(index_styled_1.SANS_3_STYLED)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n display: inline-grid;\n place-items: center;\n"], ["\n ", "\n display: inline-grid;\n place-items: center;\n"])), function (_a) {
|
|
45
45
|
var theme = _a.theme, invert = _a.invert, size = _a.size;
|
|
46
46
|
return commonStyle({ theme: theme, invert: invert, size: size });
|
|
47
47
|
});
|
|
@@ -3,31 +3,45 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var
|
|
7
|
-
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
+
}
|
|
12
|
+
Object.defineProperty(o, k2, desc);
|
|
13
|
+
}) : (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
o[k2] = m[k];
|
|
16
|
+
}));
|
|
17
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
+
}) : function(o, v) {
|
|
20
|
+
o["default"] = v;
|
|
21
|
+
});
|
|
22
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
+
if (mod && mod.__esModule) return mod;
|
|
24
|
+
var result = {};
|
|
25
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
+
__setModuleDefault(result, mod);
|
|
27
|
+
return result;
|
|
8
28
|
};
|
|
9
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
30
|
exports.StyledLink = void 0;
|
|
11
|
-
var styled_components_1 =
|
|
31
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
12
32
|
var mixins_1 = require("../../themes/mixins");
|
|
13
33
|
var utils_1 = require("./utils");
|
|
14
|
-
exports.StyledLink = styled_components_1.default.a(
|
|
34
|
+
exports.StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n cursor: pointer;\n pointer-events: ", ";\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n & > * {\n margin-right: 0.7rem;\n margin-left: 0.7rem;\n vertical-align: middle;\n }\n\n &:hover{\n .text {\n ", ";\n }\n }\n\n & > .text {\n position: relative;\n ", ";\n \n ", "\n\n & > *:first-child{ // kishan addition\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n }\n"], ["\n cursor: pointer;\n pointer-events: ", ";\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n & > * {\n margin-right: 0.7rem;\n margin-left: 0.7rem;\n vertical-align: middle;\n }\n\n &:hover{\n .text {\n ", ";\n }\n }\n\n & > .text {\n position: relative;\n ", ";\n \n ", "\n\n & > *:first-child{ // kishan addition\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n \n }\n"])), function (_a) {
|
|
15
35
|
var disabled = _a.disabled;
|
|
16
36
|
return disabled ? 'none' : 'auto';
|
|
17
37
|
}, function (_a) {
|
|
18
|
-
var invertUnderline = _a.invertUnderline;
|
|
19
|
-
|
|
38
|
+
var invertUnderline = _a.invertUnderline, disabled = _a.disabled, invert = _a.invert, theme = _a.theme, color = _a.color;
|
|
39
|
+
if (!disabled) {
|
|
40
|
+
return (0, mixins_1.multilineUnderline)((0, utils_1.setLinkColor)({ theme: theme, invert: invert, color: color }), '1px', invertUnderline, true);
|
|
41
|
+
}
|
|
20
42
|
}, function (_a) {
|
|
21
|
-
var theme = _a.theme, invert = _a.invert, disabled = _a.disabled, color = _a.color;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}, function (_a) {
|
|
27
|
-
var invertUnderline = _a.invertUnderline;
|
|
28
|
-
return invertUnderline ? 0 : '100%';
|
|
29
|
-
}, function (_a) {
|
|
30
|
-
var disabled = _a.disabled;
|
|
31
|
-
return disabled ? 0 : '1px';
|
|
32
|
-
}, (0, mixins_1.transition)('width'));
|
|
33
|
-
var templateObject_1;
|
|
43
|
+
var theme = _a.theme, invert = _a.invert, disabled = _a.disabled, color = _a.color, invertUnderline = _a.invertUnderline;
|
|
44
|
+
var finalColor = (0, utils_1.setLinkColor)({ disabled: disabled, color: color, invert: invert, theme: theme });
|
|
45
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n ", "\n "], ["\n color: ", ";\n ", "\n "])), finalColor, !disabled && (0, mixins_1.multilineUnderline)(finalColor, '1px', invertUnderline));
|
|
46
|
+
}, (0, mixins_1.transition)('background-size'));
|
|
47
|
+
var templateObject_1, templateObject_2;
|
|
@@ -26,16 +26,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.TagLink = exports.TagSelect = exports.TagClear = exports.TagDisplay = void 0;
|
|
27
27
|
var react_1 = __importStar(require("react"));
|
|
28
28
|
var index_styled_1 = require("./index.styled");
|
|
29
|
-
var Typo_1 = require("../Typo");
|
|
30
29
|
var icons_1 = require("../../icons");
|
|
31
30
|
var getTypoComp = function (size) { return size === 'XS'
|
|
32
31
|
? function (_a) {
|
|
33
32
|
var children = _a.children;
|
|
34
|
-
return react_1.default.createElement(
|
|
33
|
+
return react_1.default.createElement(index_styled_1.STYLED_ELLIPSIS_SANS_2, null, children);
|
|
35
34
|
}
|
|
36
35
|
: function (_a) {
|
|
37
36
|
var children = _a.children;
|
|
38
|
-
return react_1.default.createElement(
|
|
37
|
+
return react_1.default.createElement(index_styled_1.STYLED_ELLIPSIS_SANS_3, null, children);
|
|
39
38
|
}; };
|
|
40
39
|
function TagDisplay(_a) {
|
|
41
40
|
var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
@@ -27,11 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledTagClearIconWrapper = void 0;
|
|
30
|
+
exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledTagClearIconWrapper = exports.STYLED_ELLIPSIS_SANS_3 = exports.STYLED_ELLIPSIS_SANS_2 = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var colors_1 = require("../../themes/colors");
|
|
33
33
|
var react_router_dom_1 = require("react-router-dom");
|
|
34
34
|
var mixins_1 = require("../../themes/mixins");
|
|
35
|
+
var Typo_1 = require("../Typo");
|
|
35
36
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
36
37
|
var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
|
|
37
38
|
var SIZES = {
|
|
@@ -41,7 +42,7 @@ var SIZES = {
|
|
|
41
42
|
};
|
|
42
43
|
var commonStyle = function (_a) {
|
|
43
44
|
var size = _a.size;
|
|
44
|
-
return "\n padding: 0 1rem;\n position: relative;\n display: inline-flex;\n column-gap: 1rem;\n align-items: center;\n border-radius:0.2rem;\n white-space: nowrap;\n\theight: ".concat(SIZES[size], ";\n");
|
|
45
|
+
return "\n padding: 0 1rem;\n position: relative;\n display: inline-flex;\n column-gap: 1rem;\n align-items: center;\n border-radius:0.2rem;\n white-space: nowrap;\n\theight: ".concat(SIZES[size], ";\n max-width: 100%;\n");
|
|
45
46
|
};
|
|
46
47
|
var blueHover = function (_a) {
|
|
47
48
|
var invert = _a.invert, colors = _a.colors;
|
|
@@ -57,66 +58,68 @@ var greyHover = function (_a) {
|
|
|
57
58
|
? greyColor80
|
|
58
59
|
: greyColor10);
|
|
59
60
|
};
|
|
60
|
-
|
|
61
|
+
exports.STYLED_ELLIPSIS_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins_1.ellipsis);
|
|
62
|
+
exports.STYLED_ELLIPSIS_SANS_3 = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins_1.ellipsis);
|
|
63
|
+
var StyledTagDisplay = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (_a) {
|
|
61
64
|
var size = _a.size;
|
|
62
65
|
return commonStyle({ size: size });
|
|
63
66
|
}, function (_a) {
|
|
64
67
|
var variant = _a.variant, invert = _a.invert, size = _a.size;
|
|
65
68
|
return variant === "primary"
|
|
66
|
-
? (0, styled_components_1.css)(
|
|
67
|
-
(0, styled_components_1.css)(
|
|
69
|
+
? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40) : //secondary
|
|
70
|
+
(0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
|
|
68
71
|
});
|
|
69
72
|
exports.StyledTagDisplay = StyledTagDisplay;
|
|
70
|
-
var StyledTagClear = styled_components_1.default.div(
|
|
73
|
+
var StyledTagClear = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n\n \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n \n\t\n\t", "\n"], ["\n\n \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n \n\t\n\t", "\n"])), function (_a) {
|
|
71
74
|
var size = _a.size;
|
|
72
75
|
return commonStyle({ size: size });
|
|
73
76
|
}, function (_a) {
|
|
74
77
|
var variant = _a.variant, size = _a.size, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
75
78
|
if (variant === "primary") {
|
|
76
79
|
return grey
|
|
77
|
-
? (0, styled_components_1.css)(
|
|
80
|
+
? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert
|
|
78
81
|
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
79
82
|
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
|
|
80
83
|
}
|
|
81
84
|
else {
|
|
82
85
|
// secondry
|
|
83
86
|
return grey
|
|
84
|
-
? (0, styled_components_1.css)(
|
|
87
|
+
? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert
|
|
85
88
|
? (0, utilsOolib_1.getPrimaryColorText)(colors)
|
|
86
89
|
: (0, utilsOolib_1.getPrimaryColor40)(colors));
|
|
87
90
|
}
|
|
88
91
|
}, function (_a) {
|
|
89
92
|
var variant = _a.variant;
|
|
90
|
-
return variant === "ghost" && (0, styled_components_1.css)(
|
|
93
|
+
return variant === "ghost" && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background: none;\n\t border: none;\n "], ["\n background: none;\n\t border: none;\n "])));
|
|
91
94
|
});
|
|
92
95
|
exports.StyledTagClear = StyledTagClear;
|
|
93
|
-
var StyledTagClearIconWrapper = styled_components_1.default.div(
|
|
96
|
+
var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"], ["\n \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"])), (0, mixins_1.multiTransition)('color', 'background-color'), function (_a) {
|
|
94
97
|
var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
95
98
|
return grey
|
|
96
99
|
? greyHover({ invert: invert, colors: colors })
|
|
97
100
|
: blueHover({ invert: invert, colors: colors });
|
|
98
101
|
});
|
|
99
102
|
exports.StyledTagClearIconWrapper = StyledTagClearIconWrapper;
|
|
100
|
-
var StyledTagSelect = styled_components_1.default.div(
|
|
103
|
+
var StyledTagSelect = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n ", "\n ", "\n\n\t", "\n \n"], ["\n ", "\n ", "\n\n\t", "\n \n"])), function (_a) {
|
|
101
104
|
var size = _a.size;
|
|
102
105
|
return commonStyle({ size: size });
|
|
103
106
|
}, (0, mixins_1.multiTransition)("background-color"), function (_a) {
|
|
104
107
|
var selected = _a.selected, size = _a.size, colors = _a.theme.colors;
|
|
105
|
-
return (0, styled_components_1.css)(
|
|
108
|
+
return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\t color: ", ";\n\t\t", "\n "], ["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\t color: ", ";\n\t\t", "\n "])), size === "XS" ? "1px" : "2px", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor40)(colors) : null, (0, utilsOolib_1.getPrimaryColorText)(colors), !selected && (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["&:hover {\n background-color: ", ";\n color: ", ";\n\t\t}"], ["&:hover {\n background-color: ", ";\n color: ", ";\n\t\t}"])), (0, utilsOolib_1.getPrimaryColor40)(colors), (0, utilsOolib_1.getPrimaryColorText)(colors)));
|
|
106
109
|
});
|
|
107
110
|
exports.StyledTagSelect = StyledTagSelect;
|
|
108
|
-
var StyledTagLink = styled_components_1.default.div(
|
|
111
|
+
var StyledTagLink = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n \t", "\n\t", ";\n ", "\n"], ["\n \t", "\n\t", ";\n ", "\n"])), function (_a) {
|
|
109
112
|
var size = _a.size;
|
|
110
113
|
return commonStyle({ size: size });
|
|
111
114
|
}, (0, mixins_1.multiTransition)("background-color", "color"), function (_a) {
|
|
112
115
|
var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
|
|
113
116
|
return variant === "primary"
|
|
114
|
-
? (0, styled_components_1.css)(
|
|
117
|
+
? (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n \t\tbackground-color: ", ";\n \t\tcolor: ", ";\n\t\t\t\t", ";\n \t"], ["\n \t\tbackground-color: ", ";\n \t\tcolor: ", ";\n\t\t\t\t", ";\n \t"])), !invert
|
|
115
118
|
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
116
119
|
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100, blueHover({ invert: invert, colors: colors })) : // secondary
|
|
117
|
-
(0, styled_components_1.css)(
|
|
120
|
+
(0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"], ["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), blueHover({ invert: invert, colors: colors }));
|
|
118
121
|
});
|
|
119
122
|
exports.StyledTagLink = StyledTagLink;
|
|
120
|
-
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(
|
|
123
|
+
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n text-decoration: none;\n"], ["\n text-decoration: none;\n"])));
|
|
121
124
|
exports.StyledLink = StyledLink;
|
|
122
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
125
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
@@ -3,4 +3,6 @@ export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 |
|
|
|
3
3
|
import { transition } from "./transitions";
|
|
4
4
|
import { multiTransition } from "./transitions";
|
|
5
5
|
export function isElementInViewport(el: any): boolean;
|
|
6
|
+
export const ellipsis: any;
|
|
7
|
+
export function multilineUnderline(color: any, thickness?: string, reverse?: boolean, hovered?: boolean): any;
|
|
6
8
|
export { transition, multiTransition };
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
2
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isElementInViewport = exports.multiTransition = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
|
|
7
|
+
exports.multilineUnderline = exports.ellipsis = exports.isElementInViewport = exports.multiTransition = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
|
|
8
|
+
var styled_components_1 = require("styled-components");
|
|
4
9
|
var transitions_1 = require("./transitions");
|
|
5
10
|
Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
|
|
6
11
|
Object.defineProperty(exports, "multiTransition", { enumerable: true, get: function () { return transitions_1.multiTransition; } });
|
|
@@ -37,3 +42,14 @@ var isElementInViewport = function (el) {
|
|
|
37
42
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth));
|
|
38
43
|
};
|
|
39
44
|
exports.isElementInViewport = isElementInViewport;
|
|
45
|
+
var ellipsis = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
46
|
+
exports.ellipsis = ellipsis;
|
|
47
|
+
//works only with inline(ish) elements, you need to call it again at hover state & set transition yourself 'background-size'
|
|
48
|
+
var multilineUnderline = function (color, thickness, reverse, hovered) {
|
|
49
|
+
if (thickness === void 0) { thickness = '1px'; }
|
|
50
|
+
if (reverse === void 0) { reverse = false; }
|
|
51
|
+
if (hovered === void 0) { hovered = false; }
|
|
52
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n background-image: linear-gradient(", ", ", ");\n background-repeat: no-repeat;\n background-position: left bottom;\n background-size: ", " ", ";\n"], [" \n background-image: linear-gradient(", ", ", ");\n background-repeat: no-repeat;\n background-position: left bottom;\n background-size: ", " ", ";\n"])), color, color, hovered ? (reverse ? '100%' : '0%') : (reverse ? '0%' : '100%'), thickness);
|
|
53
|
+
};
|
|
54
|
+
exports.multilineUnderline = multilineUnderline;
|
|
55
|
+
var templateObject_1, templateObject_2;
|