@mailstep/design-system 0.8.16-beta.13 → 0.8.16-beta.14
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/package.json +1 -1
- package/ui/Blocks/SideMenu/styles.js +7 -7
- package/ui/ThemeProvider/themes/default.js +1 -1
- package/ui/index.es.js +14265 -13647
- package/ui/index.umd.js +444 -444
package/package.json
CHANGED
|
@@ -28,7 +28,7 @@ export var ItemLabel = styled.div(templateObject_6 || (templateObject_6 = __make
|
|
|
28
28
|
});
|
|
29
29
|
export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n svg {\n max-width: 11px;\n }\n"], ["\n color: ", ";\n svg {\n max-width: 11px;\n }\n"])), function (_a) {
|
|
30
30
|
var $lightMode = _a.$lightMode;
|
|
31
|
-
return ($lightMode ? th.color('typoPrimary') : '
|
|
31
|
+
return ($lightMode ? th.color('typoPrimary') : th.color('sideMenuSelectedText'));
|
|
32
32
|
});
|
|
33
33
|
export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"], ["\n line-height: 1.5;\n letter-spacing: 0.4px;\n"])));
|
|
34
34
|
export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n height: ", ";\n border-radius: ", ";\n font-weight: 600;\n letter-spacing: 0.4px;\n position: relative;\n color: ", ";\n transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n transition-property: transform;\n\n &.toplevel {\n margin: ", ";\n padding: ", ";\n gap: ", ";\n justify-content: ", ";\n &.active {\n color: ", ";\n }\n }\n\n &.nestedlevel {\n padding: 0;\n :hover {\n color: ", ";\n }\n }\n\n &.active > ", " {\n background-color: ", ";\n color: ", ";\n width: 100%;\n border-left: 4px solid ", ";\n :last-child {\n border-bottom-right-radius: 10px;\n }\n :first-child {\n border-top-right-radius: 10px;\n }\n }\n\n ", " {\n color: ", ";\n padding-left: 10px;\n width: -webkit-fill-available;\n height: -webkit-fill-available;\n }\n\n &.active,\n &.selected {\n ", " {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
@@ -57,22 +57,22 @@ export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9
|
|
|
57
57
|
return ($isCompact ? 'center' : 'space-between');
|
|
58
58
|
}, function (_a) {
|
|
59
59
|
var $lightMode = _a.$lightMode;
|
|
60
|
-
return ($lightMode ? th('colors.red1') : '
|
|
60
|
+
return ($lightMode ? th('colors.red1') : th.color('sideMenuSelectedText'));
|
|
61
61
|
}, function (_a) {
|
|
62
62
|
var $lightMode = _a.$lightMode;
|
|
63
|
-
return ($lightMode ? th('colors.red1') : '
|
|
63
|
+
return ($lightMode ? th('colors.red1') : th.color('sideMenuSelectedText'));
|
|
64
64
|
}, TooltipItemLabel, function (_a) {
|
|
65
65
|
var $lightMode = _a.$lightMode;
|
|
66
66
|
return ($lightMode ? th.color('red20') : th.color('blue2'));
|
|
67
67
|
}, function (_a) {
|
|
68
68
|
var $lightMode = _a.$lightMode;
|
|
69
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
69
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
70
70
|
}, th('colors.red1'), TooltipItemLabel, function (_a) {
|
|
71
71
|
var $lightMode = _a.$lightMode;
|
|
72
|
-
return ($lightMode ? th.color('typoPrimary') : th.color('
|
|
72
|
+
return ($lightMode ? th.color('typoPrimary') : th.color('sideMenuSelectedText'));
|
|
73
73
|
}, ItemDropdownArrow, function (_a) {
|
|
74
74
|
var $lightMode = _a.$lightMode;
|
|
75
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
75
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
76
76
|
});
|
|
77
77
|
export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"], ["\n z-index: 1;\n stroke: ", ";\n .selected > ", ", .active > ", " {\n color: ", ";\n stroke: ", ";\n }\n\n .toplevel {\n ", "\n\n ", "\n\n &.active, &.selected {\n ", "\n \n background-color: ", ";\n svg {\n stroke: ", ";\n }\n }\n\n &.expanded > ", " {\n visibility: visible;\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n &:hover {\n ", ".toplevel {\n background-color: ", ";\n }\n ", ".toplevel.active, ", ".toplevel.selected {\n background-color: ", ";\n }\n ", ".nestedlevel {\n background-color: inherit;\n }\n }\n }\n"])), function (_a) {
|
|
78
78
|
var $lightMode = _a.$lightMode;
|
|
@@ -107,7 +107,7 @@ export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_1
|
|
|
107
107
|
return th.color('red1');
|
|
108
108
|
}, function (_a) {
|
|
109
109
|
var $lightMode = _a.$lightMode;
|
|
110
|
-
return ($lightMode ? th.color('red1') : th.color('
|
|
110
|
+
return ($lightMode ? th.color('red1') : th.color('sideMenuSelectedText'));
|
|
111
111
|
}, ItemDropdownArrow, ItemLinkWrap, function (_a) {
|
|
112
112
|
var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
|
|
113
113
|
return $isCompact ? 'none' : $lightMode ? th.color('neutral20') : th.color('blue4');
|