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 /scss | |
parent | 9e73b6a13c1cd4cc27d1456319a3d63630e91e2f (diff) |
Convert list group to CSS variables (#35862)
* Convert list-group to CSS vars
* bundlewatch
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_list-group.scss | 51 |
1 files changed, 33 insertions, 18 deletions
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; |