124 lines
2.8 KiB
SCSS
124 lines
2.8 KiB
SCSS
// ? Theme related styles common styles
|
|
|
|
@import '../_components/include';
|
|
|
|
// Space above detached navbar (vertical layout only)
|
|
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
|
|
content: '';
|
|
width: 100%;
|
|
height: 0.75rem;
|
|
position: fixed;
|
|
top: 0px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.bg-menu-theme {
|
|
// Menu header
|
|
.menu-header {
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1.1875rem;
|
|
width: 1rem;
|
|
height: 1px;
|
|
transition: all $menu-animation-duration ease-in-out;
|
|
}
|
|
}
|
|
|
|
.menu-inner .menu-item .menu-link {
|
|
.layout-wrapper:not(.layout-horizontal) & {
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
.menu-inner > .menu-item > .menu-link {
|
|
.layout-horizontal & {
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
|
|
.menu-inner > {
|
|
// Spacing and Box-shadow only for horizontal menu above lg screen
|
|
@include media-breakpoint-up(xl) {
|
|
.menu-item {
|
|
.layout-horizontal & {
|
|
margin: $menu-horizontal-link-padding-y 0;
|
|
&:not(:first-child) {
|
|
margin-left: $menu-item-spacer;
|
|
}
|
|
&:not(:last-child) {
|
|
margin-right: $menu-item-spacer;
|
|
}
|
|
.menu-sub {
|
|
box-shadow: $menu-horizontal-menu-box-shadow;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.menu-item.active:before {
|
|
.layout-wrapper:not(.layout-horizontal) & {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: 0.25rem;
|
|
height: 2.5rem;
|
|
border-radius: $border-radius 0 0 $border-radius;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sub menu item link bullet
|
|
.menu-sub > .menu-item > .menu-link:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 1.4375rem;
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 50%;
|
|
|
|
// For horizontal layout
|
|
.layout-horizontal & {
|
|
left: 1.3rem;
|
|
}
|
|
}
|
|
// ? Hide bullet from first child only as we display icon instead (horizontal)
|
|
.menu-horizontal-wrapper > .menu-inner > .menu-item > .menu-sub > .menu-item > .menu-link:before {
|
|
display: none;
|
|
}
|
|
// Sub menu item link active bullet
|
|
.menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
|
|
left: 1.1875rem;
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
|
|
// For horizontal layout
|
|
.layout-horizontal & {
|
|
left: 1.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-menu-hover .layout-menu {
|
|
box-shadow: $box-shadow-lg;
|
|
transition: all $menu-animation-duration ease-in-out;
|
|
}
|
|
|
|
.app-brand .layout-menu-toggle {
|
|
position: absolute;
|
|
left: $menu-width - 1.25rem;
|
|
border-radius: 50%;
|
|
|
|
i {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
transition: all $menu-animation-duration ease-in-out;
|
|
}
|
|
@include media-breakpoint-down(xl) {
|
|
display: none !important;
|
|
.layout-menu-expanded & {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|