rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 18 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": "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",

43
scss/_accordion.scss
View File

@ -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));
}
}