Adjust dropdown item and header padding to comply with design specs

4 files changed, 9 insertions, 20 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index f3c44f32d6f..f273eb9533d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -176,9 +176,9 @@
   display: block;
   font-weight: $gl-font-weight-normal;
   position: relative;
-  padding: 8px 16px;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   color: $gl-text-color;
-  line-height: normal;
+  line-height: $gl-btn-line-height;
   white-space: normal;
   overflow: hidden;
   text-align: left;
@@ -319,8 +319,8 @@
   .dropdown-header {
     color: $gl-text-color-secondary;
     font-size: 13px;
-    line-height: 22px;
-    padding: 8px 16px;
+    line-height: $gl-line-height;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
 
   &.capitalize-header .dropdown-header {
@@ -329,13 +329,8 @@
 
   .dropdown-bold-header {
     font-weight: $gl-font-weight-bold;
-    line-height: 22px;
-    padding: 0 16px;
-  }
-
-  .separator + .dropdown-header,
-  .separator + .dropdown-bold-header {
-    padding-top: 10px;
+    line-height: $gl-line-height;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   }
 
   .unclickable {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index c0cda29e239..78009f43ced 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -127,12 +127,6 @@
     }
   }
 
-  li.dropdown-bold-header {
-    color: $gl-text-color-secondary;
-    font-size: 12px;
-    padding: 0 16px;
-  }
-
   .navbar-collapse {
     flex: 0 0 auto;
     border-top: 0;
@@ -541,7 +535,7 @@
     left: auto;
 
     li.current-user {
-      padding: 5px 18px;
+      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 
       .user-name {
         display: block;
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index b12305f635d..5ca76bb6c5a 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -21,6 +21,8 @@ $danger: $red-500;
 $zindex-modal-backdrop: 1040;
 $nav-divider-margin-y: ($grid-size / 2);
 $dropdown-divider-bg: $theme-gray-200;
+$dropdown-item-padding-y: 8px;
+$dropdown-item-padding-x: 12px;
 $popover-max-width: 300px;
 $popover-border-width: 1px;
 $popover-border-color: $border-color;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 04151b1cd59..149c3254d84 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -101,8 +101,6 @@ input[type='checkbox']:hover {
     .dropdown-header {
       // Necessary because glDropdown doesn't support a second style of headers
       font-weight: $gl-font-weight-bold;
-      // .dropdown-menu li has 1px side padding
-      padding: $gl-padding-8 17px;
       color: $gl-text-color;
       font-size: $gl-font-size;
       line-height: 16px;