AdminLTE/build/scss/_main-sidebar.scss
REJack 7e2ec226e0
some little scss changes
- added .anchor for anchors with offset while fixed navbar
- fixed .main-header border
- added sidebar color variations (colors)
- added pre & blockquote style for doc usage
- fixed brand-link width with .logo-switch
2019-07-14 15:21:20 +02:00

207 lines
3.1 KiB
SCSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Component: Main Sidebar
* -----------------------
*/
.main-sidebar {
height: 100vh;
overflow-y: hidden;
z-index: $zindex-main-sidebar;
}
.sidebar {
height: calc(100% - 4rem);
overflow-y: auto;
padding-bottom: $sidebar-padding-y;
padding-left: $sidebar-padding-x;
padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y;
}
// Sidebar user panel
.user-panel {
position: relative;
[class*='sidebar-dark'] & {
border-bottom: 1px solid lighten($dark, 12%);
}
[class*='sidebar-light'] & {
border-bottom: 1px solid $gray-300;
}
&,
.info {
overflow: hidden;
white-space: nowrap;
}
.image {
display: inline-block;
padding-left: $nav-link-padding-x - .2;
}
img {
height: auto;
width: $sidebar-user-image-width;
}
.info {
display: inline-block;
padding: 5px 5px 5px 10px;
}
.status,
.dropdown-menu {
font-size: $font-size-sm;
}
}
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-item {
> .nav-link {
margin-bottom: 0.2rem;
.right {
@include transition(transform $transition-fn $transition-speed);
}
}
}
.nav-link > p > .right {
position: absolute;
right: 1rem;
top: 12px;
&:nth-child(2) {
right: 2.5rem;
}
}
.menu-open {
> .nav-treeview {
display: block;
}
> .nav-link {
i.right {
@include rotate(-90deg);
}
}
}
// First Level
> .nav-item {
margin-bottom: 0;
.nav-icon {
text-align: center;
width: $sidebar-nav-icon-width;
font-size: 1.2rem;
margin-right: .2rem;
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
font-size: 1.1rem;
}
}
.float-right {
margin-top: 3px;
}
}
// Tree view menu
.nav-treeview {
display: none;
list-style: none;
padding: 0;
> .nav-item {
> .nav-link {
> .nav-icon {
width: $sidebar-nav-icon-width;
}
}
}
}
&.nav-child-indent { 
.nav-treeview{
padding-left: 1rem;
}
}
.nav-header {
font-size: .9rem;
padding: $nav-link-padding-y;
&:not(:first-of-type) {
padding: 1.7rem 1rem .5rem 1rem;
}
}
.nav-link p {
display: inline-block;
margin: 0;
}
}
#sidebar-overlay {
background-color: rgba($black, 0.1);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: $zindex-main-sidebar - 1;
@include media-breakpoint-down(md) {
.sidebar-open & {
display: block;
}
}
}
.sidebar-mini-md.sidebar-open {
#sidebar-overlay {
@include media-breakpoint-up(sm) {
display: none;
}
@include media-breakpoint-down(sm) {
display: block;
}
}
}
// Sidebar variants
@each $name, $color in $theme-colors {
.sidebar-dark-#{$name} {
@include skin-dark-sidebar($color)
}
.sidebar-light-#{$name} {
@include skin-light-sidebar($color)
}
}
@each $name, $color in $colors {
.sidebar-dark-#{$name} {
@include skin-dark-sidebar($color)
}
.sidebar-light-#{$name} {
@include skin-light-sidebar($color)
}
}