diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-11-05 23:18:38 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-11-06 15:49:41 +0300 |
commit | 4c1f807142d4ddd6b63ea56b148ec20a5ae194bc (patch) | |
tree | 549e35b11bb6f24e7230f08078cb4a5474c384af /scss/_accordion.scss | |
parent | d6a72c4e1bb1dafdb21e759e42c2e6aa574ade74 (diff) |
Fix missing border & add transitions
Diffstat (limited to 'scss/_accordion.scss')
-rw-r--r-- | scss/_accordion.scss | 47 |
1 files changed, 22 insertions, 25 deletions
diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 479aad1cc5..a68aaa70e3 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -11,10 +11,14 @@ @include font-size($font-size-base); color: $accordion-button-color; background-color: $accordion-button-bg; - border: solid $accordion-border-color; - border-width: $accordion-border-width $accordion-border-width 0; + border: $accordion-border-width solid $accordion-border-color; @include border-radius(0); overflow-anchor: none; + @include transition($accordion-transition); + + &.collapsed { + border-bottom-width: 0; + } &:not(.collapsed) { color: $accordion-button-active-color; @@ -45,8 +49,9 @@ &:focus { z-index: 3; + border-color: $accordion-button-focus-border-color; outline: 0; - box-shadow: $btn-focus-box-shadow; + box-shadow: $accordion-button-focus-box-shadow; } } @@ -55,35 +60,35 @@ } .accordion-item { - @include border-radius($accordion-border-radius); + &:first-of-type { + .accordion-button { + @include border-top-radius($accordion-border-radius); + } + } &:last-of-type { .accordion-button { - border-bottom-width: $accordion-border-width; - // 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); } } - .accordion-body { - border-width: 0 $accordion-border-width $accordion-border-width; + .accordion-collapse { + border-bottom-width: $accordion-border-width; @include border-bottom-radius($accordion-border-radius); } } +} - &:first-of-type { - .accordion-button { - @include border-top-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; - border: solid $accordion-border-color; - border-width: $accordion-border-width $accordion-border-width 0; } @@ -98,15 +103,11 @@ @include border-radius(0); } - .accordion-body { + .accordion-collapse { border-width: 0; } .accordion-item { - border-right-width: 0; - border-left-width: 0; - @include border-radius(0); - &:first-of-type { .accordion-button { border-top-width: 0; @@ -115,14 +116,10 @@ } &:last-of-type { - .accordion-button { + .accordion-button.collapsed { border-bottom-width: 0; @include border-bottom-radius(0); } - - .accordion-body { - border-width: 0; - } } } } |