mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 21:40:48 +00:00
Code Issues Projects Releases Wiki Activity

Convert list group to CSS variables (#35862)

Browse Source 
* Convert list-group to CSS vars

* bundlewatch
This commit is contained in:
Mark Otto 2022-03-22 10:02:12 -07:00 committed by GitHub
parent 9e73b6a13c
commit 0eb808015f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.bundlewatch.config.json
View File

@ -26,11 +26,11 @@
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "26.85 kB"
"maxSize": "26.9 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "24.9 kB"
"maxSize": "25 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",

51
scss/_list-group.scss
View File

@ -3,13 +3,28 @@
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// scss-docs-start list-group-css-vars
--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
// scss-docs-end list-group-css-vars
display: flex;
flex-direction: column;
// No need to set list-style: none; since .list-group-item is block level
padding-left: 0; // reset padding because ul and ol
margin-bottom: 0;
@include border-radius($list-group-border-radius);
@include border-radius(var(--#{$prefix}list-group-border-radius));
}
.list-group-numbered {
@ -55,11 +70,11 @@
.list-group-item {
position: relative;
display: block;
padding: $list-group-item-padding-y $list-group-item-padding-x;
color: $list-group-color;
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
color: var(--#{$prefix}list-group-color);
text-decoration: if($link-decoration == none, null, none);
background-color: $list-group-bg;
border: $list-group-border-width solid $list-group-border-color;
background-color: var(--#{$prefix}list-group-bg);
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
&:first-child {
@include border-top-radius(inherit);
@ -71,25 +86,25 @@
&.disabled,
&:disabled {
color: $list-group-disabled-color;
color: var(--#{$prefix}list-group-disabled-color);
pointer-events: none;
background-color: $list-group-disabled-bg;
background-color: var(--#{$prefix}list-group-disabled-bg);
}
// Include both here for `<a>`s and `<button>`s
&.active {
z-index: 2; // Place active items above their siblings for proper border styling
color: $list-group-active-color;
background-color: $list-group-active-bg;
border-color: $list-group-active-border-color;
color: var(--#{$prefix}list-group-active-color);
background-color: var(--#{$prefix}list-group-active-bg);
border-color: var(--#{$prefix}list-group-active-border-color);
}
& + & {
border-top-width: 0;
&.active {
margin-top: calc($list-group-border-width * -1); // stylelint-disable-line function-disallowed-list
border-top-width: $list-group-border-width;
margin-top: calc(var(--#{$prefix}list-group-border-width) * -1); // stylelint-disable-line function-disallowed-list
border-top-width: var(--#{$prefix}list-group-border-width);
}
}
}
@ -107,12 +122,12 @@
> .list-group-item {
&:first-child {
@include border-bottom-start-radius($list-group-border-radius);
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
@include border-top-end-radius(0);
}
&:last-child {
@include border-top-end-radius($list-group-border-radius);
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
@include border-bottom-start-radius(0);
}
@ -121,12 +136,12 @@
}
+ .list-group-item {
border-top-width: $list-group-border-width;
border-top-width: var(--#{$prefix}list-group-border-width);
border-left-width: 0;
&.active {
margin-left: calc($list-group-border-width * -1); // stylelint-disable-line function-disallowed-list
border-left-width: $list-group-border-width;
margin-left: calc(var(--#{$prefix}list-group-border-width) * -1); // stylelint-disable-line function-disallowed-list
border-left-width: var(--#{$prefix}list-group-border-width);
}
}
}
@ -144,7 +159,7 @@
@include border-radius(0);
> .list-group-item {
border-width: 0 0 $list-group-border-width;
border-width: 0 0 var(--#{$prefix}list-group-border-width);
&:last-child {
border-bottom-width: 0;

10
site/content/docs/5.1/components/list-group.md
View File

@ -296,10 +296,18 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
</div>
{{< /example >}}
## Sass
## CSS
### Variables
{{< added-in "5.2.0" >}}
As part of Bootstrap's evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
{{< scss-docs name="list-group-css-vars" file="scss/_list-group.scss" >}}
### Sass variables
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
### Mixins