body.dashboard { .sidebar { display: table-cell; vertical-align: top; width: $sidebar-normal-width; background: $sidebar-background-color; @include box-shadow($sidebar-border-shadow); position: relative; z-index: 999; .sidebar-inner { position: relative; .profile { padding: 20px; margin-bottom: 0; .avatar { width: 70px; img { border-radius: 50%; width: 60px; } } .profile { &.username { word-break: break-all; color: $sidebar-text-color; } } } .quick-add-incident { @extend text-center; padding: 10px; } ul { clear: both; margin: 0; padding: 0; list-style: none; li { font-size: $sidebar-text-size; &:last-child { border-bottom: $sidebar-border-color; } &.active { background: lighten($sidebar-background-color, 2%); border-top: 1px solid #BED3EA; border-bottom: 1px solid #BED3EA; a { color: $sidebar-text-active-color; } } a { display: block; padding: 15px; border-top: $sidebar-border-color; color: $sidebar-text-color; i { font-size: 18px; min-width: 17px; text-align: center; position: relative; top: 1px; } &:hover { text-decoration: none; } } &.sub-nav-item { a { padding-left: 40px; } } } } } .bottom-menu-sidebar { 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 (max-width: $screen-sm-max) { .sidebar { width: 80px; .sidebar-inner { .profile .avatar img { width: 40px; } .profile .username { @extend .hidden-xs; @extend .hidden-sm; } .quick-add-incident { .btn { padding: 3px 6px; } i { @extend .visible-xs; @extend .visible-sm; font-size: 20px; } span { @extend .hidden-xs; @extend .hidden-sm; } } & > ul > li > a { text-align: center; & > i { font-size: 25px; } & > span { @extend .hidden-xs; @extend .hidden-sm; } } } .bottom-menu-sidebar { @extend .hidden-xs; @extend .hidden-sm; } } } // Sidebar media queries @media (max-width: $screen-sm-max) { .sidebar { @extend .hidden-xs; } } .sub-sidebar { left: 0; top: 0; bottom: 0; position: absolute; width: 22%; background: #fcfcfc; border-right: 1px solid #E8ECF1; h3 { margin: 0; text-align: center; font-size: 19px; padding: 22px 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; } } } } + .content-panel { top: 0; position: relative; width: 78%; margin-left: 22%; padding: 24px 50px; padding-bottom: 80px; } @media (max-width: $screen-sm-max) { } } }