initial commit
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
%default-layout-horizontal-nav-navbar-and-nav-container {
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
|
||||
// If navbar is contained => Squeeze navbar content on scroll
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
// Horizontal nav item icon (Including sub nav items)
|
||||
%horizontal-nav-item-icon {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
// Horizontal nav item styles (including nested)
|
||||
%horizontal-nav-item {
|
||||
padding-block: 0.485rem;
|
||||
padding-inline: 0.7rem;
|
||||
}
|
||||
|
||||
%nav-group-label-and-nav-link-style {
|
||||
border-radius: 0.375rem;
|
||||
margin-block: 0.25rem;
|
||||
margin-inline: 0.5rem;
|
||||
}
|
||||
|
||||
// Active styles for sub nav link
|
||||
%horizontal-nav-sub-nav-link-active {
|
||||
background: rgba(var(--v-theme-primary), 0.08);
|
||||
|
||||
// Remove before pseudo element from sub nav link to avoid overlapping with active state
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Popper content styles
|
||||
%horizontal-nav-popper-content {
|
||||
@include mixins.elevation(6);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@forward "nav";
|
||||
@forward "vertical-nav";
|
||||
@forward "horizontal-nav";
|
||||
@forward "default-layout-vertical-nav";
|
||||
@forward "default-layout-horizontal-nav";
|
||||
@@ -0,0 +1,16 @@
|
||||
// ℹ️ This is common style that needs to be applied to both navs
|
||||
%nav {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
/*
|
||||
Active nav link styles for horizontal & vertical nav
|
||||
|
||||
For horizontal nav it will be only applied to top level nav items
|
||||
For vertical nav it will be only applied to nav links (not nav groups)
|
||||
*/
|
||||
%nav-link-active {
|
||||
background: linear-gradient(72.47deg, rgb(var(--v-global-theme-primary)) 22.16%, rgba(var(--v-global-theme-primary), 0.7) 76.47%) !important;
|
||||
box-shadow: 0 2px 6px rgba(var(--v-global-theme-primary), 0.48);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// Common styles for nav item icon styles
|
||||
// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
|
||||
%vertical-nav-items-icon {
|
||||
font-size: 1.375rem;
|
||||
margin-inline-start: 0.3rem;
|
||||
}
|
||||
|
||||
// Vertical nav item badge styles
|
||||
%vertical-nav-item-badge {
|
||||
line-height: 1rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
// This is same as `%vertical-nav-item` except section title is excluded
|
||||
%vertical-nav-item-interactive {
|
||||
block-size: 2.375rem;
|
||||
margin-block-end: 0.25rem;
|
||||
}
|
||||
Reference in New Issue
Block a user