160 lines
4.2 KiB
SCSS
Vendored
160 lines
4.2 KiB
SCSS
Vendored
// Default Sidebar Style
|
|
.sidebar {
|
|
display: block;
|
|
position: fixed;
|
|
width: 100%;
|
|
max-width: $navbar-vertical-width;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: $zindex-general + 10;
|
|
transition: $navbar-vertical-transition;
|
|
background-color: $white;
|
|
@if($navbar-vertical-shadow-enable == true) {
|
|
box-shadow: $navbar-vertical-shadow;
|
|
}
|
|
.navbar-brand {
|
|
display: flex;
|
|
padding: 1.125rem $spacer;
|
|
svg{
|
|
color: $primary;
|
|
}
|
|
.logo-title {
|
|
margin-left: $spacer;
|
|
color: $primary;
|
|
margin-bottom: 0;
|
|
transition: $navbar-vertical-transition;
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
color: $dark;
|
|
}
|
|
}
|
|
.sidebar-header{
|
|
border-bottom: $border-width solid tint-color($border-color, 20%);
|
|
margin-bottom: $spacer * .75;
|
|
}
|
|
.sidebar-body {
|
|
// background: inherit;
|
|
padding: $spacer;
|
|
overflow: hidden;
|
|
}
|
|
.data-scrollbar {
|
|
max-height: 92vh;
|
|
}
|
|
&.sidebar-dark, &.sidebar-color{
|
|
.navbar-brand {
|
|
svg{
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-default {
|
|
.sidebar-list {
|
|
display: block;
|
|
position: static;
|
|
.navbar-nav {
|
|
.nav-item {
|
|
.nav-link:not(.disabled) {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
span {
|
|
flex: 1;
|
|
transition: $navbar-vertical-transition;
|
|
margin-left: $spacer;
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.nav-link{
|
|
&.static-item{
|
|
.default-icon{
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
i.sidenav-mini-icon {
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sidebar-body {
|
|
padding: 0;
|
|
padding-right: .75rem;
|
|
}
|
|
.navbar-nav {
|
|
.static-item {
|
|
.mini-icon {display: none;}
|
|
}
|
|
.nav-item {
|
|
transition: $navbar-vertical-transition;
|
|
position: relative;
|
|
margin-top: 2px;
|
|
.nav-link {
|
|
text-transform: capitalize;
|
|
padding: .625rem;
|
|
padding-left: 1rem;
|
|
&:not(.disabled) {
|
|
.right-icon {
|
|
transition: all 100ms ease-in-out;
|
|
}
|
|
color: $gray-600;
|
|
&.active,&[aria-expanded=true]{
|
|
@include sidebar-item-color-varients($white ,$primary);
|
|
.right-icon {
|
|
transition: all 100ms ease-in-out;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
&:hover:not(.active):not([aria-expanded=true]) {
|
|
@include sidebar-nav-item-hover($primary);
|
|
}
|
|
}
|
|
}
|
|
.sub-nav {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
// Default Sidebar Toggle Style 1
|
|
.sidebar-toggle {
|
|
position: absolute;
|
|
right: -12px;
|
|
top: 20px;
|
|
cursor: pointer;
|
|
background: $primary;
|
|
color: $white;
|
|
padding: 0.2rem;
|
|
@if $enable-rounded == true {
|
|
border-radius: $border-radius-lg;
|
|
}
|
|
@if $enable-shadows == true {
|
|
box-shadow: $component-active-shadow;
|
|
}
|
|
&:hover {
|
|
@if $enable-shadows == true {
|
|
box-shadow: $component-hover-shadow;
|
|
}
|
|
}
|
|
.icon {
|
|
display: flex;
|
|
transform: rotate(0);
|
|
transition: $navbar-vertical-transition;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(xl) {
|
|
.sidebar {
|
|
.sidebar-toggle {
|
|
right: 18px;
|
|
}
|
|
}
|
|
}
|