diff options
author | Mark Otto <markdotto@gmail.com> | 2020-11-02 22:36:51 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2020-11-06 15:49:41 +0300 |
commit | 6a3761254050222d80eda2926ad6b6946a8787aa (patch) | |
tree | fc913f312cb14b9a048a4928ecc9aaa8e0b8b593 /scss | |
parent | f20335b6c1427e35aecf9a28b29629d83ec3f364 (diff) |
Add dedicated accordion component based on Collapse JS
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_accordion.scss | 124 | ||||
-rw-r--r-- | scss/_card.scss | 27 | ||||
-rw-r--r-- | scss/_variables.scss | 27 | ||||
-rw-r--r-- | scss/bootstrap.scss | 1 |
4 files changed, 152 insertions, 27 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; + } + } + } +} diff --git a/scss/_card.scss b/scss/_card.scss index a526ec143c..9b0f4969a6 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -213,30 +213,3 @@ } } } - - -// -// Accordion -// - -.accordion { - overflow-anchor: none; - - > .card { - overflow: hidden; - - &:not(:last-of-type) { - border-bottom: 0; - @include border-bottom-radius(0); - } - - &:not(:first-of-type) { - @include border-top-radius(0); - } - - > .card-header { - @include border-radius(0); - margin-bottom: -$card-border-width; - } - } -} diff --git a/scss/_variables.scss b/scss/_variables.scss index 781ec79a42..6c5a070f26 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1014,6 +1014,33 @@ $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width / 2 !default; +// Accordion +$accordion-padding-y: 1rem !default; +$accordion-padding-x: 1.25rem !default; +$accordion-color: $body-color !default; +$accordion-bg: transparent !default; +$accordion-border-width: $border-width !default; +$accordion-border-color: rgba($black, .125) !default; +$accordion-border-radius: $border-radius !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-button-color: $accordion-color !default; +$accordion-button-bg: $accordion-bg !default; +$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default; +$accordion-button-active-color: $primary !default; + +$accordion-icon-width: 1.25rem !default; +$accordion-icon-color: $accordion-color !default; +$accordion-icon-active-color: $accordion-button-active-color !default; +$accordion-icon-transition: transform .2s ease-in-out !default; +$accordion-icon-transform: rotate(180deg) !default; + +$accordion-button-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='#{$accordion-icon-color}' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default; +$accordion-button-active-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default; // Tooltips diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index c65caab6de..27514484c1 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -28,6 +28,7 @@ @import "nav"; @import "navbar"; @import "card"; +@import "accordion"; @import "breadcrumb"; @import "pagination"; @import "badge"; |