147 lines
3.4 KiB
SCSS
147 lines
3.4 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: 4.75rem;
|
|
position: fixed;
|
|
top: 0px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.bg-menu-theme {
|
|
// Menu header
|
|
.menu-header {
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline-start: 0;
|
|
top: 50%;
|
|
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: calc($menu-item-spacer + 0.0625rem);
|
|
}
|
|
&:not(:last-child) {
|
|
margin-right: calc($menu-item-spacer + 0.0625rem);
|
|
}
|
|
.menu-sub {
|
|
box-shadow: $menu-horizontal-menu-box-shadow;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.menu-item.active:before {
|
|
.layout-wrapper:not(.layout-horizontal) & {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: 0.25rem;
|
|
height: 2.6845rem;
|
|
border-radius: $border-radius 0 0 $border-radius;
|
|
@include rtl-style {
|
|
left: 0;
|
|
right: inherit;
|
|
border-radius: 0 $border-radius $border-radius 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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%;
|
|
@include rtl-style {
|
|
right: 1.4375rem;
|
|
left: inherit;
|
|
}
|
|
// For horizontal layout
|
|
.layout-horizontal & {
|
|
inset-inline-start: 1rem;
|
|
}
|
|
}
|
|
// ? 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;
|
|
@include rtl-style {
|
|
right: 1.1875rem;
|
|
left: inherit;
|
|
}
|
|
// For horizontal layout
|
|
.layout-horizontal & {
|
|
inset-inline-start: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
inset-inline-start: $menu-width - 1.05rem;
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
z-index: 3;
|
|
i {
|
|
width: 1.375rem;
|
|
height: 1.375rem;
|
|
transition: all $menu-animation-duration ease-in-out;
|
|
line-height: 1;
|
|
@include rtl-style {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
@include media-breakpoint-down(xl) {
|
|
display: none;
|
|
.layout-menu-expanded & {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-vertical {
|
|
.menu-item {
|
|
position: relative;
|
|
}
|
|
}
|