diff options
Diffstat (limited to 'app/assets/stylesheets/new_sidebar.scss')
| -rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 129 |
1 files changed, 79 insertions, 50 deletions
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index 76dccd2df56..4bbd30056a9 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -26,7 +26,7 @@ $new-sidebar-collapsed-width: 50px; // Override position: absolute .right-sidebar { position: fixed; - height: calc(100% - #{$header-height}); + height: calc(100% - #{$new-navbar-height}); } .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { @@ -45,8 +45,7 @@ $new-sidebar-collapsed-width: 50px; margin-right: 2px; a { - border-bottom: 1px solid $border-color; - font-weight: 600; + font-weight: $gl-font-weight-bold; display: flex; align-items: center; padding: 10px 16px 10px 10px; @@ -70,8 +69,7 @@ $new-sidebar-collapsed-width: 50px; background-color: $white-light; } - .project-title, - .group-title { + .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; } @@ -94,21 +92,33 @@ $new-sidebar-collapsed-width: 50px; z-index: 400; width: $new-sidebar-width; transition: left $sidebar-transition-duration; - top: $header-height; + top: $new-navbar-height; bottom: 0; left: 0; - overflow: auto; background-color: $gray-normal; box-shadow: inset -2px 0 0 $border-color; + transform: translate3d(0, 0, 0); &.sidebar-icons-only { width: $new-sidebar-collapsed-width; - .nav-item-name, - .badge, - .project-title { + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + + .badge:not(.fly-out-badge), + .sidebar-context-title, + .nav-item-name { display: none; } + + .sidebar-top-level-items > li > a { + min-height: 44px; + } + + .fly-out-top-item { + display: block; + } } &.nav-sidebar-expanded { @@ -145,15 +155,8 @@ $new-sidebar-collapsed-width: 50px; } li.active { - box-shadow: inset 4px 0 0 $active-border; - > a { - color: $active-color; - font-weight: 700; - } - - svg { - fill: $active-color; + font-weight: $gl-font-weight-bold; } } @@ -170,10 +173,20 @@ $new-sidebar-collapsed-width: 50px; width: 16px; } } + + .fly-out-top-item { + display: none; + } +} + +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; } .with-performance-bar .nav-sidebar { - top: $header-height + $performance-bar-height; + top: $new-navbar-height + $performance-bar-height; } .sidebar-sub-level-items { @@ -182,7 +195,7 @@ $new-sidebar-collapsed-width: 50px; > li { a { - padding: 8px 16px 8px 50px; + padding: 8px 16px 8px 40px; &:hover, &:focus { @@ -215,12 +228,15 @@ $new-sidebar-collapsed-width: 50px; &:hover { color: $gl-text-color; + + svg { + fill: $gl-text-color; + } } } - &:not(.active) { + &.is-showing-fly-out { > a { - margin-left: 1px; margin-right: 2px; } @@ -229,9 +245,9 @@ $new-sidebar-collapsed-width: 50px; position: fixed; top: 0; left: $new-sidebar-width; - width: 150px; + min-width: 150px; margin-top: -1px; - padding: 8px 1px; + padding: 4px 1px; background-color: $white-light; box-shadow: 2px 1px 3px $dropdown-shadow-color; border: 1px solid $gray-darker; @@ -243,31 +259,27 @@ $new-sidebar-collapsed-width: 50px; position: absolute; top: -30px; bottom: -30px; - left: 0; + left: -10px; right: -30px; z-index: -1; } - &::after { - content: ""; - position: absolute; - top: 44px; - left: -30px; - right: 35px; - bottom: 0; - height: 100%; - max-height: 150px; - z-index: -1; - transform: skew(33deg); - } - &.is-above { margin-top: 1px; + } + + .divider { + height: 1px; + margin: 4px -1px; + padding: 0; + background-color: $dropdown-divider-color; + } - &::after { - top: auto; - bottom: 44px; - transform: skew(-30deg); + > .active { + box-shadow: none; + + > a { + background-color: transparent; } } @@ -294,20 +306,20 @@ $new-sidebar-collapsed-width: 50px; > a { margin-left: 4px; + padding-left: 12px; } .badge { color: $active-color; - font-weight: 600; + font-weight: $gl-font-weight-bold; } - .sidebar-sub-level-items { + .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } } - &:not(.active):hover > a, - > a:hover, + &.active > a:hover, &.is-over > a { background-color: $white-light; } @@ -354,7 +366,7 @@ $new-sidebar-collapsed-width: 50px; .sidebar-icons-only { .context-header { - height: 60px; + height: 61px; a { padding: 10px 4px; @@ -381,6 +393,10 @@ $new-sidebar-collapsed-width: 50px; } } + .nav-icon-container { + margin-right: 0; + } + .toggle-sidebar-button { width: $new-sidebar-collapsed-width - 2px; padding: 16px 18px; @@ -396,6 +412,19 @@ $new-sidebar-collapsed-width: 50px; } } +.fly-out-top-item { + > a { + display: flex; + } + + .fly-out-badge { + margin-left: 8px; + } +} + +.fly-out-top-item-name { + flex: 1; +} // Mobile nav @@ -445,7 +474,7 @@ $new-sidebar-collapsed-width: 50px; // Make issue boards full-height now that sub-nav is gone .boards-list { - height: calc(100vh - #{$header-height}); + height: calc(100vh - #{$new-navbar-height}); @media (min-width: $screen-sm-min) { height: 475px; // Needed for PhantomJS @@ -456,7 +485,7 @@ $new-sidebar-collapsed-width: 50px; } .with-performance-bar .boards-list { - height: calc(100vh - #{$header-height} - #{$performance-bar-height}); + height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height}); } @@ -465,6 +494,6 @@ $new-sidebar-collapsed-width: 50px; border-bottom-color: $active-border; .badge { - font-weight: 600; + font-weight: $gl-font-weight-bold; } } |