.page-with-sidebar { .sidebar-wrapper { position: fixed; top: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; left: 0; height: 100%; transition-duration: .3s; } } .sidebar-wrapper { z-index: 99; background: $background-color; transition-duration: .3s; } .content-wrapper { width: 100%; padding: 20px; background: #FFF; } .nav-sidebar { margin-top: 29 + $header-height; margin-bottom: 50px; transition-duration: .3s; list-style: none; overflow: hidden; &.navbar-collapse { padding: 0px !important; } li { width: $sidebar_width; &.separate-item { padding-top: 10px; margin-top: 10px; } a { padding: 8px 15px; font-size: 13px; line-height: 18px; color: $gray; display: block; text-decoration: none; padding-left: 16px; &:hover { text-decoration: none; } &:active, &:focus { text-decoration: none; } i { width: 20px; color: $gray-light; margin-right: 23px; } .count { float: right; background: #eee; padding: 0px 8px; @include border-radius(6px); } } } } .sidebar-subnav { margin-left: 0px; padding-left: 0px; li { list-style: none; } } @mixin expanded-sidebar { padding-left: $sidebar_width; transition-duration: .3s; .sidebar-wrapper { width: $sidebar_width; .nav-sidebar { width: $sidebar_width; } .nav-sidebar li a{ width: 230px; &.back-link { i { visibility: hidden; } } } } } @mixin folded-sidebar { padding-left: 50px; transition-duration: .3s; .sidebar-wrapper { width: $sidebar_collapsed_width; .nav-sidebar { width: $sidebar_collapsed_width; li a { padding-left: 16px; } } .collapse-nav a { left: 0px; width: $sidebar_collapsed_width; } .sidebar-user { width: $sidebar_collapsed_width; } } } .collapse-nav a { position: fixed; top: $header-height; left: 198px; font-size: 13px; background: transparent; width: 32px; height: 28px; text-align: center; line-height: 28px; transition-duration: .3s; } .collapse-nav a:hover { text-decoration: none; background: #f2f6f7; } @media (max-width: $screen-md-max) { .page-sidebar-collapsed { @include folded-sidebar; } .page-sidebar-expanded { @include folded-sidebar; } .collapse-nav { display: none; } } @media(min-width: $screen-md-max) { .page-sidebar-collapsed { @include folded-sidebar; } .page-sidebar-expanded { @include expanded-sidebar; } } .sidebar-user { position: fixed; bottom: 0; width: $sidebar_width; padding: 10px; overflow: hidden; transition-duration: .3s; .username { margin-top: 5px; width: $sidebar_width - 2 * 10px; } } .sidebar-wrapper { .header-logo { border-bottom: 1px solid transparent; float: left; height: $header-height; width: $sidebar_width; overflow: hidden; transition-duration: .3s; a { float: left; height: $header-height; width: 100%; padding: ($header-height - 36 ) / 2 8px; overflow: hidden; img { width: 36px; height: 36px; float: left; } .gitlab-text-container { width: 230px; h3 { width: 158px; float: left; margin: 0; margin-left: 14px; font-size: 18px; line-height: $header-height - 14; font-weight: normal; } } } &:hover { background-color: #EEE; } } }