oolib 2.57.8 → 2.58.0
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/DatePicker/styled.js +5 -13
- package/dist/components/Dropdowns/comps/SelectTagsInput/styled.js +4 -14
- package/dist/components/TextInputs/index.styled.js +4 -12
- package/dist/globalStyles/globalVariables.d.ts +3 -0
- package/dist/globalStyles/globalVariables.js +24 -0
- package/package.json +1 -1
|
@@ -11,9 +11,10 @@ exports.StyledBodyWrapper = exports.StyledWeekdays = exports.StyledWeekDaysWrapp
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var mixins_1 = require("../../themes/mixins");
|
|
14
|
+
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
14
15
|
var greyColor80 = themes_1.colors.greyColor80, greyColor5 = themes_1.colors.greyColor5, greyColor70 = themes_1.colors.greyColor70, greyColor10 = themes_1.colors.greyColor10, primaryColor100 = themes_1.colors.primaryColor100, greyColor40 = themes_1.colors.greyColor40, white = themes_1.colors.white, primaryColor10 = themes_1.colors.primaryColor10, greyColor15 = themes_1.colors.greyColor15, greyColor3 = themes_1.colors.greyColor3, greyColor100 = themes_1.colors.greyColor100, primaryColor40 = themes_1.colors.primaryColor40;
|
|
15
|
-
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n\n
|
|
16
|
-
exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
16
|
+
exports.StyledDateInputContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n\n &:focus-within .calender-container {\n visibility: visible;\n }\n\n"], ["\n position: relative;\n width: fit-content;\n\n &:focus-within .calender-container {\n visibility: visible;\n }\n\n"])));
|
|
17
|
+
exports.StyledInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 9rem;\n height: 4rem;\n color: ", ";\n ", "\n\n &:focus {\n background-color: ", ";\n }\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n"], ["\n ", "\n background: ", ";\n outline: none;\n border: none;\n width: 9rem;\n height: 4rem;\n color: ", ";\n ", "\n\n &:focus {\n background-color: ", ";\n }\n\n ", "\n\n &::placeholder {\n color: ", ";\n }\n\n"])), globalVariables_1.inputElemPadding, function (_a) {
|
|
17
18
|
var invert = _a.invert;
|
|
18
19
|
return (invert ? greyColor80 : greyColor5);
|
|
19
20
|
}, function (_a) {
|
|
@@ -21,16 +22,7 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
|
|
|
21
22
|
return invert
|
|
22
23
|
? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
|
|
23
24
|
: disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
|
|
24
|
-
}, function (_a) {
|
|
25
|
-
var invert = _a.invert, disabled = _a.disabled;
|
|
26
|
-
return disabled ? greyColor15 : invert ? primaryColor40 : greyColor10;
|
|
27
|
-
}, function (_a) {
|
|
28
|
-
var invert = _a.invert;
|
|
29
|
-
return invert && greyColor100;
|
|
30
|
-
}, function (_a) {
|
|
31
|
-
var invert = _a.invert;
|
|
32
|
-
return (invert ? greyColor100 : greyColor40);
|
|
33
|
-
}, function (_a) {
|
|
25
|
+
}, globalVariables_1.inputElemHover, function (_a) {
|
|
34
26
|
var invert = _a.invert, disabled = _a.disabled;
|
|
35
27
|
return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
|
|
36
28
|
}, function (_a) {
|
|
@@ -38,7 +30,7 @@ exports.StyledInput = styled_components_1.default.input(templateObject_2 || (tem
|
|
|
38
30
|
return disabled &&
|
|
39
31
|
"\n color: ".concat(greyColor40, "\n background-color: ").concat(greyColor15, ";\n cursor: not-allowed;\n ");
|
|
40
32
|
}, greyColor40);
|
|
41
|
-
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
33
|
+
exports.StyledDateInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), globalVariables_1.inputElemFocused);
|
|
42
34
|
exports.StyledCalenderContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-family: sans-serif;\n position: absolute;\n width: 30rem;\n /* height: 319px; */\n box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2);\n background-color: ", ";\n visibility: hidden;\n z-index: 10000;\n\n .disabled-date {\n opacity: 0.5;\n pointer-events: none;\n }\n \n .range {\n background-color: ", ";\n color: ", ";\n }\n\n .today {\n background-color: ", ";\n color: ", ";\n }\n\n .right-class {\n right: 0;\n }\n"], ["\n font-family: sans-serif;\n position: absolute;\n width: 30rem;\n /* height: 319px; */\n box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2);\n background-color: ", ";\n visibility: hidden;\n z-index: 10000;\n\n .disabled-date {\n opacity: 0.5;\n pointer-events: none;\n }\n \n .range {\n background-color: ", ";\n color: ", ";\n }\n\n .today {\n background-color: ", ";\n color: ", ";\n }\n\n .right-class {\n right: 0;\n }\n"])), function (_a) {
|
|
43
35
|
var invert = _a.invert;
|
|
44
36
|
return invert ? greyColor80 : white;
|
|
@@ -32,23 +32,13 @@ 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 utilsOolib_1 = require("../../../../utilsOolib");
|
|
35
|
-
|
|
36
|
-
exports.
|
|
35
|
+
var globalVariables_1 = require("../../../../globalStyles/globalVariables");
|
|
36
|
+
exports.StyledTagsSelectTextInput = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n border: 0;\n width: 100%;\n background-color: ", ";\n \n // this strange bit is to fix the 'zoom into input' issue on ios\n margin: 0 -2rem;\n ", "\n &:focus {\n border: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n"], ["\n height: 100%;\n border: 0;\n width: 100%;\n background-color: ", ";\n \n // this strange bit is to fix the 'zoom into input' issue on ios\n margin: 0 -2rem;\n ", "\n &:focus {\n border: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n"])), themes_1.colors.none, globalVariables_1.inputElemPadding, themes_1.colors.greyColor40);
|
|
37
|
+
exports.StyledSelectTagsInputContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n position: relative;\n border-radius: 2px;\n background-color: ", ";\n padding: 1rem 2rem 1rem 2rem;\n ", "\n\n ", ";\n\n ", "\n ", "\n\n height: auto;\n align-items: flex-start;\n"], ["\n cursor: pointer;\n position: relative;\n border-radius: 2px;\n background-color: ", ";\n padding: 1rem 2rem 1rem 2rem;\n ", "\n\n ", ";\n\n ", "\n ", "\n\n height: auto;\n align-items: flex-start;\n"])), function (_a) {
|
|
37
38
|
var invert = _a.invert;
|
|
38
39
|
return invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor5;
|
|
39
40
|
}, function (_a) {
|
|
40
41
|
var disabled = _a.disabled;
|
|
41
42
|
return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
42
|
-
}, (0, mixins_1.transition)("background-color"),
|
|
43
|
-
var theme = _a.theme, invert = _a.invert;
|
|
44
|
-
return invert
|
|
45
|
-
? (0, utilsOolib_1.getPrimaryColor40)(theme === null || theme === void 0 ? void 0 : theme.colors)
|
|
46
|
-
: (0, utilsOolib_1.getPrimaryColor100)(theme === null || theme === void 0 ? void 0 : theme.colors);
|
|
47
|
-
}, (0, mixins_1.transition)("width"), function (_a) {
|
|
48
|
-
var invert = _a.invert;
|
|
49
|
-
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
|
|
50
|
-
}, function (_a) {
|
|
51
|
-
var invert = _a.invert;
|
|
52
|
-
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
|
|
53
|
-
});
|
|
43
|
+
}, (0, mixins_1.transition)("background-color"), globalVariables_1.inputElemFocused, globalVariables_1.inputElemHover);
|
|
54
44
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -12,6 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var styled_components_2 = require("styled-components");
|
|
13
13
|
var themes_1 = require("../../themes");
|
|
14
14
|
var mixins_1 = require("../../themes/mixins");
|
|
15
|
+
var globalVariables_1 = require("../../globalStyles/globalVariables");
|
|
15
16
|
var greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor80 = themes_1.colors.greyColor80, greyColor40 = themes_1.colors.greyColor40, greyColor100 = themes_1.colors.greyColor100, white = themes_1.colors.white, red = themes_1.colors.red, green = themes_1.colors.green, invertRed = themes_1.colors.invertRed, invertGreen = themes_1.colors.invertGreen;
|
|
16
17
|
var SIZES = {
|
|
17
18
|
S: "3rem",
|
|
@@ -29,7 +30,7 @@ exports.MsgContainer = styled_components_1.default.div(templateObject_2 || (temp
|
|
|
29
30
|
var status = _a.status, invert = _a.invert;
|
|
30
31
|
return status && (0, styled_components_2.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), getColorValue(status, invert));
|
|
31
32
|
});
|
|
32
|
-
exports.InputContainerStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n ", ";\n\n position: relative;\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n gap: 1rem;\n ", "\n
|
|
33
|
+
exports.InputContainerStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n ", ";\n\n position: relative;\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n gap: 1rem;\n ", "\n\n ", "\n ", "\n\n ", ";\n ", ";\n ", "\n"], ["\n ", "\n ", ";\n\n position: relative;\n background-color: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n gap: 1rem;\n ", "\n\n ", "\n ", "\n\n ", ";\n ", ";\n ", "\n"
|
|
33
34
|
// export const DisplayOnlyComp = styled.div`
|
|
34
35
|
// ${({ size }) =>
|
|
35
36
|
// css`
|
|
@@ -42,7 +43,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_9
|
|
|
42
43
|
case 'icon+text':
|
|
43
44
|
return (0, styled_components_2.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 2rem 0 1.5rem;\n "], ["\n padding: 0 2rem 0 1.5rem;\n "])));
|
|
44
45
|
default:
|
|
45
|
-
return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
46
|
+
return (0, styled_components_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), globalVariables_1.inputElemPadding);
|
|
46
47
|
}
|
|
47
48
|
}, function (_a) {
|
|
48
49
|
var eyeIcon = _a.eyeIcon;
|
|
@@ -53,16 +54,7 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_9
|
|
|
53
54
|
}, function (_a) {
|
|
54
55
|
var invert = _a.invert;
|
|
55
56
|
return (invert ? white : greyColor100);
|
|
56
|
-
}, (0, mixins_1.transition)('background-color'), function (_a) {
|
|
57
|
-
var invert = _a.invert;
|
|
58
|
-
return (invert ? greyColor70 : greyColor10);
|
|
59
|
-
}, function (_a) {
|
|
60
|
-
var invert = _a.invert;
|
|
61
|
-
return (invert ? "#ADDBFF" : "#33A4FF");
|
|
62
|
-
}, (0, mixins_1.transition)('width'), function (_a) {
|
|
63
|
-
var invert = _a.invert;
|
|
64
|
-
return (invert ? greyColor70 : greyColor10);
|
|
65
|
-
}, function (_a) {
|
|
57
|
+
}, (0, mixins_1.transition)('background-color'), globalVariables_1.inputElemHover, globalVariables_1.inputElemFocused, function (_a) {
|
|
66
58
|
var disabled = _a.disabled;
|
|
67
59
|
return disabled && (0, styled_components_2.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n pointer-events: none;\n color: ", ";\n "], ["\n background-color: ", ";\n pointer-events: none;\n color: ", ";\n "])), greyColor15, greyColor40);
|
|
68
60
|
}, function (_a) {
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export const inputElemPadding: import("styled-components").FlattenSimpleInterpolation;
|
|
2
|
+
export const inputElemHover: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
3
|
+
export const inputElemFocused: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
|
|
@@ -0,0 +1,24 @@
|
|
|
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
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.inputElemFocused = exports.inputElemHover = exports.inputElemPadding = void 0;
|
|
8
|
+
var styled_components_1 = require("styled-components");
|
|
9
|
+
var themes_1 = require("../themes");
|
|
10
|
+
var mixins_1 = require("../themes/mixins");
|
|
11
|
+
// Text Input global style variables
|
|
12
|
+
exports.inputElemPadding = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 2rem;\n"], ["\n padding: 0 2rem;\n"])));
|
|
13
|
+
exports.inputElemHover = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14
|
+
var invert = _a.invert;
|
|
15
|
+
return invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10;
|
|
16
|
+
});
|
|
17
|
+
exports.inputElemFocused = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: 0;\n left: 0;\n box-shadow: inset 0px -2px 0px ", ";\n ", "\n }\n &:focus-within {\n background-color: ", ";\n ::after {\n width: 100%;\n }\n } \n"], ["\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: 0;\n left: 0;\n box-shadow: inset 0px -2px 0px ", ";\n ", "\n }\n &:focus-within {\n background-color: ", ";\n ::after {\n width: 100%;\n }\n } \n"])), function (_a) {
|
|
18
|
+
var invert = _a.invert;
|
|
19
|
+
return (invert ? "#ADDBFF" : "#33A4FF");
|
|
20
|
+
}, (0, mixins_1.transition)('width'), function (_a) {
|
|
21
|
+
var invert = _a.invert;
|
|
22
|
+
return (invert ? themes_1.colors.greyColor70 : themes_1.colors.greyColor10);
|
|
23
|
+
});
|
|
24
|
+
var templateObject_1, templateObject_2, templateObject_3;
|