From b0f4ad2e06b6862bcb8bfcee35db5ada95d06bc7 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Mon, 10 Dec 2018 14:29:16 +0000
Subject: [PATCH] Adjust dropdown item and header padding to comply with design
 specs

---
 app/assets/stylesheets/framework/dropdowns.scss | 17 ++++++-----------
 app/assets/stylesheets/framework/header.scss    |  8 +-------
 .../framework/variables_overrides.scss          |  2 ++
 app/assets/stylesheets/pages/search.scss        |  2 --
 .../unreleased/winh-dropdown-item-padding.yml   |  5 +++++
 5 files changed, 14 insertions(+), 20 deletions(-)
 create mode 100644 changelogs/unreleased/winh-dropdown-item-padding.yml

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;
diff --git a/changelogs/unreleased/winh-dropdown-item-padding.yml b/changelogs/unreleased/winh-dropdown-item-padding.yml
new file mode 100644
index 00000000000..9f18abba9d1
--- /dev/null
+++ b/changelogs/unreleased/winh-dropdown-item-padding.yml
@@ -0,0 +1,5 @@
+---
+title: Adjust dropdown item and header padding to comply with design specs
+merge_request: 23552
+author:
+type: changed