diff options
Diffstat (limited to 'scss/_accordion.scss')
-rw-r--r-- | scss/_accordion.scss | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/scss/_accordion.scss b/scss/_accordion.scss new file mode 100644 index 0000000000..53715274a7 --- /dev/null +++ b/scss/_accordion.scss @@ -0,0 +1,124 @@ +// +// Base styles +// + +.accordion-button { + display: flex; + align-items: center; + width: 100%; + padding: $accordion-button-padding-y $accordion-button-padding-x; + @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; + @include border-radius(0); + overflow-anchor: none; + + &:not(.collapsed) { + color: $accordion-button-active-color; + background-color: $accordion-button-active-bg; + + &::after { + background-image: escape-svg($accordion-button-active-icon); + transform: $accordion-icon-transform; + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: $accordion-icon-width; + height: $accordion-icon-width; + margin-left: auto; + content: ""; + background-image: escape-svg($accordion-button-icon); + background-repeat: no-repeat; + background-size: $accordion-icon-width; + transform-origin: center center; + @include transition($accordion-icon-transition); + } + + &:focus { + position: relative; + outline: 0; + box-shadow: $btn-focus-box-shadow; + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + @include border-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 { + @include border-bottom-radius($accordion-border-radius); + } + } + + .accordion-body { + border-width: 0 $accordion-border-width $accordion-border-width; + @include border-bottom-radius($accordion-border-radius); + } + } + + &:first-of-type { + .accordion-button { + @include border-top-radius($accordion-border-radius); + } + } +} + +.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; +} + + +// Flush accordion items +// +// 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-body { + 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; + @include border-top-radius(0); + } + } + + &:last-of-type { + .accordion-button { + border-bottom-width: 0; + @include border-bottom-radius(0); + } + + .accordion-body { + border-width: 0; + } + } + } +} |