670 lines
14 KiB
SCSS
670 lines
14 KiB
SCSS
//
|
|
// Vertical navbar + Sidenav
|
|
//
|
|
|
|
@use "sass:math";
|
|
|
|
.navbar-vertical {
|
|
.navbar-brand > img,
|
|
.navbar-brand-img {
|
|
max-width: 100%;
|
|
max-height: 2rem;
|
|
}
|
|
// Navbar navigaton
|
|
.navbar-nav {
|
|
// Navbar link
|
|
.nav-link {
|
|
padding-left: $navbar-padding-x;
|
|
padding-right: $navbar-padding-x;
|
|
font-weight: $navbar-nav-link-font-weight;
|
|
color: $font-color;
|
|
// Icon
|
|
> i {
|
|
min-width: $navbar-icon-min-width;
|
|
font-size: 0.9375rem;
|
|
line-height: ($font-size-base * $line-height-base);
|
|
}
|
|
// Dropdown
|
|
.dropdown-menu {
|
|
border: none;
|
|
|
|
.dropdown-menu {
|
|
margin-left: $dropdown-item-padding-x * 0.5;
|
|
}
|
|
}
|
|
.icon {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.nav-sm {
|
|
.nav-link {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
}
|
|
// Navbar navigation
|
|
.navbar-nav .nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
// Navbar heading
|
|
.navbar-heading {
|
|
padding-top: $nav-link-padding-y;
|
|
padding-bottom: $nav-link-padding-y;
|
|
font-size: $font-size-xs;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
// Expanded navbar specific styles
|
|
&.navbar-expand {
|
|
@each $breakpoint, $dimension in $grid-breakpoints {
|
|
&-#{$breakpoint} {
|
|
@include media-breakpoint-up(#{$breakpoint}) {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
max-width: $navbar-vertical-open-width !important;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
z-index: 9999;
|
|
|
|
.navbar-collapse {
|
|
display: block;
|
|
overflow: auto;
|
|
height: $navbar-vertical-inner;
|
|
}
|
|
// Container
|
|
> [class*="container"] {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
min-height: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0; // Target IE 10 & 11
|
|
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
min-height: none;
|
|
height: 100%;
|
|
}
|
|
}
|
|
// Fixes the vertical navbar to the left
|
|
&.fixed-start {
|
|
left: 0;
|
|
}
|
|
// Fixed the vertical navbar to the right
|
|
&.fixed-end {
|
|
right: 0;
|
|
}
|
|
// Navbar navigation
|
|
.navbar-nav .nav-link {
|
|
padding-top: $navbar-vertical-nav-link-padding-y;
|
|
padding-bottom: $navbar-vertical-nav-link-padding-y;
|
|
margin: 0 $navbar-vertical-nav-link-padding-x;
|
|
|
|
.nav-link-text,
|
|
.sidenav-mini-icon,
|
|
.sidenav-normal,
|
|
i {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.navbar-nav .nav-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar-nav > .nav-item {
|
|
margin-top: 0.125rem;
|
|
|
|
.icon {
|
|
.ni {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
> .nav-link {
|
|
.icon {
|
|
svg {
|
|
.color-background {
|
|
fill: $dark-gradient-state;
|
|
}
|
|
|
|
.color-foreground {
|
|
fill: $dark-gradient;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.lavalamp-object {
|
|
width: calc(100% - 1rem) !important;
|
|
background: theme-color("primary");
|
|
color: color-yiq($primary);
|
|
margin-right: 0.5rem;
|
|
margin-left: 0.5rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
border-radius: $border-radius-sm;
|
|
}
|
|
// Second level
|
|
.navbar-nav .nav .nav-link {
|
|
padding-top: calc($navbar-vertical-nav-link-padding-y / 1.5);
|
|
padding-bottom: calc($navbar-vertical-nav-link-padding-y / 1.5);
|
|
padding-left: 15px;
|
|
|
|
> span.sidenav-normal {
|
|
transition: all 0.1s ease 0s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidenav {
|
|
// Define colors
|
|
@each $color, $value in $theme-colors {
|
|
&[data-color="#{$color}"] {
|
|
.navbar-nav > .nav-item > .nav-link.active {
|
|
@include gradient-directional(nth(#{$value}, 1) 0%, nth(#{$value}, -1) 100%, $deg: 310deg);
|
|
|
|
.icon i,
|
|
.nav-link-text {
|
|
color: $white !important;
|
|
}
|
|
|
|
&:after {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Sidenav + Main content transition
|
|
|
|
.main-content,
|
|
.sidenav {
|
|
transition: $transition-base;
|
|
}
|
|
//
|
|
// Sidenav
|
|
//
|
|
|
|
.sidenav {
|
|
z-index: 999;
|
|
|
|
.navbar-brand,
|
|
.navbar-heading {
|
|
display: block;
|
|
}
|
|
@include media-breakpoint-up(xl) {
|
|
&:hover {
|
|
max-width: $navbar-vertical-open-width;
|
|
}
|
|
|
|
.sidenav-toggler {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
&.fixed-start + .main-content {
|
|
margin-left: $navbar-vertical-open-width + 1.5;
|
|
}
|
|
|
|
&.fixed-end + .main-content {
|
|
margin-right: $navbar-vertical-open-width + 1.5;
|
|
}
|
|
}
|
|
|
|
.navbar-heading .docs-mini {
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.navbar-heading {
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
.navbar-brand {
|
|
padding: 1.5rem 2rem;
|
|
}
|
|
}
|
|
|
|
.sidenav-header {
|
|
height: $sidenav-header-width;
|
|
}
|
|
|
|
.sidenav-footer {
|
|
.card {
|
|
&.card-background {
|
|
&:after {
|
|
opacity: $sidenav-card-opacity;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Sidenav states
|
|
|
|
.g-sidenav-show {
|
|
.sidenav {
|
|
.nav-item .collapse {
|
|
height: auto;
|
|
@include transition($transition-base);
|
|
}
|
|
|
|
.nav-link-text {
|
|
transition: 0.3s ease;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
// Media fixes for iPhone 5 like resolutions
|
|
@include media-breakpoint-down(xl) {
|
|
.g-sidenav-show {
|
|
&.rtl {
|
|
.sidenav {
|
|
transform: translateX($navbar-vertical-open-width + 1.5);
|
|
}
|
|
}
|
|
|
|
&:not(.rtl) {
|
|
.sidenav {
|
|
transform: translateX(-($navbar-vertical-open-width + 1.5));
|
|
}
|
|
}
|
|
|
|
.sidenav {
|
|
&.fixed-start+.main-content {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
&.g-sidenav-pinned {
|
|
.sidenav {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-vertical {
|
|
&.bg-white {
|
|
box-shadow: $card-box-shadow;
|
|
|
|
.navbar-nav {
|
|
> .nav-item {
|
|
.nav-link {
|
|
&.active {
|
|
background-color: #f6f9fc;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav .nav-link.active {
|
|
font-weight: $font-weight-bold;
|
|
box-shadow: $card-box-shadow;
|
|
border-radius: $border-radius-md;
|
|
}
|
|
|
|
.navbar-nav > .nav-item .nav-link.active {
|
|
color: $dark;
|
|
background-color: $dark-sidebar-nav-active-bg;
|
|
}
|
|
}
|
|
|
|
.navbar-main {
|
|
transition: box-shadow $transition-base-time ease-in, background-color $transition-base-time ease-in;
|
|
|
|
&.fixed-top {
|
|
width: calc(100% - (#{$navbar-vertical-open-width} + #{$spacer * 1.5} * 3));
|
|
}
|
|
|
|
&.fixed-top + [class*="container"] {
|
|
margin-top: 7.1875rem !important;
|
|
}
|
|
}
|
|
// Navbar Vertical Extend
|
|
.navbar-vertical {
|
|
.navbar-nav .nav-link[data-bs-toggle="collapse"] {
|
|
&:after {
|
|
display: inline-block;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 700;
|
|
content: "\f107";
|
|
margin-left: auto;
|
|
color: rgba($dark-gradient-state,0.5);
|
|
@include transition($transition-base);
|
|
}
|
|
// Expanded
|
|
&[aria-expanded="true"] {
|
|
&:after {
|
|
color: $dark-gradient-state;
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-item {
|
|
.collapse,
|
|
.collapsing {
|
|
.nav {
|
|
@include transition($transition-base);
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
position: relative;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
color: rgba($dark-gradient-state,0.5);
|
|
margin-left: $navbar-vertical-collapse-margin-left;
|
|
|
|
&.active {
|
|
color: $dark-gradient-state;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
.nav-link {
|
|
color: $dark-gradient-state;
|
|
}
|
|
}
|
|
// Third level
|
|
.nav-item {
|
|
.nav-link {
|
|
&:before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.blur {
|
|
.navbar-nav > .nav-item {
|
|
.nav-link {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Styles for minimized sidenav
|
|
.navbar-vertical {
|
|
.navbar-brand {
|
|
.navbar-brand-img,
|
|
span {
|
|
@include transition($transition-base);
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
span.sidenav-mini-icon {
|
|
@include transition($transition-base);
|
|
text-align: center;
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.docs-info {
|
|
@include transition($transition-base);
|
|
}
|
|
|
|
&.bg-default {
|
|
.navbar-nav {
|
|
.nav-item {
|
|
.nav-link {
|
|
color: $white;
|
|
|
|
&[data-bs-toggle="collapse"]:after {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.collapse,
|
|
.collapsing {
|
|
.nav {
|
|
.nav-item {
|
|
.nav-link {
|
|
color: $white;
|
|
opacity: .8;
|
|
}
|
|
&.active {
|
|
.nav-link.active {
|
|
color: $white;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
h6 {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
.sidenav-header {
|
|
.navbar-brand {
|
|
color: $white;
|
|
}
|
|
}
|
|
.sidenav-footer {
|
|
h6 {
|
|
color: $white;
|
|
}
|
|
}
|
|
hr {
|
|
background-image: $hr-horizontal-bg-image-light !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.g-sidenav-show:not(.g-sidenav-hidden) {
|
|
.navbar-vertical {
|
|
.nav-item {
|
|
.nav-link {
|
|
span.sidenav-mini-icon {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.g-sidenav-hidden {
|
|
.sidenav-footer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
.g-sidenav-hidden {
|
|
&.rtl .main-content {
|
|
margin-right: $navbar-vertical-hidden-width !important;
|
|
|
|
.navbar-vertical {
|
|
&:hover {
|
|
max-width: $navbar-vertical-open-width !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.rtl {
|
|
.sidenav:hover {
|
|
& + .main-content {
|
|
margin-right: $navbar-vertical-open-width + 1.5 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-vertical {
|
|
max-width: $navbar-vertical-hidden-width !important;
|
|
|
|
&.fixed-start + .main-content {
|
|
margin-left: $navbar-vertical-hidden-width + 1.5;
|
|
}
|
|
|
|
.navbar-brand {
|
|
img {
|
|
width: auto !important;
|
|
}
|
|
|
|
span {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
.icon {
|
|
padding: 10px;
|
|
}
|
|
|
|
.nav-link-text,
|
|
.sidenav-normal {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.sidenav-mini-icon {
|
|
min-width: $navbar-icon-min-width;
|
|
margin-left: $navbar-icon-margin-left;
|
|
opacity: 1;
|
|
}
|
|
|
|
&[data-bs-toggle="collapse"]:after {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.collapse {
|
|
.nav {
|
|
margin-left: 0 !important;
|
|
padding-left: 0 !important;
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
margin-left: $navbar-vertical-nav-link-padding-x;
|
|
|
|
&:before {
|
|
content: none;
|
|
}
|
|
|
|
&[data-bs-toggle="collapse"]:after {
|
|
content: "\f107";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.card-background {
|
|
.icon-shape {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.docs-info {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
// Hover style on sidenav minimized
|
|
&:hover {
|
|
max-width: $navbar-vertical-open-width !important;
|
|
|
|
&.fixed-start + .main-content {
|
|
margin-left: $navbar-vertical-open-width + 1.5;
|
|
}
|
|
|
|
.navbar-brand {
|
|
span {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
.nav-link-text,
|
|
.sidenav-normal {
|
|
opacity: 1;
|
|
width: auto;
|
|
}
|
|
|
|
.sidenav-mini-icon {
|
|
opacity: 0;
|
|
width: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
&[data-bs-toggle="collapse"]:after {
|
|
content: "\f107";
|
|
}
|
|
}
|
|
|
|
.collapse {
|
|
.nav {
|
|
margin-left: 1.5rem !important;
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
margin-left: $navbar-vertical-collapse-margin-left;
|
|
|
|
&:before {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.collapse,
|
|
.collapsing {
|
|
.nav {
|
|
margin-left: 0 !important;
|
|
padding-left: 0 !important;
|
|
|
|
.nav-item {
|
|
.nav-link {
|
|
&:before {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card.card-background {
|
|
.icon-shape {
|
|
margin-bottom: 1rem !important;
|
|
}
|
|
|
|
.docs-info {
|
|
opacity: 1;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|