104 lines
2.6 KiB
SCSS
104 lines
2.6 KiB
SCSS
@use "@core-scss/template/placeholders" as *;
|
||
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||
@use "@configured-variables" as variables;
|
||
|
||
$divider-gap: 0.75rem;
|
||
|
||
// vertical nav app title
|
||
.layout-nav-type-vertical {
|
||
.layout-vertical-nav {
|
||
@include elevation.elevation(3);
|
||
|
||
// 👉 Nav header
|
||
.nav-header {
|
||
margin-block-start: variables.$vertical-nav-header-margin-top;
|
||
|
||
.app-title-wrapper {
|
||
h1 {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav-items {
|
||
padding-block-start: 0.25rem;
|
||
|
||
// ℹ️ Reduce with width of the thumb in vertical nav menu so we can clearly see active indicator
|
||
.ps__thumb-y {
|
||
inline-size: 0.125rem;
|
||
}
|
||
|
||
.ps__rail-y.ps--clicking .ps__thumb-y,
|
||
.ps__rail-y:focus > .ps__thumb-y,
|
||
.ps__rail-y:hover > .ps__thumb-y {
|
||
inline-size: 0.375rem;
|
||
}
|
||
}
|
||
|
||
// nav-section-title's line
|
||
.title-text {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
column-gap: $divider-gap;
|
||
|
||
&::before {
|
||
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
|
||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||
content: "";
|
||
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
|
||
}
|
||
}
|
||
|
||
// Active status indicator
|
||
.nav-link .router-link-exact-active,
|
||
.nav-group.active:not(.nav-group .nav-group) > :first-child {
|
||
&::after {
|
||
position: absolute;
|
||
background-color: rgb(var(--v-global-theme-primary));
|
||
block-size: 2.625rem;
|
||
border-end-start-radius: 0.375rem;
|
||
border-start-start-radius: 0.375rem;
|
||
content: "";
|
||
inline-size: 0.25rem;
|
||
inset-inline-end: - variables.$vertical-nav-horizontal-spacing;
|
||
}
|
||
}
|
||
|
||
// 👉 Vertical nav link
|
||
.nav-group {
|
||
.nav-link {
|
||
> .router-link-exact-active {
|
||
@extend %nav-link-nested-active;
|
||
|
||
// active status indicator removed
|
||
&::after {
|
||
content: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Active & open states for nav group label
|
||
&.open:not(.active),
|
||
.nav-group.active {
|
||
> :first-child {
|
||
&.nav-group-label {
|
||
svg,
|
||
.nav-item-title {
|
||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// nav-group active
|
||
&.active:not(.nav-group .nav-group) {
|
||
> :first-child {
|
||
@extend %vertical-nav-group-active;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|