@learningpool/ui 1.8.3 → 1.8.4

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.
Files changed (2) hide show
  1. package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js +3 -30
  2. package/package.json +1 -1
package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js CHANGED
@@ -7,9 +7,7 @@ import Drawer from '@mui/material/Drawer';
7
7
  import { Box, IconButton } from '../../../index';
8
8
  import { styled } from '@mui/material/styles';
9
9
  import { animated } from '@react-spring/web';
10
- import { darken, lighten } from 'polished';
11
- import { VERTNAV_COLORS } from '../../../utils/constants';
12
- import { getNavigationBackground, getNavigationContrastText } from '../helpers';
10
+ import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground } from '../helpers';
13
11
  export var DRAWER_WIDTH = {
14
12
  Collapsed: 60,
15
13
  Expanded: 300
@@ -33,36 +31,11 @@ export var DrawerToggle = styled(IconButton, {
33
31
  })(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
32
  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
33
  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
- 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
- });
34
+ 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) { return getOffsetNavigationBackground(props.theme, 0.2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme, 0.3); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme, 0.3); });
57
35
  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); });
58
36
  export var StyledDivider = styled('div', {
59
37
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
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; });
38
+ })(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) { return getOffsetNavigationBackground(props.theme, 0.1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
66
39
  export var DrawerShadow = styled(Box, {
67
40
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
68
41
  })(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'
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.8.3",
12
+ "version": "1.8.4",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",