From 9030f57db7762a48c813881ef22a99e6cebe99ce Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 1 Mar 2022 12:52:00 -0800 Subject: [PATCH] Split CSS vars for padding values (#35921) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Split CSS vars for padding values Make these few components consistent with where we're heading with other components. Had to add some new Sass variables to handle the dropdown-header element, but not a huge deal. This ensures we can drop the combined variable in v6 when we're ready. * Update scss/_dropdown.scss Co-authored-by: Julien Déramond * Deprecate dropdown-header-padding var Co-authored-by: Gaël Poupard Co-authored-by: Julien Déramond --- scss/_alert.scss | 5 +++-- scss/_badge.scss | 5 +++-- scss/_dropdown.scss | 15 +++++++++------ scss/_variables.scss | 6 +++++- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/scss/_alert.scss b/scss/_alert.scss index c8275e8d29..316f3c5ad0 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -5,7 +5,8 @@ .alert { // scss-docs-start alert-css-vars --#{$variable-prefix}alert-bg: transparent; - --#{$variable-prefix}alert-padding: #{$alert-padding-y $alert-padding-x}; + --#{$variable-prefix}alert-padding-x: #{$alert-padding-x}; + --#{$variable-prefix}alert-padding-y: #{$alert-padding-y}; --#{$variable-prefix}alert-margin-bottom: #{$alert-margin-bottom}; --#{$variable-prefix}alert-color: inherit; --#{$variable-prefix}alert-border-color: transparent; @@ -14,7 +15,7 @@ // scss-docs-end alert-css-vars position: relative; - padding: var(--#{$variable-prefix}alert-padding); + padding: var(--#{$variable-prefix}alert-padding-y) var(--#{$variable-prefix}alert-padding-x); margin-bottom: var(--#{$variable-prefix}alert-margin-bottom); color: var(--#{$variable-prefix}alert-color); background-color: var(--#{$variable-prefix}alert-bg); diff --git a/scss/_badge.scss b/scss/_badge.scss index c097535b1d..3e9fef14c7 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -7,7 +7,8 @@ .badge { // scss-docs-start badge-css-vars - --#{$variable-prefix}badge-padding: #{$badge-padding-y $badge-padding-x}; + --#{$variable-prefix}badge-padding-x: #{$badge-padding-x}; + --#{$variable-prefix}badge-padding-y: #{$badge-padding-y}; @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size); --#{$variable-prefix}badge-font-weight: #{$badge-font-weight}; --#{$variable-prefix}badge-color: #{$badge-color}; @@ -15,7 +16,7 @@ // scss-docs-end badge-css-vars display: inline-block; - padding: var(--#{$variable-prefix}badge-padding); + padding: var(--#{$variable-prefix}badge-padding-y) var(--#{$variable-prefix}badge-padding-x); font-size: var(--#{$variable-prefix}badge-font-size); font-weight: var(--#{$variable-prefix}badge-font-weight); line-height: 1; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 1695de90c6..6f8acc1aa4 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -19,7 +19,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 @@ -37,16 +38,18 @@ --#{$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}; + --#{$variable-prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; + --#{$variable-prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; // scss-docs-end dropdown-css-vars position: absolute; 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(var(#{$variable-prefix}dropdown-font-size)); color: var(--#{$variable-prefix}dropdown-color); @@ -158,7 +161,7 @@ .dropdown-item { display: block; width: 100%; // For `