diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss index 26eb7ab1a12..8faae893a51 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/generic/header.scss @@ -3,6 +3,8 @@ * */ header { + transition-duration: .3s; + &.navbar-empty { background: #FFF; border-bottom: 1px solid #EEE; @@ -67,28 +69,34 @@ header { float: left; height: $header-height; width: $sidebar_width; + transition-duration: .3s; a { float: left; height: $header-height; width: 100%; padding: ($header-height - 36 ) / 2 8px; - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 14px; - font-size: 18px; - line-height: $header-height - 14; - font-weight: normal; - } + overflow: hidden; img { width: 36px; height: 36px; float: left; } + + .gitlab-text-container { + width: 230px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 14px; + font-size: 18px; + line-height: $header-height - 14; + font-weight: normal; + } + } } &:hover { diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss index 65e06e14c73..add0d1b04ad 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/generic/sidebar.scss @@ -4,12 +4,14 @@ top: 0; left: 0; height: 100%; + transition-duration: .3s; } } .sidebar-wrapper { z-index: 99; background: $background-color; + transition-duration: .3s; } .content-wrapper { @@ -19,8 +21,10 @@ } .nav-sidebar { + transition-duration: .3s; margin: 0; list-style: none; + overflow: hidden; &.navbar-collapse { padding: 0px !important; @@ -34,9 +38,6 @@ @include border-radius(6px); } -.nav-sidebar li { -} - .nav-sidebar li { &.separate-item { padding-top: 10px; @@ -48,7 +49,7 @@ display: block; text-decoration: none; padding: 8px 15px; - font-size: 13px; + font-size: 14px; line-height: 20px; padding-left: 16px; @@ -79,6 +80,7 @@ @mixin expanded-sidebar { padding-left: $sidebar_width; + transition-duration: .3s; .sidebar-wrapper { width: $sidebar_width; @@ -89,6 +91,10 @@ top: $header-height; width: $sidebar_width; } + + .nav-sidebar li a{ + width: 230px; + } } .content-wrapper { @@ -98,6 +104,7 @@ @mixin folded-sidebar { padding-left: 50px; + transition-duration: .3s; .sidebar-wrapper { width: $sidebar_collapsed_width; @@ -109,10 +116,10 @@ width: $sidebar_collapsed_width; li a { - padding-left: 18px; font-size: 14px; padding: 8px 15px; - text-align: center; + text-align: left; + padding-left: 16px; & > span { @@ -144,6 +151,7 @@ height: 28px; text-align: center; line-height: 28px; + transition-duration: .3s; } .collapse-nav a:hover { @@ -180,8 +188,10 @@ bottom: 0; width: 100%; padding: 10px; + overflow: hidden; .username { margin-top: 5px; + width: 230px; } } diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 1403b86f377..b3cd7b0e37b 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -3,7 +3,8 @@ .header-logo = link_to root_path, class: 'home', title: 'Dashboard', id: 'js-shortcuts-home', data: {toggle: 'tooltip', placement: 'bottom'} do = brand_header_logo - %h3 GitLab + .gitlab-text-container + %h3 GitLab .header-content %button.navbar-toggle{type: 'button'} %span.sr-only Toggle navigation diff --git a/app/views/layouts/header/_public.html.haml b/app/views/layouts/header/_public.html.haml index 2c5884a5b6d..15c2e292be3 100644 --- a/app/views/layouts/header/_public.html.haml +++ b/app/views/layouts/header/_public.html.haml @@ -3,7 +3,8 @@ .header-logo = link_to explore_root_path, class: "home" do = brand_header_logo - %h3 GitLab + .gitlab-text-container + %h3 GitLab .header-content - unless current_controller?('sessions') .pull-right