initial commit
This commit is contained in:
ferdiansyah783
@@ -0,0 +1,112 @@
|
||||
// MUI Imports
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Type Imports
|
||||
import type { MenuItemStyles } from '@menu/types'
|
||||
|
||||
// Util Imports
|
||||
import { menuClasses } from '@menu/utils/menuClasses'
|
||||
|
||||
const menuItemStyles = (theme: Theme, iconClass: string): MenuItemStyles => ({
|
||||
root: ({ level }) => ({
|
||||
...(level === 0 && {
|
||||
borderRadius: 6
|
||||
}),
|
||||
[`&.${menuClasses.open} > .${menuClasses.button}`]: {
|
||||
backgroundColor: 'var(--mui-palette-action-selected) !important'
|
||||
},
|
||||
...(level === 0
|
||||
? {
|
||||
[`& .${menuClasses.button}.${menuClasses.active}`]: {
|
||||
color: 'var(--mui-palette-primary-contrastText) !important',
|
||||
background:
|
||||
theme.direction === 'ltr'
|
||||
? `linear-gradient(270deg,
|
||||
rgb(var(--mui-palette-primary-mainChannel) / 0.7) 0%,
|
||||
var(--mui-palette-primary-main) 100%) !important`
|
||||
: `linear-gradient(270deg,
|
||||
var(--mui-palette-primary-main) 100%,
|
||||
rgb(var(--mui-palette-primary-mainChannel) / 0.7) 100%) !important`
|
||||
}
|
||||
}
|
||||
: {
|
||||
[`&:not([aria-expanded]) > .${menuClasses.button}.${menuClasses.active}`]: {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
color: 'var(--mui-palette-primary-main)'
|
||||
},
|
||||
[`&[aria-expanded] > .${menuClasses.button}.${menuClasses.active}`]: {
|
||||
backgroundColor: 'var(--mui-palette-action-selected) !important'
|
||||
}
|
||||
}),
|
||||
[`&.${menuClasses.disabled} > .${menuClasses.button}`]: {
|
||||
color: 'var(--mui-palette-text-disabled)',
|
||||
'& *': {
|
||||
color: 'inherit'
|
||||
}
|
||||
}
|
||||
}),
|
||||
button: {
|
||||
borderRadius: 'var(--border-radius)',
|
||||
paddingInline: theme.spacing(4),
|
||||
'&:not(:has(.MuiChip-root))': {
|
||||
paddingBlock: theme.spacing(2)
|
||||
},
|
||||
'&:has(.MuiChip-root)': {
|
||||
paddingBlock: theme.spacing(1.75)
|
||||
},
|
||||
[`&:not(.${menuClasses.active}):hover, &:not(.${menuClasses.active}):focus-visible, &:not(.${menuClasses.active})[aria-expanded="true"]`]:
|
||||
{
|
||||
backgroundColor: 'var(--mui-palette-action-hover)'
|
||||
}
|
||||
},
|
||||
icon: ({ level }) => ({
|
||||
marginInlineEnd: theme.spacing(2),
|
||||
...(level < 2 ? { fontSize: '1.375rem' } : { fontSize: '0.75rem', color: 'var(--mui-palette-text-secondary)' }),
|
||||
'& > i, & > svg': {
|
||||
fontSize: 'inherit'
|
||||
},
|
||||
[`& .${iconClass}`]: {
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--mui-palette-text-secondary)',
|
||||
...(level === 1 && {
|
||||
marginInline: theme.spacing(1.25)
|
||||
}),
|
||||
[`.${menuClasses.active} &`]: {
|
||||
color: 'var(--mui-palette-primary-main)'
|
||||
}
|
||||
}
|
||||
}),
|
||||
prefix: {
|
||||
marginInlineEnd: theme.spacing(2)
|
||||
},
|
||||
suffix: {
|
||||
marginInlineStart: theme.spacing(2)
|
||||
},
|
||||
subMenuStyles: {
|
||||
zIndex: 'calc(var(--header-z-index) + 1)'
|
||||
},
|
||||
subMenuExpandIcon: {
|
||||
fontSize: '1.25rem',
|
||||
marginInlineStart: theme.spacing(2),
|
||||
'& i, & svg': {
|
||||
fontSize: 'inherit'
|
||||
}
|
||||
},
|
||||
subMenuContent: {
|
||||
borderRadius: 'var(--border-radius)',
|
||||
backgroundColor: 'var(--mui-palette-background-paper)',
|
||||
boxShadow: 'var(--mui-customShadows-lg)',
|
||||
'[data-skin="bordered"] &': {
|
||||
boxShadow: 'none',
|
||||
border: '1px solid var(--mui-palette-divider)'
|
||||
},
|
||||
'& > ul, & > div > ul': {
|
||||
padding: theme.spacing(2),
|
||||
'& > li:not(:last-child)': {
|
||||
marginBlockEnd: theme.spacing(0.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default menuItemStyles
|
||||
@@ -0,0 +1,12 @@
|
||||
// MUI Imports
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
const menuRootStyles = (theme: Theme) => {
|
||||
return {
|
||||
'& > ul > li:not(:last-of-type)': {
|
||||
marginInlineEnd: theme.spacing(1.5)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default menuRootStyles
|
||||
@@ -0,0 +1,110 @@
|
||||
// MUI imports
|
||||
import Box from '@mui/material/Box'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import type { BoxProps } from '@mui/material/Box'
|
||||
|
||||
const StepperWrapper = styled(Box)<BoxProps>(({ theme }) => {
|
||||
return {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
'& .MuiStepper-horizontal:not(.MuiStepper-alternativeLabel)': {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start'
|
||||
}
|
||||
},
|
||||
'& .MuiStep-root': {
|
||||
'& .MuiStepLabel-iconContainer:empty': {
|
||||
display: 'none'
|
||||
},
|
||||
'& .step-label': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
'& .MuiAvatar-root': {
|
||||
marginInlineEnd: theme.spacing(3)
|
||||
}
|
||||
},
|
||||
'& .step-number': {
|
||||
...theme.typography.h4,
|
||||
marginRight: theme.spacing(2),
|
||||
color: 'var(--mui-palette-text-primary) !important'
|
||||
},
|
||||
'&:not(:has(.step-subtitle)) .step-number': {
|
||||
...theme.typography.h6
|
||||
},
|
||||
'& .step-title': {
|
||||
...theme.typography.body1,
|
||||
fontWeight: 500,
|
||||
color: 'var(--mui-palette-text-primary)'
|
||||
},
|
||||
'& .step-subtitle': {
|
||||
...theme.typography.body2
|
||||
},
|
||||
'& .MuiStepLabel-root.Mui-disabled': {
|
||||
'& .step-number': {
|
||||
color: 'var(--mui-palette-text-disabled)'
|
||||
}
|
||||
},
|
||||
'& .Mui-error': {
|
||||
'& .MuiStepLabel-labelContainer, & .step-number, & .step-title, & .step-subtitle': {
|
||||
color: 'var(--mui-palette-error-main) !important'
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .MuiStepConnector-root': {
|
||||
'& .MuiStepConnector-line': {
|
||||
borderBlockStartWidth: 3,
|
||||
borderRadius: 3
|
||||
},
|
||||
'&.Mui-active, &.Mui-completed': {
|
||||
'& .MuiStepConnector-line': {
|
||||
borderColor: 'var(--mui-palette-primary-main)'
|
||||
}
|
||||
},
|
||||
'&.Mui-disabled .MuiStepConnector-line': {
|
||||
borderColor: 'var(--mui-palette-primary-lightOpacity)'
|
||||
}
|
||||
},
|
||||
'& .MuiStepper-alternativeLabel': {
|
||||
'& .MuiStepConnector-root': {
|
||||
top: 10
|
||||
},
|
||||
'& .MuiStepLabel-labelContainer': {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
'& > * + *': {
|
||||
marginTop: theme.spacing(1)
|
||||
}
|
||||
}
|
||||
},
|
||||
'& .MuiStepper-vertical': {
|
||||
'& .MuiStep-root': {
|
||||
'& .step-label': {
|
||||
justifyContent: 'flex-start'
|
||||
},
|
||||
'& .MuiStepContent-root': {
|
||||
borderInlineStartWidth: 3,
|
||||
marginLeft: theme.spacing(2.25),
|
||||
borderColor: 'var(--mui-palette-primary-main)'
|
||||
},
|
||||
'& .button-wrapper': {
|
||||
marginTop: theme.spacing(4)
|
||||
},
|
||||
'&.active + .MuiStepConnector-root .MuiStepConnector-line': {
|
||||
borderColor: 'var(--mui-palette-primary-main)'
|
||||
}
|
||||
},
|
||||
'& .MuiStepConnector-root': {
|
||||
marginLeft: theme.spacing(2.25),
|
||||
'& .MuiStepConnector-line': {
|
||||
borderBlockStartWidth: 0,
|
||||
borderInlineStartWidth: 3,
|
||||
borderRadius: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}) as typeof Box
|
||||
|
||||
export default StepperWrapper
|
||||
@@ -0,0 +1,96 @@
|
||||
.table {
|
||||
inline-size: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8125rem;
|
||||
white-space: nowrap;
|
||||
|
||||
[align='right'] > * {
|
||||
text-align: end;
|
||||
}
|
||||
[align='center'] > * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
thead {
|
||||
text-transform: uppercase;
|
||||
color: var(--mui-palette-text-primary);
|
||||
border-block-start: 1px solid var(--border-color);
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
font-size: 0.8125rem;
|
||||
letter-spacing: 0.2px;
|
||||
line-height: 1.8462;
|
||||
text-align: start;
|
||||
block-size: 56px;
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
&:first-of-type {
|
||||
&:not(:has(input[type='checkbox'])) {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1.5rem 1rem;
|
||||
}
|
||||
&:has(input[type='checkbox']) {
|
||||
padding-inline-start: 0.9375rem;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
color: var(--mui-palette-text-secondary);
|
||||
|
||||
th,
|
||||
td {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.4667;
|
||||
block-size: 50px;
|
||||
&:not(:first-of-type):not(:last-of-type) {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
&:first-of-type {
|
||||
&:not(:has(input[type='checkbox'])) {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1.5rem 1rem;
|
||||
}
|
||||
&:has(input[type='checkbox']) {
|
||||
inline-size: 51px;
|
||||
padding-inline-start: 0.9375rem;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
tr:not(:last-child) {
|
||||
border-block-end: 1px solid var(--border-color);
|
||||
}
|
||||
tr {
|
||||
border-block-start: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cellWithInput input {
|
||||
inline-size: 100%;
|
||||
background-color: transparent;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border-radius: var(--mui-shape-customBorderRadius-sm);
|
||||
padding-block: 6px;
|
||||
padding-inline: 10px;
|
||||
margin-inline: -10px;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid var(--mui-palette-primary-main);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
// MUI Imports
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Type Imports
|
||||
import type { MenuItemStyles } from '@menu/types'
|
||||
import type { VerticalNavState } from '@menu/contexts/verticalNavContext'
|
||||
|
||||
// Util Imports
|
||||
import { menuClasses } from '@menu/utils/menuClasses'
|
||||
|
||||
const menuItemStyles = (verticalNavOptions: VerticalNavState, theme: Theme): MenuItemStyles => {
|
||||
// Vars
|
||||
const { isCollapsed, isHovered, isPopoutWhenCollapsed, transitionDuration } = verticalNavOptions
|
||||
|
||||
const popoutCollapsed = isPopoutWhenCollapsed && isCollapsed
|
||||
const popoutExpanded = isPopoutWhenCollapsed && !isCollapsed
|
||||
const collapsedNotHovered = isCollapsed && !isHovered
|
||||
|
||||
return {
|
||||
root: ({ level }) => ({
|
||||
...(!isPopoutWhenCollapsed || popoutExpanded || (popoutCollapsed && level === 0)
|
||||
? {
|
||||
marginBlockStart: theme.spacing(1.5)
|
||||
}
|
||||
: {
|
||||
marginBlockStart: 0
|
||||
}),
|
||||
[`&.${menuClasses.subMenuRoot}.${menuClasses.open} > .${menuClasses.button}, &.${menuClasses.subMenuRoot} > .${menuClasses.button}.${menuClasses.active}`]:
|
||||
{
|
||||
backgroundColor: 'var(--mui-palette-action-selected) !important'
|
||||
},
|
||||
[`&.${menuClasses.disabled} > .${menuClasses.button}`]: {
|
||||
color: 'var(--mui-palette-text-disabled)',
|
||||
'& *': {
|
||||
color: 'inherit'
|
||||
}
|
||||
},
|
||||
[`&:not(.${menuClasses.subMenuRoot}) > .${menuClasses.button}.${menuClasses.active}`]: {
|
||||
...(popoutCollapsed && level > 0
|
||||
? {
|
||||
backgroundColor: 'var(--mui-palette-primary-lightOpacity)',
|
||||
color: 'var(--mui-palette-primary-main)',
|
||||
[`& .${menuClasses.icon}`]: {
|
||||
color: 'var(--mui-palette-primary-main)'
|
||||
}
|
||||
}
|
||||
: {
|
||||
color: 'var(--mui-palette-primary-contrastText)',
|
||||
background:
|
||||
theme.direction === 'ltr'
|
||||
? `linear-gradient(270deg,
|
||||
rgb(var(--mui-palette-primary-mainChannel) / 0.7) 0%,
|
||||
var(--mui-palette-primary-main) 100%) !important`
|
||||
: `linear-gradient(270deg,
|
||||
var(--mui-palette-primary-main) 100%,
|
||||
rgb(var(--mui-palette-primary-mainChannel) / 0.7) 100%) !important`,
|
||||
boxShadow: 'var(--mui-customShadows-primary-sm)',
|
||||
[`& .${menuClasses.icon}`]: {
|
||||
color: 'inherit'
|
||||
}
|
||||
})
|
||||
}
|
||||
}),
|
||||
button: ({ level, active }) => ({
|
||||
paddingBlock: '8px',
|
||||
paddingInline: '12px',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
...(!(isCollapsed && !isHovered) && {
|
||||
'&:has(.MuiChip-root)': {
|
||||
paddingBlock: theme.spacing(1.75)
|
||||
}
|
||||
}),
|
||||
|
||||
...((!isPopoutWhenCollapsed || popoutExpanded || (popoutCollapsed && level === 0)) && {
|
||||
borderRadius: 'var(--mui-shape-borderRadius)',
|
||||
transition: `padding-inline-start ${transitionDuration}ms ease-in-out`
|
||||
}),
|
||||
...(!active && {
|
||||
'&:hover, &:focus-visible': {
|
||||
backgroundColor: 'var(--mui-palette-action-hover)'
|
||||
},
|
||||
'&[aria-expanded="true"]': {
|
||||
backgroundColor: 'var(--mui-palette-action-selected)'
|
||||
}
|
||||
})
|
||||
}),
|
||||
icon: ({ level }) => ({
|
||||
transition: `margin-inline-end ${transitionDuration}ms ease-in-out`,
|
||||
...(level === 0 && {
|
||||
fontSize: '1.375rem'
|
||||
}),
|
||||
...(level > 0 && {
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--mui-palette-text-secondary)'
|
||||
}),
|
||||
...(level === 0 && {
|
||||
marginInlineEnd: theme.spacing(2)
|
||||
}),
|
||||
...(level > 0 && {
|
||||
marginInlineEnd: theme.spacing(3.5)
|
||||
}),
|
||||
...(level === 1 &&
|
||||
!popoutCollapsed && {
|
||||
marginInlineStart: theme.spacing(1.5)
|
||||
}),
|
||||
...(level > 1 && {
|
||||
marginInlineStart: theme.spacing((popoutCollapsed ? 0 : 1.5) + 2.5 * (level - 1))
|
||||
}),
|
||||
...(collapsedNotHovered && {
|
||||
marginInlineEnd: 0
|
||||
}),
|
||||
...(popoutCollapsed &&
|
||||
level > 0 && {
|
||||
marginInlineEnd: theme.spacing(2)
|
||||
}),
|
||||
'& > i, & > svg': {
|
||||
fontSize: 'inherit'
|
||||
}
|
||||
}),
|
||||
prefix: {
|
||||
marginInlineEnd: theme.spacing(2)
|
||||
},
|
||||
label: ({ level }) => ({
|
||||
...((!isPopoutWhenCollapsed || popoutExpanded || (popoutCollapsed && level === 0)) && {
|
||||
transition: `opacity ${transitionDuration}ms ease-in-out`,
|
||||
...(collapsedNotHovered && {
|
||||
opacity: 0
|
||||
})
|
||||
})
|
||||
}),
|
||||
suffix: {
|
||||
marginInlineStart: theme.spacing(2)
|
||||
},
|
||||
subMenuExpandIcon: {
|
||||
fontSize: '1.25rem',
|
||||
marginInlineStart: theme.spacing(2),
|
||||
'& i, & svg': {
|
||||
fontSize: 'inherit'
|
||||
}
|
||||
},
|
||||
subMenuContent: ({ level }) => ({
|
||||
zIndex: 'calc(var(--drawer-z-index) + 1)',
|
||||
borderRadius: 'var(--border-radius)',
|
||||
backgroundColor: popoutCollapsed ? 'var(--mui-palette-background-paper)' : 'transparent',
|
||||
...(popoutCollapsed && {
|
||||
'& > ul, & > div > ul': {
|
||||
[`& > li:not(:last-child), & > li > .${menuClasses.button}:not(:last-child)`]: {
|
||||
marginBlockEnd: `${theme.spacing(0.5)} !important`
|
||||
}
|
||||
},
|
||||
...(level === 0 && {
|
||||
boxShadow: 'var(--mui-customShadows-sm)',
|
||||
'[data-skin="bordered"] ~ [data-floating-ui-portal] &': {
|
||||
boxShadow: 'none',
|
||||
border: '1px solid var(--mui-palette-divider)'
|
||||
},
|
||||
[`& .${menuClasses.button}`]: {
|
||||
paddingInline: theme.spacing(4)
|
||||
},
|
||||
padding: theme.spacing(2)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default menuItemStyles
|
||||
@@ -0,0 +1,53 @@
|
||||
// MUI Imports
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Type Imports
|
||||
import type { VerticalNavState } from '@menu/contexts/verticalNavContext'
|
||||
import type { MenuProps } from '@menu/vertical-menu'
|
||||
|
||||
// Util Imports
|
||||
import { menuClasses } from '@menu/utils/menuClasses'
|
||||
|
||||
const menuSectionStyles = (verticalNavOptions: VerticalNavState, theme: Theme): MenuProps['menuSectionStyles'] => {
|
||||
// Vars
|
||||
const { isCollapsed, isHovered } = verticalNavOptions
|
||||
|
||||
const collapsedNotHovered = isCollapsed && !isHovered
|
||||
|
||||
return {
|
||||
root: {
|
||||
marginBlockStart: theme.spacing(0),
|
||||
[`& .${menuClasses.menuSectionContent}`]: {
|
||||
color: 'var(--mui-palette-text-disabled)',
|
||||
paddingInline: '12px !important',
|
||||
paddingBlock: `${theme.spacing(collapsedNotHovered ? 3.625 : 1.5)} !important`,
|
||||
marginBlockStart: theme.spacing(3.5),
|
||||
|
||||
'&:before': {
|
||||
content: '""',
|
||||
blockSize: 1,
|
||||
inlineSize: '1.375rem',
|
||||
backgroundColor: 'var(--mui-palette-text-disabled)'
|
||||
},
|
||||
...(!collapsedNotHovered && {
|
||||
'&:before': {
|
||||
content: 'none'
|
||||
}
|
||||
}),
|
||||
|
||||
[`& .${menuClasses.menuSectionLabel}`]: {
|
||||
flexGrow: 0,
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '13px',
|
||||
lineHeight: 1.38462,
|
||||
letterSpacing: '0.4px',
|
||||
...(collapsedNotHovered && {
|
||||
display: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default menuSectionStyles
|
||||
@@ -0,0 +1,59 @@
|
||||
// MUI Imports
|
||||
import type { Theme } from '@mui/material/styles'
|
||||
|
||||
// Type Imports
|
||||
import type { VerticalNavState } from '@menu/contexts/verticalNavContext'
|
||||
|
||||
// Util Imports
|
||||
import { menuClasses, verticalNavClasses } from '@menu/utils/menuClasses'
|
||||
|
||||
const navigationCustomStyles = (verticalNavOptions: VerticalNavState, theme: Theme) => {
|
||||
// Vars
|
||||
const { collapsedWidth, isCollapsed, isHovered, transitionDuration } = verticalNavOptions
|
||||
|
||||
const collapsedHovered = isCollapsed && isHovered
|
||||
const collapsedNotHovered = isCollapsed && !isHovered
|
||||
|
||||
return {
|
||||
color: 'var(--mui-palette-text-primary)',
|
||||
zIndex: 'var(--drawer-z-index) !important',
|
||||
[`& .${verticalNavClasses.header}`]: {
|
||||
paddingBlock: theme.spacing(5),
|
||||
paddingInline: theme.spacing(5.5, 4),
|
||||
|
||||
...(collapsedNotHovered && {
|
||||
paddingInline: theme.spacing(((collapsedWidth as number) - 35) / 8),
|
||||
'& a': {
|
||||
transform: `translateX(-${22 - ((collapsedWidth as number) - 29) / 2}px)`
|
||||
}
|
||||
}),
|
||||
'& a': {
|
||||
transition: `transform ${transitionDuration}ms ease`
|
||||
}
|
||||
},
|
||||
[`& .${verticalNavClasses.container}`]: {
|
||||
transition: theme.transitions.create(['inline-size', 'inset-inline-start', 'box-shadow'], {
|
||||
duration: transitionDuration,
|
||||
easing: 'ease-in-out'
|
||||
}),
|
||||
borderColor: 'transparent',
|
||||
boxShadow: 'var(--mui-customShadows-sm)',
|
||||
'[data-skin="bordered"] &': {
|
||||
boxShadow: 'none',
|
||||
...(collapsedHovered && {
|
||||
boxShadow: 'var(--mui-customShadows-sm)'
|
||||
}),
|
||||
borderColor: 'var(--mui-palette-divider)'
|
||||
}
|
||||
},
|
||||
[`& .${menuClasses.root}`]: {
|
||||
paddingBlock: theme.spacing(1),
|
||||
paddingInline: theme.spacing(3)
|
||||
},
|
||||
[`& .${verticalNavClasses.backdrop}`]: {
|
||||
backgroundColor: 'var(--backdrop-color)'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default navigationCustomStyles
|
||||
Reference in New Issue
Block a user