@learningpool/ui 1.8.1 → 1.8.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/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js +2 -2
- package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js +3 -3
- package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +27 -12
- package/components/navigation/helpers.js +13 -11
- package/package.json +1 -1
|
@@ -10,11 +10,11 @@ import { animated } from '@react-spring/web';
|
|
|
10
10
|
import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
|
|
11
11
|
export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .MuiPaper-root {\n height: 100vh;\n border: none;\n z-index: 1;\n }\n"], ["\n .MuiPaper-root {\n height: 100vh;\n border: none;\n z-index: 1;\n }\n"])));
|
|
12
12
|
export var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButton-startIcon {\n margin-inline-start: -", ";\n margin-inline-end: ", ";\n }\n\n .MuiButton-endIcon {\n margin-inline-start: ", ";\n margin-inline-end: -", ";\n }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
|
|
13
|
-
export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
|
|
13
|
+
export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"], ["\n align-items: center;\n background-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n font-family: ", ";\n height: 100%;\n justify-content: flex-start;\n overflow: auto;\n padding: 15vh ", ";\n position: relative;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
|
|
14
14
|
export var StyledBoxProfile = styled(animated.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 2rem;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 2rem;\n"])));
|
|
15
15
|
export var StyledBoxProfileEdit = styled(animated.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
16
16
|
export var StyledAvatarName = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 1.75rem;\n"], ["\n font-size: 1.75rem;\n"])));
|
|
17
17
|
export var StyledButtonGroup = styled(ButtonGroup)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-style: solid;\n }\n"], ["\n /* Fix for RTL issue */\n .MuiButtonGroup-grouped:not(:first-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n }\n\n .MuiButtonGroup-grouped:not(:last-of-type) {\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n border-style: solid;\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); });
|
|
18
18
|
export var StyledAvatar = styled(Avatar)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"], ["\n background-color: ", ";\n color: ", ";\n font-size: 0.85rem;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); });
|
|
19
|
-
export var StyledListItemButton = styled(ListItemButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"], ["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"])), function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); });
|
|
19
|
+
export var StyledListItemButton = styled(ListItemButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"], ["\n border-radius: 50px;\n white-space: normal;\n\n & .MuiListItemIcon-root {\n color: ", ";\n }\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); });
|
|
20
20
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -18,7 +18,7 @@ export var FlyoutMenuPaper = styled(Paper, {
|
|
|
18
18
|
: 'auto'; });
|
|
19
19
|
export var FlyoutMenuWrap = styled('div', {
|
|
20
20
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
21
|
-
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
|
|
21
|
+
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n border-radius: 0 8px 8px 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
|
|
22
22
|
? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
|
|
23
23
|
: "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); });
|
|
24
24
|
export var FlyoutMenuList = styled(List, {
|
|
@@ -26,7 +26,7 @@ export var FlyoutMenuList = styled(List, {
|
|
|
26
26
|
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n pointer-events: ", ";\n"], ["\n padding: ", ";\n pointer-events: ", ";\n"])), function (props) { return props.theme.spacing(1, 2); }, function (props) { return props.open ? 'auto' : 'none'; });
|
|
27
27
|
export var FlyoutMenuHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: bold;\n padding: 12px 0 0;\n padding-inline-end: ", ";\n padding-inline-start: ", ";\n text-align: ", ";\n"], ["\n font-weight: bold;\n padding: 12px 0 0;\n padding-inline-end: ", ";\n padding-inline-start: ", ";\n text-align: ", ";\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.spacing(3); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
|
|
28
28
|
export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: transparent !important;\n font-size: 14px;\n padding: 0;\n white-space: normal;\n"], ["\n background: transparent !important;\n font-size: 14px;\n padding: 0;\n white-space: normal;\n"])));
|
|
29
|
-
export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n text-align: ", ";\n"], ["\n color: ", ";\n text-align: ", ";\n"])), function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
|
|
29
|
+
export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n text-align: ", ";\n"], ["\n color: ", ";\n text-align: ", ";\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
|
|
30
30
|
export var FlyoutMenuButton = styled(SSListItemButton, {
|
|
31
31
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
|
|
32
32
|
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all ", "ms ", ";\n padding: ", ";\n width: 100%;\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"], ["\n align-items: flex-start;\n background-color: transparent;\n border-radius: 5px;\n display: flex;\n flex-wrap: wrap;\n text-decoration: none;\n text-transform: none;\n transition: all ", "ms ", ";\n padding: ", ";\n width: 100%;\n\n :hover {\n background-color: rgba(0, 0, 0, .05);\n }\n\n :focus {\n background-color: ", ";\n }\n"
|
|
@@ -40,7 +40,7 @@ export var FullHeightFlyoutMenuPaper = styled(Paper, {
|
|
|
40
40
|
: "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); });
|
|
41
41
|
export var FullHeightFlyoutMenuWrapper = styled('div', {
|
|
42
42
|
shouldForwardProp: function (prop) { return prop !== 'open'; }
|
|
43
|
-
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
|
|
43
|
+
})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"], ["\n background-color: ", ";\n color: ", ";\n box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n height: 100%;\n max-width: 300px;\n min-width: 300px;\n opacity: ", ";\n pointer-events: ", ";\n transform: ", ";\n transform-origin: left center;\n transition: ", ";\n visibility: ", ";\n width: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
|
|
44
44
|
? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
|
|
45
45
|
: "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
|
|
46
46
|
export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background-color: ", ";\n content: '';\n display: block;\n height: 82px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 63px;\n width: 80px;\n z-index: -1;\n"], ["\n background-color: ", ";\n content: '';\n display: block;\n height: 82px;\n left: ", ";\n right: ", ";\n position: absolute;\n top: 63px;\n width: 80px;\n z-index: -1;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
|
|
@@ -33,21 +33,36 @@ export var DrawerToggle = styled(IconButton, {
|
|
|
33
33
|
})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n transition: all ", "ms ", ";\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"], ["\n background: transparent;\n height: 44px;\n padding: 0 ", " !important;\n position: absolute;\n left: ", ";\n right: ", ";\n transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n transition: all ", "ms ", ";\n width: 44px;\n z-index: 10;\n\n @media (min-width: ", ") {\n padding: 0 ", " !important;\n }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
|
|
34
34
|
export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n box-sizing: content-box;\n height: 1.75rem;\n padding: ", ";\n width: 1.75rem;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(0.5); });
|
|
35
35
|
export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
|
|
36
|
-
export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n overflow-x: hidden;\n overflow-y: auto;\n\n // Firefox and future scrollbars\n * & {\n scrollbar-width: thin;\n scrollbar-color: ", ";\n transition: background-color ", "ms ", ";\n }\n\n * &:hover {\n scrollbar-color: ", ";\n }\n\n // Webkit and fall back scrollbars\n ::-webkit-scrollbar {\n width: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 55px;\n transition: background-color ", "ms ", ";\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background-color: ", ";\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) {
|
|
37
|
+
var _a, _b, _c;
|
|
38
|
+
return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.background) === ('#fff' || '#ffffff' || 'white')
|
|
39
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 2, (_b = props.theme.palette.navigation) === null || _b === void 0 ? void 0 : _b.background)
|
|
40
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 2, (_c = props.theme.palette.navigation) === null || _c === void 0 ? void 0 : _c.background);
|
|
41
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
|
|
42
|
+
var _a, _b, _c;
|
|
43
|
+
return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.background) === ('#fff' || '#ffffff' || 'white')
|
|
44
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 3, (_b = props.theme.palette.navigation) === null || _b === void 0 ? void 0 : _b.background)
|
|
45
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 3, (_c = props.theme.palette.navigation) === null || _c === void 0 ? void 0 : _c.background);
|
|
46
|
+
}, function (props) {
|
|
47
|
+
var _a, _b, _c;
|
|
48
|
+
return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.background) === ('#fff' || '#ffffff' || 'white')
|
|
49
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 2, (_b = props.theme.palette.navigation) === null || _b === void 0 ? void 0 : _b.background)
|
|
50
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 2, (_c = props.theme.palette.navigation) === null || _c === void 0 ? void 0 : _c.background);
|
|
51
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
|
|
52
|
+
var _a, _b, _c;
|
|
53
|
+
return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.background) === ('#fff' || '#ffffff' || 'white')
|
|
54
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 3, (_b = props.theme.palette.navigation) === null || _b === void 0 ? void 0 : _b.background)
|
|
55
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 3, (_c = props.theme.palette.navigation) === null || _c === void 0 ? void 0 : _c.background);
|
|
56
|
+
});
|
|
45
57
|
export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"], ["\n background-color: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-end;\n margin-top: auto;\n overflow: hidden;\n"])), function (props) { return getNavigationBackground(props.theme); });
|
|
46
58
|
export var StyledDivider = styled('div', {
|
|
47
59
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
48
|
-
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: \"\";\n display: block;\n height: 2px;\n margin: auto;\n transition: all ", "ms ", ";\n width: 66%;\n }\n"], ["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: \"\";\n display: block;\n height: 2px;\n margin: auto;\n transition: all ", "ms ", ";\n width: 66%;\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) {
|
|
49
|
-
|
|
50
|
-
|
|
60
|
+
})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: \"\";\n display: block;\n height: 2px;\n margin: auto;\n transition: all ", "ms ", ";\n width: 66%;\n }\n"], ["\n background-color: ", ";\n\n :before {\n background-color: ", ";\n border-radius: 55px;\n content: \"\";\n display: block;\n height: 2px;\n margin: auto;\n transition: all ", "ms ", ";\n width: 66%;\n }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) {
|
|
61
|
+
var _a, _b, _c;
|
|
62
|
+
return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.background) === ('#fff' || '#ffffff' || 'white')
|
|
63
|
+
? darken(VERTNAV_COLORS.DARKEN_AMOUNT, (_b = props.theme.palette.navigation) === null || _b === void 0 ? void 0 : _b.background)
|
|
64
|
+
: lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, (_c = props.theme.palette.navigation) === null || _c === void 0 ? void 0 : _c.background);
|
|
65
|
+
}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
|
|
51
66
|
export var DrawerShadow = styled(Box, {
|
|
52
67
|
shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
|
|
53
68
|
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: rgba(0, 0, 0, 0.125);\n content: \"\";\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n right: ", ";\n position: fixed;\n top: 0;\n transition-duration: ", "ms;\n transition-property: left right;\n transition-timing-function: ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n right: ", ";\n }\n"], ["\n background: rgba(0, 0, 0, 0.125);\n content: \"\";\n display: block;\n filter: blur(13px);\n height: 100%;\n left: ", ";\n right: ", ";\n position: fixed;\n top: 0;\n transition-duration: ", "ms;\n transition-property: left right;\n transition-timing-function: ", ";\n visibility: visible;\n width: 40px;\n\n @media (min-width: ", ") {\n left: ", ";\n right: ", ";\n }\n"])), function (props) { return props.theme.direction === 'ltr'
|
|
@@ -13,13 +13,13 @@ export var getNavigationBackground = function (theme) {
|
|
|
13
13
|
* @returns string
|
|
14
14
|
*/
|
|
15
15
|
export var getNavigationContrastText = function (theme) {
|
|
16
|
-
var _a;
|
|
16
|
+
var _a, _b, _c, _d, _e;
|
|
17
17
|
var palette = theme.palette;
|
|
18
18
|
// Use background property if navigation properties arent set
|
|
19
|
-
if (!palette.navigation.contrastText && !palette.navigation.background) {
|
|
19
|
+
if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) && !((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background)) {
|
|
20
20
|
return palette.getContrastText(palette.background.paper);
|
|
21
21
|
}
|
|
22
|
-
return (
|
|
22
|
+
return (_d = (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.contrastText) !== null && _d !== void 0 ? _d : palette.getContrastText((_e = palette.navigation) === null || _e === void 0 ? void 0 : _e.background);
|
|
23
23
|
};
|
|
24
24
|
/**
|
|
25
25
|
* Return a darkened or lightened background color for the navigation
|
|
@@ -27,17 +27,18 @@ export var getNavigationContrastText = function (theme) {
|
|
|
27
27
|
* @returns string
|
|
28
28
|
*/
|
|
29
29
|
export var getOffsetNavigationBackground = function (theme, colorAdjustAmount) {
|
|
30
|
+
var _a, _b, _c, _d;
|
|
30
31
|
var palette = theme.palette;
|
|
31
32
|
var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
|
|
32
33
|
// Use background property if navigation property isnt set
|
|
33
|
-
if (!palette.navigation.background) {
|
|
34
|
+
if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.background)) {
|
|
34
35
|
return getLuminance(palette.background.paper) > 0.5
|
|
35
36
|
? darken(adjustAmount, palette.background.paper)
|
|
36
37
|
: lighten(adjustAmount, palette.background.paper);
|
|
37
38
|
}
|
|
38
|
-
return getLuminance(palette.navigation.background) > 0.5
|
|
39
|
-
? darken(adjustAmount, palette.navigation.background)
|
|
40
|
-
: lighten(adjustAmount, palette.navigation.background);
|
|
39
|
+
return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) > 0.5
|
|
40
|
+
? darken(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background)
|
|
41
|
+
: lighten(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background);
|
|
41
42
|
};
|
|
42
43
|
/**
|
|
43
44
|
* Return a darkened or lightened contrast color for the navigation
|
|
@@ -45,15 +46,16 @@ export var getOffsetNavigationBackground = function (theme, colorAdjustAmount) {
|
|
|
45
46
|
* @returns string
|
|
46
47
|
*/
|
|
47
48
|
export var getOffsetNavigationContrastText = function (theme, colorAdjustAmount) {
|
|
49
|
+
var _a, _b, _c, _d;
|
|
48
50
|
var palette = theme.palette;
|
|
49
51
|
var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
|
|
50
52
|
// Use background property if navigation property isnt set
|
|
51
|
-
if (!palette.navigation.background) {
|
|
53
|
+
if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.background)) {
|
|
52
54
|
return getLuminance(palette.background.paper) > 0.5
|
|
53
55
|
? palette.getContrastText(darken(adjustAmount, palette.background.paper))
|
|
54
56
|
: palette.getContrastText(lighten(adjustAmount, palette.background.paper));
|
|
55
57
|
}
|
|
56
|
-
return getLuminance(palette.navigation.background) > 0.5
|
|
57
|
-
? palette.getContrastText(darken(adjustAmount, palette.navigation.background))
|
|
58
|
-
: palette.getContrastText(lighten(adjustAmount, palette.navigation.background));
|
|
58
|
+
return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) > 0.5
|
|
59
|
+
? palette.getContrastText(darken(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background))
|
|
60
|
+
: palette.getContrastText(lighten(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background));
|
|
59
61
|
};
|