diff options
Diffstat (limited to 'app/assets/stylesheets/new_sidebar.scss')
| -rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss new file mode 100644 index 00000000000..54f3e8d882c --- /dev/null +++ b/app/assets/stylesheets/new_sidebar.scss @@ -0,0 +1,289 @@ +@import "framework/variables"; +@import 'framework/tw_bootstrap_variables'; +@import "bootstrap/variables"; + +$active-background: rgba(0, 0, 0, .04); +$active-border: $indigo-500; +$active-color: $indigo-700; +$active-hover-background: $active-background; +$active-hover-color: $gl-text-color; +$inactive-badge-background: rgba(0, 0, 0, .08); +$hover-background: $indigo-700; +$hover-color: $white-light; +$inactive-color: $gl-text-color-secondary; +$new-sidebar-width: 220px; + +.page-with-new-sidebar { + @media (min-width: $screen-sm-min) { + padding-left: $new-sidebar-width; + } + + // Override position: absolute + .right-sidebar { + position: fixed; + height: 100%; + } + + .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { + padding: 10px 0 15px; + } +} + +.context-header { + position: relative; + + a { + border-bottom: 1px solid $border-color; + font-weight: 600; + display: flex; + align-items: center; + padding: 10px 16px 10px 10px; + color: $gl-text-color; + + @media (max-width: $screen-xs-max) { + padding-right: 30px; + } + + &:hover { + background-color: $hover-background; + color: $hover-color; + border-color: $hover-background; + + .avatar-container { + border-color: transparent; + } + + .settings-avatar { + background-color: $indigo-500; + + i { + color: $hover-color; + } + } + } + } + + .avatar-container { + flex: 0 0 40px; + background-color: $white-light; + } + + .project-title, + .group-title { + overflow: hidden; + text-overflow: ellipsis; + } + + + &:hover { + .close-nav-button { + color: $white-light; + } + } + + .close-nav-button { + display: none; + position: absolute; + top: 0; + right: 0; + height: 100%; + background-color: transparent; + border: 0; + padding: 0 10px; + + @media (max-width: $screen-xs-max) { + display: block; + } + + &:hover { + color: $gl-text-color; + } + } +} + +.settings-avatar { + background-color: $white-light; + + i { + font-size: 20px; + width: 100%; + color: $gl-text-color-secondary; + text-align: center; + align-self: center; + } +} + +.nav-sidebar { + position: fixed; + z-index: 400; + width: $new-sidebar-width; + transition: left $sidebar-transition-duration; + top: $header-height; + bottom: 0; + left: 0; + overflow: auto; + background-color: $gray-normal; + box-shadow: inset -2px 0 0 $border-color; + + &.nav-sidebar-expanded { + left: 0; + } + + a { + transition: none; + text-decoration: none; + } + + ul { + padding-left: 0; + list-style: none; + } + + li { + white-space: nowrap; + + a { + display: block; + padding: 12px 16px; + color: $inactive-color; + } + } + + li.active { + box-shadow: inset 4px 0 0 $active-border; + + > a { + color: $active-color; + font-weight: 700; + } + } + + @media (max-width: $screen-xs-max) { + left: (-$new-sidebar-width); + } +} + +.with-performance-bar .nav-sidebar { + top: $header-height + $performance-bar-height; +} + +.sidebar-sub-level-items { + display: none; + padding-bottom: 8px; + + > li { + a { + padding: 8px 16px 8px 24px; + + &:hover, + &:focus { + background: $active-hover-background; + color: $active-hover-color; + } + } + + &.active { + a { + &, + &:hover, + &:focus { + background: $active-background; + color: $active-color; + } + } + } + } +} + +.sidebar-top-level-items { + > li { + .badge { + float: right; + background-color: $inactive-badge-background; + color: $inactive-color; + } + + &.active { + background: $active-background; + + .badge { + color: $active-color; + font-weight: 600; + } + + .sidebar-sub-level-items { + display: block; + } + } + + > a:hover { + background-color: $hover-background; + color: $hover-color; + + .badge { + background-color: $indigo-500; + color: $hover-color; + } + } + } +} + +.toggle-mobile-nav { + display: none; + background-color: transparent; + border: 0; + padding: 6px 16px; + margin: 0 16px 0 -15px; + height: 46px; + border-right: 1px solid $gl-text-color-quaternary; + + i { + font-size: 20px; + color: $gl-text-color-secondary; + } + + @media (max-width: $screen-xs-max) { + display: inline-block; + } +} + +.mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: 300; + } +} + + +// Make issue boards full-height now that sub-nav is gone + +.boards-list { + height: calc(100vh - #{$header-height}); + + @media (min-width: $screen-sm-min) { + height: 475px; // Needed for PhantomJS + // scss-lint:disable DuplicateProperty + height: calc(100vh - 180px); + // scss-lint:enable DuplicateProperty + } +} + +.with-performance-bar .boards-list { + height: calc(100vh - #{$header-height} - #{$performance-bar-height}); +} + + +// Change color of all horizontal tabs to match the new indigo color +.nav-links li.active a { + border-bottom-color: $active-border; + + .badge { + font-weight: 600; + } +} |