diff options
Diffstat (limited to 'app/assets/stylesheets/framework/sidebar.scss')
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 357 |
1 files changed, 131 insertions, 226 deletions
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index be05db58c40..a0bb3427af0 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -1,50 +1,31 @@ .page-with-sidebar { padding-top: $header-height; - transition-duration: .3s; + transition: padding $sidebar-transition-duration; .sidebar-wrapper { position: fixed; top: 0; bottom: 0; - overflow-y: auto; - overflow-x: hidden; left: 0; height: 100%; - transition-duration: .3s; - } - - .gitlab-text-container-link { - z-index: 1; - position: absolute; - left: 0; - } - - #logo { - z-index: 2; - position: absolute; - width: 58px; - cursor: pointer; - } - - &.right-sidebar-expanded { - /* Extra small devices (phones, less than 768px) */ - /* No media query since this is the default in Bootstrap */ - padding-right: 0; - /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { - padding-right: $gutter_width; - } - + overflow: hidden; + transition: width $sidebar-transition-duration; } } .sidebar-wrapper { - z-index: 999; + z-index: 1000; background: $background-color; + + .nicescroll-rails-hr { + // TODO: Figure out why nicescroll doesn't hide horizontal bar + display: none!important; + } } .content-wrapper { width: 100%; + transition: padding $sidebar-transition-duration; .container-fluid { background: #fff; @@ -58,270 +39,194 @@ } } -.sidebar-wrapper { - .header-logo { - border-bottom: 1px solid transparent; - float: left; - height: $header-height; - width: $sidebar_width; - position: fixed; - z-index: 999; - overflow: hidden; - transition-duration: .3s; - - a { - float: left; - height: $header-height; - width: 100%; - padding: 11px 0 11px 22px; - overflow: hidden; - outline: none; - transition-duration: .3s; - - img { - width: 36px; - height: 36px; - } - - #tanuki-logo, img { - float: left; - } - - .gitlab-text-container { - width: 230px; - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 50px; - font-size: 19px; - line-height: 41px; - font-weight: normal; - } - } - } - - &:hover { - background-color: #eee; - } - } - - .sidebar-user { - padding: 9px 22px; - position: fixed; - bottom: 40px; - width: $sidebar_width; - overflow: hidden; - transition-duration: .3s; +.sidebar-user { + padding: 15px; + position: absolute; + left: 0; + bottom: 0; + width: $sidebar_width; + overflow: hidden; + font-size: 16px; + line-height: 36px; + transition: width $sidebar-transition-duration, padding $sidebar-transition-duration; - .username { - margin-left: 10px; - width: $sidebar_width - 2 * 10px; - font-size: 16px; - line-height: 34px; - } + @media (min-width: $sidebar-breakpoint) { + bottom: 50px; } } +.nav-sidebar { + position: absolute; + top: 50px; + bottom: 65px; + width: $sidebar_width; + overflow-y: auto; + overflow-x: hidden; -.tanuki-shape { - transition: all 0.8s; - - &:hover, &.highlight { - fill: rgb(255, 255, 255); - transition: all 0.1s; + @media (min-width: $sidebar-breakpoint) { + bottom: 115px; } -} - - -.nav-sidebar { - margin-top: 14 + $header-height; - margin-bottom: 100px; - transition-duration: .3s; - list-style: none; - overflow: hidden; &.navbar-collapse { padding: 0 !important; } li { - width: $sidebar_width; - &.separate-item { padding-top: 10px; margin-top: 10px; } + .icon-container { + width: 34px; + display: inline-block; + text-align: center; + } + a { - padding: 7px 15px; + padding: 7px 15px 7px 12px; font-size: $gl-font-size; line-height: 24px; - color: $gray; display: block; text-decoration: none; - padding-left: 23px; font-weight: normal; outline: none; + white-space: nowrap; - &:hover { - text-decoration: none; - } - - &:active, &:focus { + &:hover, + &:active, + &:focus { text-decoration: none; } i { - width: 16px; - color: $gray-light; - margin-right: 13px; - } - - .count { - float: right; - background: #eee; - padding: 0 8px; - @include border-radius(6px); + font-size: 16px; } - &.back-link i { - transition-duration: .3s; + i, + svg { + margin-right: 13px; } } } -} - -.sidebar-subnav { - margin-left: 0; - padding-left: 0; - li { - list-style: none; + .count { + float: right; + padding: 0 8px; + @include border-radius(6px); } } -@mixin expanded-sidebar { - padding-left: $sidebar_collapsed_width; +.toggle-nav-collapse { + width: $sidebar_width; + position: absolute; + top: 0; + left: 0; + min-height: 50px; + padding: 5px 0; + font-size: 18px; + line-height: 30px; +} - @media (min-width: $screen-md-min) { - padding-left: $sidebar_width; - } +.nav-header-btn { + padding: 10px 5px; + color: inherit; + transition-duration: .3s; - &.right-sidebar-collapsed { - /* Extra small devices (phones, less than 768px) */ - padding-right: 0; - /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { - padding-right: $sidebar_collapsed_width; - } + &:hover, + &:focus { + color: $white-light; + text-decoration: none; } +} - .sidebar-wrapper { - width: $sidebar_width; +.pin-nav-btn { + display: none; + position: absolute; + left: 0; + bottom: 0; + height: 50px; + width: $sidebar_width; + line-height: 30px; - .nav-sidebar { - width: $sidebar_width; - } + @media (min-width: $sidebar-breakpoint) { + display: block; + } - .nav-sidebar li a{ - width: 230px; + .fa { + transition: transform .15s; + } - &.back-link { - i { - opacity: 0; - } - } + &.is-active { + .fa { + transform: rotate(90deg); } } } -@mixin collapsed-sidebar { - padding-left: $sidebar_collapsed_width; +.page-sidebar-collapsed { + padding-left: 0; - &.right-sidebar-collapsed { - /* Extra small devices (phones, less than 768px) */ - padding-right: 0; - /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { - padding-right: $sidebar_collapsed_width; - } + .sidebar-wrapper { + width: 0; } +} +.page-sidebar-expanded { .sidebar-wrapper { - width: $sidebar_collapsed_width; - - .header-logo { - width: $sidebar_collapsed_width; - - a { - padding-left: ($sidebar_collapsed_width - 36) / 2; + width: $sidebar_width; + } +} - .gitlab-text-container { - display: none; - } - } +.page-sidebar-pinned { + .content-wrapper, + .layout-nav { + @media (min-width: $sidebar-breakpoint) { + padding-left: $sidebar_width; } + } +} - .nav-sidebar { - width: $sidebar_collapsed_width; - - li { - width: auto; - - a { - span { - display: none; - } - } - } - } +header.header-pinned-nav { + @media (min-width: $sidebar-breakpoint) { + padding-left: ($sidebar_width + $gl-padding); - .collapse-nav a { - width: $sidebar_collapsed_width; + .side-nav-toggle { + display: none; } - .sidebar-user { - padding-left: ($sidebar_collapsed_width - 36) / 2; - width: $sidebar_collapsed_width; - - .username { - display: none; - } + .header-content { + padding-left: 0; } } } -.collapse-nav a { - width: $sidebar_width; - position: fixed; - bottom: 0; - left: 0; - font-size: 13px; - background: transparent; - height: 40px; - text-align: center; - line-height: 40px; - transition-duration: .3s; - outline: none; -} +.right-sidebar-collapsed { + padding-right: 0; -.collapse-nav a:hover { - text-decoration: none; - background: #f2f6f7; + @media (min-width: $screen-sm-min) { + padding-right: $sidebar_collapsed_width; + } + + .sidebar-collapsed-icon { + cursor: pointer; + } } -.page-sidebar-collapsed { - /* Extra small devices (phones, less than 768px) */ - @include collapsed-sidebar; +.right-sidebar-expanded { padding-right: 0; - /* Small devices (tablets, 768px and up) */ - @media (min-width: $screen-sm-min) { - @include collapsed-sidebar; + + @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + &:not(.build-sidebar) { + padding-right: $sidebar_collapsed_width; + } } -} -.page-sidebar-expanded { - @include expanded-sidebar; + @media (min-width: $screen-md-min) { + padding-right: $gutter_width; + } + + &.with-overlay { + padding-right: $sidebar_collapsed_width; + } } |