diff options
| -rw-r--r-- | scss/_accordion.scss | 51 | ||||
| -rw-r--r-- | scss/_variables.scss | 3 |
2 files changed, 21 insertions, 33 deletions
diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 298a553e0..294d5229b 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -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); } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 2668a790c..7558224f9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; |