Split up padding CSS vars for dropdowns

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index ad45b84a9fd12f1dc291590dfb580a81695b2847..9a1ab1dba89b82322991a8c9e848b16e34e553e0 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -17,7 +17,8 @@
 .dropdown-menu {
   // scss-docs-start dropdown-css-vars
   --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
   --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
   @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
   --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
@@ -35,7 +36,8 @@
   --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
   --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
   --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$variable-prefix}dropdown-item-padding: #{$dropdown-item-padding-y $dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
   --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
   --#{$variable-prefix}dropdown-header-padding: #{$dropdown-header-padding};
   // scss-docs-end dropdown-css-vars
@@ -44,7 +46,7 @@
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: var(--#{$variable-prefix}dropdown-min-width);
-  padding: var(--#{$variable-prefix}dropdown-padding);
+  padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
   margin: 0; // Override default margin of ul
   @include font-size($dropdown-font-size);
   color: var(--#{$variable-prefix}dropdown-color);
@@ -156,7 +158,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$variable-prefix}dropdown-item-padding);
+  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
   clear: both;
   font-weight: $font-weight-normal;
   color: var(--#{$variable-prefix}dropdown-link-color);