diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-03-22 20:02:12 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-22 20:02:12 +0300 |
commit | 0eb808015fc84effc69300a0a7e6884eb924abc9 (patch) | |
tree | 652e62c925ef6bb0071a8c94c07db8d51ee66f53 | |
parent | 9e73b6a13c1cd4cc27d1456319a3d63630e91e2f (diff) |
Convert list group to CSS variables (#35862)
* Convert list-group to CSS vars
* bundlewatch
-rw-r--r-- | .bundlewatch.config.json | 4 | ||||
-rw-r--r-- | scss/_list-group.scss | 51 | ||||
-rw-r--r-- | site/content/docs/5.1/components/list-group.md | 10 |
3 files changed, 44 insertions, 21 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 1344e1ef2b..43c10d546c 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -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", diff --git a/scss/_list-group.scss b/scss/_list-group.scss index fc0d3f1698..0a04ef4d1f 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -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; diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md index 7b6574ba86..c566a3138e 100644 --- a/site/content/docs/5.1/components/list-group.md +++ b/site/content/docs/5.1/components/list-group.md @@ -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 |