body.dashboard { .sidebar { position: fixed; left: $sidebar-normal-width; width: 0; height: 100%; margin-left: -$sidebar-normal-width; overflow-y: auto; background: $sidebar-background-color; @include box-shadow($sidebar-border-shadow); z-index: 1000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; .sidebar-inner { position: absolute; top: 0; width: $sidebar-normal-width; margin: 0; padding: 0; list-style: none; .profile { padding: 20px 10px; margin-bottom: 0; .dropdown-toggle { text-decoration: none; } .dropdown-menu { top: 108%; } .avatar { width: 60px; margin-right: 10px; img { border-radius: 50%; width: 50px; } } .username-wrapper { @extend .hidden-sm; } &.username { word-break: break-all; color: $sidebar-text-color; } } .quick-add-incident { @extend .text-center; padding: 10px; i { @extend .visible-sm; } span { @extend .hidden-sm; } } ul { clear: both; margin: 0; padding: 0; list-style: none; li { font-size: $sidebar-text-size; &.active { background: lighten($sidebar-background-color, 2%); a { padding-top: 14px; padding-bottom: 14px; border-top: 1px solid #BED3EA; border-bottom: 1px solid #BED3EA; color: $sidebar-text-active-color; } } a { display: block; padding: 15px; color: $sidebar-text-color; i { font-size: 18px; min-width: 17px; text-align: center; position: relative; top: 1px; } &:hover { text-decoration: none; } span { &.label { float: right; margin: 6px 0; &.label-info { background-color: $cachet-primary; } } } } &.sub-nav-item { a { padding-left: 40px; } } } } & > ul > li > a { & > span { @extend .hidden-sm; } } } .bottom-menu-sidebar { @extend .hidden-sm; position: fixed; bottom: 0; width: 230px; z-index: 999; ul > li { float: left; display: block; width: 33.333%; border-right: 1px solid #ddd; border-top: 1px solid #ddd; a { display: block; position: relative; text-align: center; padding: 6px 0; background: #fff; } } } } // Sidebar media queries @media (min-width: $screen-xs-max) { .sidebar { width: $sidebar-normal-width; } .wrapper.toggled .sidebar { width: 0; } } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { .sidebar { width: 80px; left: 150px; margin-left: -150px; .sidebar-inner { width: 80px; .profile .avatar img { width: 40px; } .quick-add-incident { .btn { padding: 3px 6px; } i { font-size: 20px; } } & > ul > li > a { text-align: center; & > i { font-size: 25px; } } } } } .sidebar-toggler { float: left; padding: 10px; position: relative; top: -15px; left: -5px; margin-right: 10px; cursor: pointer; i { font-size: 25px; } } .sub-sidebar { left: 0; top: 0; bottom: 0; position: fixed; margin-left: 228px; width: 22%; background: #fcfcfc; border-right: 1px solid #E8ECF1; h3 { margin: 0; text-align: center; font-size: 19px; padding: 30px 0; } ul.menu { list-style-type: none; padding: 0; margin: 0; li { a { color: #666; display: block; padding: 13px 30px; font-size: 15px; transition: all 0.2s linear; text-decoration: none; &.active { color: $cachet-secondary; } &:hover { color: $cachet-secondary; } } } } .sidebar-toggler { position: absolute; top: 3px; left: 20px; font-size: 36px; cursor: pointer; } + .content-wrapper { top: 0; position: relative; margin-left: 26%; padding-right: 40px !important; } } // Sub-sidebar media queries @media (max-width: $screen-xs-max) { .sub-sidebar { position: relative; margin-left: 0; width: 100%; + .content-wrapper { margin-left: 0; padding-left: 40px !important; width: 100%; } } } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { .sub-sidebar { margin-left: 80px; width: 25%; + .content-wrapper { padding-left: 45px !important; } } } }