mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 14:46:34 +02:00
Code Issues Releases Wiki Activity

Add CSS vars for accordions (#36148)

Browse Source 
* Add CSS vars for accordions

* Fix Bundlewatch
This commit is contained in:
Julien Déramond
2022-04-12 00:33:18 +02:00
committed by GitHub
parent 3c78f772d5
commit 10f2830805
2 changed files with 29 additions and 18 deletions
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", "path": "./dist/css/bootstrap.css",
"maxSize": "27.65 kB" "maxSize": "27.75 kB"
}, },
{ {
"path": "./dist/css/bootstrap.min.css", "path": "./dist/css/bootstrap.min.css",
"maxSize": "25.75 kB" "maxSize": "26.0 kB"
}, },
{ {
"path": "./dist/js/bootstrap.bundle.js", "path": "./dist/js/bootstrap.bundle.js",

43
scss/_accordion.scss
View File

@@ -4,13 +4,24 @@
.accordion { .accordion {
// scss-docs-start accordion-css-vars // 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-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color}; --#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width}; --#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius}; --#{$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-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; --#{$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-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color}; --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
@@ -25,13 +36,13 @@
width: 100%; width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
@include font-size($font-size-base); @include font-size($font-size-base);
color: var(--#{$prefix}accordion-color); color: var(--#{$prefix}accordion-btn-color);
text-align: left; // Reset button style text-align: left; // Reset button style
background-color: $accordion-button-bg; background-color: var(--#{$prefix}accordion-btn-bg);
border: 0; border: 0;
@include border-radius(0); @include border-radius(0);
overflow-anchor: none; overflow-anchor: none;
@include transition($accordion-transition); @include transition(var(--#{$prefix}accordion-transition));
&:not(.collapsed) { &:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color); 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 box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
&::after { &::after {
background-image: escape-svg($accordion-button-active-icon); background-image: var(--#{$prefix}accordion-btn-active-icon);
transform: $accordion-icon-transform; transform: var(--#{$prefix}accordion-btn-icon-transform);
} }
} }
// Accordion icon // Accordion icon
&::after { &::after {
flex-shrink: 0; flex-shrink: 0;
width: $accordion-icon-width; width: var(--#{$prefix}accordion-btn-icon-width);
height: $accordion-icon-width; height: var(--#{$prefix}accordion-btn-icon-width);
margin-left: auto; margin-left: auto;
content: ""; content: "";
background-image: escape-svg($accordion-button-icon); background-image: var(--#{$prefix}accordion-btn-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: $accordion-icon-width; background-size: var(--#{$prefix}accordion-btn-icon-width);
@include transition($accordion-icon-transition); @include transition(var(--#{$prefix}accordion-btn-icon-transition));
} }
&:hover { &:hover {
@@ -63,9 +74,9 @@
&:focus { &:focus {
z-index: 3; z-index: 3;
border-color: $accordion-button-focus-border-color; border-color: var(--#{$prefix}accordion-btn-focus-border-color);
outline: 0; outline: 0;
box-shadow: $accordion-button-focus-box-shadow; box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
} }
} }
@@ -74,7 +85,7 @@
} }
.accordion-item { .accordion-item {
color: color-contrast($accordion-bg); color: var(--#{$prefix}accordion-color);
background-color: var(--#{$prefix}accordion-bg); background-color: var(--#{$prefix}accordion-bg);
border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); 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)); @include border-top-radius(var(--#{$prefix}accordion-border-radius));
.accordion-button { .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 { .accordion-button {
&.collapsed { &.collapsed {
@include border-bottom-radius($accordion-inner-border-radius); // todo @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
} }
} }