kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Revamp accordion borders to fix pixel jumping (#33149) 

- Pushes the borders to the .accordion-item
- Simplifies the .accordion-flush
- Recreates the .accordion-button border-bottom with an inset box-shadow
- Updates background-color to solid to match other components like list group and prevent stacked translucent borders
- Use negative margin to overlap the consecutive items
This commit is contained in:
Mark Otto 2021-03-16 22:16:03 -07:00 committed by GitHub
parent fcac2e3aa6
commit c198eb6319
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
scss/_accordion.scss
View File

@ -12,18 +12,15 @@
color: $accordion-button-color;
text-align: left; // Reset button style
background-color: $accordion-button-bg;
border: $accordion-border-width solid $accordion-border-color;
border: 0;
@include border-radius(0);
overflow-anchor: none;
@include transition($accordion-transition);
&.collapsed {
border-bottom-width: 0;
}
&:not(.collapsed) {
color: $accordion-button-active-color;
background-color: $accordion-button-active-bg;
box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
&::after {
background-image: escape-svg($accordion-button-active-icon);
@ -61,33 +58,35 @@
}
.accordion-item {
margin-bottom: -$accordion-border-width;
background-color: $accordion-bg;
border: $accordion-border-width solid $accordion-border-color;
&:first-of-type {
@include border-top-radius($accordion-border-radius);
.accordion-button {
@include border-top-radius($accordion-border-radius);
@include border-top-radius($accordion-inner-border-radius);
}
}
// Only set a border-radius on the last item if the accordion is collapsed
&:last-of-type {
margin-bottom: 0;
@include border-bottom-radius($accordion-border-radius);
.accordion-button {
// Only set a border-radius on the last item if the accordion is collapsed
&.collapsed {
border-bottom-width: $accordion-border-width;
@include border-bottom-radius($accordion-border-radius);
@include border-bottom-radius($accordion-inner-border-radius);
}
}
.accordion-collapse {
border-bottom-width: $accordion-border-width;
@include border-bottom-radius($accordion-border-radius);
}
}
}
.accordion-collapse {
border: solid $accordion-border-color;
border-width: 0 $accordion-border-width;
}
.accordion-body {
padding: $accordion-body-padding-y $accordion-body-padding-x;
}
@ -98,29 +97,17 @@
// Remove borders and border-radius to keep accordion items edge-to-edge.
.accordion-flush {
.accordion-button {
border-right: 0;
border-left: 0;
@include border-radius(0);
}
.accordion-collapse {
border-width: 0;
}
.accordion-item {
&:first-of-type {
.accordion-button {
border-top-width: 0;
@include border-top-radius(0);
}
}
@include border-radius(0);
&:last-of-type {
.accordion-button.collapsed {
border-bottom-width: 0;
@include border-bottom-radius(0);
}
.accordion-button {
border-right: 0;
border-left: 0;
@include border-radius(0);
}
}
}

3
scss/_variables.scss
View File

@ -1101,10 +1101,11 @@ $card-group-margin: $grid-gutter-width / 2 !default;
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default;
$accordion-bg: transparent !default;
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-border-color: rgba($black, .125) !default;
$accordion-border-radius: $border-radius !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;