.page-with-sidebar { padding: $header-height 0 25px; transition: padding $sidebar-transition-duration; &.page-sidebar-pinned { .sidebar-wrapper { box-shadow: none; } } .sidebar-wrapper { position: fixed; top: 0; bottom: 0; left: 0; height: 100%; width: 0; overflow: hidden; transition: width $sidebar-transition-duration; box-shadow: 2px 0 16px 0 $black-transparent; } } .sidebar-wrapper { z-index: 1000; background: $background-color; .nicescroll-rails-hr { // TODO: Figure out why nicescroll doesn't hide horizontal bar display: none!important; } } .content-wrapper { width: 100%; transition: padding $sidebar-transition-duration; .container-fluid { background: #fff; padding: 0 $gl-padding; &.container-blank { background: none; padding: 0; border: none; } } } .nav-sidebar { position: absolute; top: 50px; bottom: 0; width: $sidebar_width; overflow-y: auto; overflow-x: hidden; &.navbar-collapse { padding: 0 !important; } li { &.separate-item { padding-top: 10px; margin-top: 10px; } .icon-container { width: 34px; display: inline-block; text-align: center; } a { padding: 7px $gl-sidebar-padding; font-size: $gl-font-size; line-height: 24px; display: block; text-decoration: none; font-weight: normal; outline: none; &:hover, &:active, &:focus { text-decoration: none; } i { font-size: 16px; } i, svg { margin-right: 13px; } } } .count { float: right; padding: 0 8px; border-radius: 6px; } } .sidebar-action-buttons { width: $sidebar_width; position: absolute; top: 0; left: 0; min-height: 50px; padding: 5px 0; font-size: 18px; line-height: 30px; .toggle-nav-collapse { left: 0; } .pin-nav-btn { right: 0; display: none; @media (min-width: $sidebar-breakpoint) { display: block; } .fa { transition: transform .15s; .page-sidebar-pinned & { transform: rotate(90deg); } } } } .nav-header-btn { padding: 10px $gl-sidebar-padding; color: inherit; transition-duration: .3s; position: absolute; top: 0; cursor: pointer; &:hover, &:focus { color: $white-light; text-decoration: none; } } .page-sidebar-expanded { .sidebar-wrapper { width: $sidebar_width; } } .page-sidebar-pinned { .content-wrapper, .layout-nav { @media (min-width: $sidebar-breakpoint) { padding-left: $sidebar_width; } } } header.header-sidebar-pinned { @media (min-width: $sidebar-breakpoint) { padding-left: ($sidebar_width + $gl-padding); .side-nav-toggle { display: none; } .header-content { padding-left: 0; } } } .right-sidebar-collapsed { padding-right: 0; @media (min-width: $screen-sm-min) { padding-right: $sidebar_collapsed_width; } .sidebar-collapsed-icon { cursor: pointer; .btn { background-color: $gray-light; } } } .right-sidebar-expanded { padding-right: 0; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { &:not(.build-sidebar) { padding-right: $sidebar_collapsed_width; } } @media (min-width: $screen-md-min) { padding-right: $gutter_width; } &.with-overlay { padding-right: $sidebar_collapsed_width; } } .right-sidebar { border-left: 1px solid $border-color; }