diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-03-01 23:52:00 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-01 23:52:00 +0300 |
commit | 9030f57db7762a48c813881ef22a99e6cebe99ce (patch) | |
tree | 18bdc0950330fbf9ba38ca2289d06956cec3919e | |
parent | b59b1080e1324394331b670fb102343ecb8736f8 (diff) |
Split CSS vars for padding values (#35921)
* 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 <julien.deramond@orange.com>
* Deprecate dropdown-header-padding var
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
-rw-r--r-- | scss/_alert.scss | 5 | ||||
-rw-r--r-- | scss/_badge.scss | 5 | ||||
-rw-r--r-- | scss/_dropdown.scss | 15 | ||||
-rw-r--r-- | 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 `<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); @@ -211,7 +214,7 @@ // Dropdown section headers .dropdown-header { display: block; - padding: var(--#{$variable-prefix}dropdown-header-padding); + padding: var(--#{$variable-prefix}dropdown-header-padding-y) var(--#{$variable-prefix}dropdown-header-padding-x); margin-bottom: 0; // for use with heading elements @include font-size($font-size-sm); color: var(--#{$variable-prefix}dropdown-header-color); diff --git a/scss/_variables.scss b/scss/_variables.scss index ce41aa945b..11b5cffacb 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1150,7 +1150,11 @@ $dropdown-item-padding-y: $spacer * .25 !default; $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; -$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +$dropdown-header-padding-x: $dropdown-item-padding-x !default; +$dropdown-header-padding-y: $dropdown-padding-y !default; +// fusv-disable +$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0 +// fusv-enable // scss-docs-end dropdown-variables // scss-docs-start dropdown-dark-variables |