127 lines
3.9 KiB
CSS
127 lines
3.9 KiB
CSS
/* Variables */
|
|
.metronic {
|
|
--tw-sidebar-transition-duration: 0.3s;
|
|
--tw-sidebar-transition-timing: ease;
|
|
--tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktop');
|
|
--tw-sidebar-defualt-width: theme('custom.layouts.metronic.sidebar.width.desktop');
|
|
--tw-header-height: theme('custom.layouts.metronic.header.height.desktop');
|
|
}
|
|
|
|
@media (max-width: theme('screens.lg')) {
|
|
.metronic {
|
|
--tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.mobile');
|
|
--tw-header-height: theme('custom.layouts.metronic.header.height.mobile');
|
|
}
|
|
}
|
|
|
|
/* Base */
|
|
.metronic .header {
|
|
height: var(--tw-header-height);
|
|
}
|
|
|
|
.metronic .sidebar {
|
|
width: var(--tw-sidebar-width);
|
|
}
|
|
|
|
.metronic.header-fixed .wrapper {
|
|
padding-top: var(--tw-header-height);
|
|
}
|
|
|
|
/* Desktop mode */
|
|
@media (min-width: theme('screens.lg')) {
|
|
.metronic .sidebar {
|
|
width: var(--tw-sidebar-width);
|
|
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
|
|
}
|
|
|
|
.metronic .sidebar .sidebar-header {
|
|
height: var(--tw-header-height);
|
|
}
|
|
|
|
.metronic .sidebar .sidebar-wrapper {
|
|
width: var(--tw-sidebar-defualt-width);
|
|
}
|
|
|
|
.metronic .sidebar .sidebar-logo {
|
|
width: var(--tw-sidebar-defualt-width);
|
|
}
|
|
|
|
.metronic .sidebar .small-logo {
|
|
display: none;
|
|
}
|
|
|
|
.metronic.sidebar-fixed .wrapper {
|
|
padding-left: var(--tw-sidebar-width);
|
|
transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
|
|
}
|
|
|
|
.metronic.sidebar-fixed.header-fixed .header {
|
|
left: var(--tw-sidebar-width);
|
|
transition: left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
|
|
}
|
|
|
|
.metronic.sidebar-fixed.header-fixed .wrapper {
|
|
padding-top: var(--tw-header-height);
|
|
}
|
|
|
|
.metronic.sidebar-collapse {
|
|
--tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktopCollapse');
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar {
|
|
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar.animating {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:hover:not(.animating) {
|
|
width: var(--tw-sidebar-defualt-width);
|
|
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .default-logo {
|
|
display: none;
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .small-logo {
|
|
display: flex;
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title,
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow,
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge,
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title,
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow,
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge {
|
|
display: none;
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion {
|
|
display: none;
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading {
|
|
visibility: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before {
|
|
content: "...";
|
|
color: currentColor;
|
|
font-size: inherit;
|
|
position: absolute;
|
|
visibility: visible;
|
|
display: inline-block;
|
|
bottom: 50%;
|
|
left: 0;
|
|
margin-left: 0.225rem;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.metronic.sidebar-collapse .sidebar .sidebar-content {
|
|
overflow: hidden;
|
|
}
|
|
}
|