diff options
author | Julien Déramond <julien.deramond@orange.com> | 2022-04-12 01:33:18 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-12 01:33:18 +0300 |
commit | 10f2830805fee2ea5bd0f35cfb10e5af5555657f (patch) | |
tree | 7cdbe2f30364de272444a30a32904034478f1fbe | |
parent | 3c78f772d5dcf8a7c95099e611d6ab2bca867363 (diff) |
Add CSS vars for accordions (#36148)
* Add CSS vars for accordions
* Fix Bundlewatch
-rw-r--r-- | .bundlewatch.config.json | 4 | ||||
-rw-r--r-- | scss/_accordion.scss | 43 |
2 files changed, 29 insertions, 18 deletions
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 94f1e41397..00ce77cdc7 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/bootstrap.css", - "maxSize": "27.65 kB" + "maxSize": "27.75 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "25.75 kB" + "maxSize": "26.0 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index aac63ce2ff..b306540d73 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -4,13 +4,24 @@ .accordion { // scss-docs-start accordion-css-vars - --#{$prefix}accordion-color: #{$accordion-color}; + --#{$prefix}accordion-color: #{color-contrast($accordion-bg)}; --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-transition: #{$accordion-transition}; --#{$prefix}accordion-border-color: #{$accordion-border-color}; --#{$prefix}accordion-border-width: #{$accordion-border-width}; --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$prefix}accordion-btn-color: #{$accordion-color}; + --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; + --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; + --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; + --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; @@ -25,13 +36,13 @@ width: 100%; padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); @include font-size($font-size-base); - color: var(--#{$prefix}accordion-color); + color: var(--#{$prefix}accordion-btn-color); text-align: left; // Reset button style - background-color: $accordion-button-bg; + background-color: var(--#{$prefix}accordion-btn-bg); border: 0; @include border-radius(0); overflow-anchor: none; - @include transition($accordion-transition); + @include transition(var(--#{$prefix}accordion-transition)); &:not(.collapsed) { color: var(--#{$prefix}accordion-active-color); @@ -39,22 +50,22 @@ box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list &::after { - background-image: escape-svg($accordion-button-active-icon); - transform: $accordion-icon-transform; + background-image: var(--#{$prefix}accordion-btn-active-icon); + transform: var(--#{$prefix}accordion-btn-icon-transform); } } // Accordion icon &::after { flex-shrink: 0; - width: $accordion-icon-width; - height: $accordion-icon-width; + width: var(--#{$prefix}accordion-btn-icon-width); + height: var(--#{$prefix}accordion-btn-icon-width); margin-left: auto; content: ""; - background-image: escape-svg($accordion-button-icon); + background-image: var(--#{$prefix}accordion-btn-icon); background-repeat: no-repeat; - background-size: $accordion-icon-width; - @include transition($accordion-icon-transition); + background-size: var(--#{$prefix}accordion-btn-icon-width); + @include transition(var(--#{$prefix}accordion-btn-icon-transition)); } &:hover { @@ -63,9 +74,9 @@ &:focus { z-index: 3; - border-color: $accordion-button-focus-border-color; + border-color: var(--#{$prefix}accordion-btn-focus-border-color); outline: 0; - box-shadow: $accordion-button-focus-box-shadow; + box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); } } @@ -74,7 +85,7 @@ } .accordion-item { - color: color-contrast($accordion-bg); + color: var(--#{$prefix}accordion-color); background-color: var(--#{$prefix}accordion-bg); border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); @@ -82,7 +93,7 @@ @include border-top-radius(var(--#{$prefix}accordion-border-radius)); .accordion-button { - @include border-top-radius($accordion-inner-border-radius); // todo + @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); } } @@ -96,7 +107,7 @@ .accordion-button { &.collapsed { - @include border-bottom-radius($accordion-inner-border-radius); // todo + @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); } } |