Fix UI bugsremove-old-nav-styles

3 files changed, 15 insertions, 12 deletions

diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index 662bedc2ad0..c3badec59c9 100644
--- a/app/assets/stylesheets/framework/new-nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -306,8 +306,6 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
-  padding-top: $gl-padding;
-  padding-bottom: $gl-padding;
   align-items: center;
   border-bottom: 1px solid $border-color;
 }
@@ -319,6 +317,11 @@ header.navbar-gitlab-new {
   align-self: center;
   color: $gl-text-color-secondary;
 
+  @media (max-width: $screen-xs-max) {
+    padding-left: 17px;
+    border-left: 1px solid $gl-text-color-quaternary;
+  }
+
   .avatar-tile {
     margin-right: 4px;
     border: 1px solid $border-color;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a3da9fd44e8..d89f2c33edc 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -6,6 +6,7 @@ $gutter_width: 290px;
 $gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
+$default-transition-duration: .15s;
 
 /*
  * Color schema
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index d1c26c4647f..2fa710a05b5 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -39,7 +39,7 @@ input[type="checkbox"]:hover {
     height: 32px;
     border: 0;
     border-radius: $border-radius-default;
-    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
+    transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration;
 
     &:hover {
       box-shadow: none;
@@ -51,9 +51,8 @@ input[type="checkbox"]:hover {
     margin: -4px 4px -4px -4px;
     line-height: 25px;
     padding: 4px 8px;
-    border-radius: 2px 0 0 2px;
-    height: 32px;
-    transition: border-color ease-in-out 0.15s;
+    border-radius: $border-radius-default 0 0 $border-radius-default;
+    transition: border-color ease-in-out $default-transition-duration;
   }
 
   .search-input {
@@ -65,11 +64,11 @@ input[type="checkbox"]:hover {
     width: 98%;
     color: $white-light;
     background: none;
-    transition: color ease-in-out 0.15s;
+    transition: color ease-in-out $default-transition-duration;
   }
 
   .search-input::placeholder {
-    transition: color ease-in-out 0.15s;
+    transition: color ease-in-out $default-transition-duration;
   }
 
   .search-input-container {
@@ -93,7 +92,7 @@ input[type="checkbox"]:hover {
 
     .search-icon {
       @extend .fa-search;
-      transition: color 0.15s;
+      transition: color $default-transition-duration;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
@@ -146,13 +145,13 @@ input[type="checkbox"]:hover {
         .search-icon,
         .clear-icon {
           color: $gl-text-color-tertiary;
-          transition: color ease-in-out 0.15s;
+          transition: color ease-in-out $default-transition-duration;
         }
       }
 
       .search-input {
         color: $gl-text-color;
-        transition: color ease-in-out 0.15s;
+        transition: color ease-in-out $default-transition-duration;
       }
 
       .search-input::placeholder {
@@ -161,7 +160,7 @@ input[type="checkbox"]:hover {
     }
 
     .location-badge {
-      transition: all 0.15s;
+      transition: all $default-transition-duration;
       background-color: $nav-badge-bg;
       border-color: $border-color;
     }