rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Code Issues Actions Packages Releases Activity

Split CSS vars for padding values (#35921)

Browse Source 
* 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>
This commit is contained in:
Mark Otto 2022-03-01 12:52:00 -08:00 committed by GitHub
parent b59b1080e1
commit 9030f57db7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scss/_alert.scss
View File

@ -5,7 +5,8 @@
.alert { .alert {
// scss-docs-start alert-css-vars // scss-docs-start alert-css-vars
--#{$variable-prefix}alert-bg: transparent; --#{$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-margin-bottom: #{$alert-margin-bottom};
--#{$variable-prefix}alert-color: inherit; --#{$variable-prefix}alert-color: inherit;
--#{$variable-prefix}alert-border-color: transparent; --#{$variable-prefix}alert-border-color: transparent;
@ -14,7 +15,7 @@
// scss-docs-end alert-css-vars // scss-docs-end alert-css-vars
position: relative; 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); margin-bottom: var(--#{$variable-prefix}alert-margin-bottom);
color: var(--#{$variable-prefix}alert-color); color: var(--#{$variable-prefix}alert-color);
background-color: var(--#{$variable-prefix}alert-bg); background-color: var(--#{$variable-prefix}alert-bg);

5
scss/_badge.scss
View File

@ -7,7 +7,8 @@
.badge { .badge {
// scss-docs-start badge-css-vars // 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); @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
--#{$variable-prefix}badge-font-weight: #{$badge-font-weight}; --#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
--#{$variable-prefix}badge-color: #{$badge-color}; --#{$variable-prefix}badge-color: #{$badge-color};
@ -15,7 +16,7 @@
// scss-docs-end badge-css-vars // scss-docs-end badge-css-vars
display: inline-block; 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-size: var(--#{$variable-prefix}badge-font-size);
font-weight: var(--#{$variable-prefix}badge-font-weight); font-weight: var(--#{$variable-prefix}badge-font-weight);
line-height: 1; line-height: 1;

15
scss/_dropdown.scss
View File

@ -19,7 +19,8 @@
.dropdown-menu { .dropdown-menu {
// scss-docs-start dropdown-css-vars // scss-docs-start dropdown-css-vars
--#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width}; --#{$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}; --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size); @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
--#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before --#{$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-color: #{$dropdown-link-active-color};
--#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; --#{$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-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 // scss-docs-end dropdown-css-vars
position: absolute; position: absolute;
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
min-width: var(--#{$variable-prefix}dropdown-min-width); 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 margin: 0; // Override default margin of ul
@include font-size(var(#{$variable-prefix}dropdown-font-size)); @include font-size(var(#{$variable-prefix}dropdown-font-size));
color: var(--#{$variable-prefix}dropdown-color); color: var(--#{$variable-prefix}dropdown-color);
@ -158,7 +161,7 @@
.dropdown-item { .dropdown-item {
display: block; display: block;
width: 100%; // For `<button>`s 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; clear: both;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
color: var(--#{$variable-prefix}dropdown-link-color); color: var(--#{$variable-prefix}dropdown-link-color);
@ -211,7 +214,7 @@
// Dropdown section headers // Dropdown section headers
.dropdown-header { .dropdown-header {
display: block; 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 margin-bottom: 0; // for use with heading elements
@include font-size($font-size-sm); @include font-size($font-size-sm);
color: var(--#{$variable-prefix}dropdown-header-color); color: var(--#{$variable-prefix}dropdown-header-color);

6
scss/_variables.scss
View File

@ -1150,7 +1150,11 @@ $dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default; $dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !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-end dropdown-variables
// scss-docs-start dropdown-dark-variables // scss-docs-start dropdown-dark-variables