oolib 2.14.0 → 2.14.3
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/styled.js +1 -1
- 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 +1 -0
- package/dist/themes/mixins/index.js +9 -1
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@ var mixins_1 = require("../../themes/mixins");
|
|
|
34
34
|
var Buttons_1 = require("../Buttons");
|
|
35
35
|
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor80 = themes_1.colors.greyColor80;
|
|
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
|
-
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: -
|
|
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;
|
|
39
39
|
return "scaleY(".concat(Number(unfold), ")");
|
|
40
40
|
}, (0, mixins_1.transition)('transform'), function (_a) {
|
|
@@ -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,5 @@ 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;
|
|
6
7
|
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.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,6 @@ 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
|
+
var templateObject_1;
|