poptong
83b162d2bd
Some checks failed
🚀 Deploy - Demo / deployment (push) Has been cancelled
- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경 - Nginx 리버스 프록시 설정 파일 추가 - 배포 가이드 업데이트
111 lines
3.0 KiB
SCSS
111 lines
3.0 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(4);
|
||
|
||
// 👉 Nav header
|
||
.nav-header {
|
||
margin-block-start: variables.$vertical-nav-header-margin-top;
|
||
|
||
.app-title-wrapper {
|
||
h1 {
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Small screen nav header actions button removed
|
||
@media (max-width: 1279px) {
|
||
&:not(.visible) {
|
||
.header-action {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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.open .nav-group-label:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
|
||
&::after {
|
||
position: absolute;
|
||
background-color: rgb(var(--v-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-group-children-wrapper .nav-group-children .nav-link {
|
||
.nav-item-icon {
|
||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||
}
|
||
|
||
.router-link-exact-active {
|
||
@extend %nav-link-nested-active;
|
||
|
||
&:hover::before {
|
||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||
}
|
||
|
||
// active status indicator removed
|
||
&::after {
|
||
content: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Active & open states for nav group label
|
||
&.open {
|
||
/* stylelint-disable-next-line no-descending-specificity */
|
||
.nav-group-label {
|
||
&:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
|
||
@extend %vertical-nav-group-active;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|