diff --git a/scss/_accordion.scss b/scss/_accordion.scss new file mode 100644 index 000000000000..8e58c678c359 --- /dev/null +++ b/scss/_accordion.scss @@ -0,0 +1,167 @@ +// +// Base styles +// + +.accordion-button { + @include font-size($font-size-base); + display: flex; + align-items: baseline; + width: 100%; + padding: $accordion-button-padding-y $accordion-button-padding-x; + color: $accordion-button-color; + text-align: left; + background-color: $accordion-button-bg; + border: $accordion-border-width solid $accordion-border-color; + border-bottom: none; + @include border-radius(0); + + &:not(.collapsed) { + color: $accordion-button-active-color; + background-color: $accordion-button-active-bg; + + &::after { + background-image: escape-svg($accordion-button-active-icon); + transform: $accordion-button-active-icon-transform; + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: 1.5rem; + height: 1rem; + margin-left: auto; + content: ""; + background-image: escape-svg($accordion-button-icon); + background-repeat: no-repeat; + background-position: center; + background-size: 1.5rem; + transform: $accordion-button-icon-transform; + @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: $accordion-border-width solid $accordion-border-color; + + // 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: $accordion-border-width solid $accordion-border-color; + border-top: none; + @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: $accordion-border-width solid $accordion-border-color; + border-bottom: none; +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-button { + color: $accordion-flush-button-color; + background-color: $accordion-flush-button-bg; + + &:not(.collapsed) { + color: $accordion-flush-button-active-color; + background-color: $accordion-flush-button-active-bg; + } + + 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; + } + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.accordion-striped { + .accordion-button { + color: $accordion-striped-button-color; + background-color: $accordion-striped-button-bg; + + &:not(.collapsed) { + color: $accordion-striped-button-accent-active-color; + background-color: $accordion-striped-button-active-bg; + } + } + + .accordion-item:nth-of-type(#{$accordion-striped-order}) { + .accordion-button { + color: $accordion-striped-button-accent-color; + background-color: $accordion-striped-button-accent-bg; + + &:not(.collapsed) { + color: $accordion-striped-button-accent-active-color; + background-color: $accordion-striped-button-accent-active-bg; + } + } + + .accordion-body { + background-color: $accordion-striped-body-accent-bg; + } + } +} diff --git a/scss/_card.scss b/scss/_card.scss index 510fbcea1e5a..62280aabc798 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -235,28 +235,3 @@ } } } - - -// -// Accordion -// - -.accordion { - > .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 7501c3a29bf4..912e56291762 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -962,6 +962,53 @@ $card-img-overlay-padding: 1.25rem !default; $card-group-margin: $grid-gutter-width / 2 !default; $card-deck-margin: $card-group-margin !default; +// Accordion +$accordion-padding-y: 1.25rem !default; +$accordion-padding-x: 1.25rem !default; + +$accordion-bg: $white !default; +$accordion-color: $body-color !default; +$accordion-button-active-bg: lighten($component-active-bg, 45%) !default; +$accordion-button-active-color: $primary !default; +$accordion-accent-bg: rgba($black, .025) !default; + +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-color: $accordion-color !default; +$accordion-button-bg: $accordion-bg !default; + +$accordion-border-width: $border-width !default; +$accordion-border-radius: $border-radius !default; + +$accordion-border-color: rgba($black, .125) !default; +$accordion-icon-color: $accordion-color !default; +$accordion-icon-active-color: $accordion-button-active-color !default; + +$accordion-icon-transition: $transition-base !default; + +$accordion-button-icon-transform: rotate(0deg) !default; +$accordion-button-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; +$accordion-button-active-icon-transform: rotate(180deg) !default; + +$accordion-striped-order: odd !default; + +$accordion-flush-button-color: null !default; +$accordion-flush-button-bg: transparent !default; +$accordion-flush-button-active-color: null !default; +$accordion-flush-button-active-bg: $accordion-button-active-bg !default; + +$accordion-striped-button-color: null !default; +$accordion-striped-button-bg: transparent !default; +$accordion-striped-button-active-bg: $accordion-button-active-bg !default; +$accordion-striped-button-accent-color: null !default; +$accordion-striped-button-accent-bg: $accordion-accent-bg !default; +$accordion-striped-button-accent-active-color: null !default; +$accordion-striped-button-accent-active-bg: $accordion-button-active-bg !default; +$accordion-striped-body-accent-bg: null !default; // Tooltips diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index dcfdc05cee72..19a409a1638a 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -30,6 +30,7 @@ @import "nav"; @import "navbar"; @import "card"; +@import "accordion"; @import "breadcrumb"; @import "pagination"; @import "badge"; diff --git a/site/content/docs/4.3/components/accordion.md b/site/content/docs/4.3/components/accordion.md new file mode 100644 index 000000000000..8c7c1f7cdc2d --- /dev/null +++ b/site/content/docs/4.3/components/accordion.md @@ -0,0 +1,139 @@ +--- +layout: docs +title: Accordion +description: Provides an accordion to collapse content vertically. +group: components +aliases: + - "/components/" + - "/docs/4.3/components/" +toc: true +--- + +## How it works + +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. In order to render an accordion that's expanded you need to add the `open` class on the `.accordion` + +{{< callout info >}} +{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< /callout >}} + +## Example + +Click the accordions below to expand/collapse the accordion content. + +{{< example >}} +
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{{< /example >}} + +### Accordion flush example + +Add `.accordion-flush` to remove some borders and rounded corners to render accordions items edge-to-edge. + +{{< example >}} +
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{{< /example >}} + +### Accordion striped example + +Use `.accordion-striped` to add zebra-striping to any accordion. + +{{< example >}} +
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+

+ +

+
+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+{{< /example >}} + +## Accessibility + +Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. diff --git a/site/content/docs/4.3/components/alerts.md b/site/content/docs/4.3/components/alerts.md index 84a4696d4f28..dc5f30382d26 100644 --- a/site/content/docs/4.3/components/alerts.md +++ b/site/content/docs/4.3/components/alerts.md @@ -3,9 +3,6 @@ layout: docs title: Alerts description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. group: components -aliases: - - "/components/" - - "/docs/4.3/components/" toc: true --- diff --git a/site/content/docs/4.3/components/collapse.md b/site/content/docs/4.3/components/collapse.md index beb9486c9b9c..ab48ce436cc2 100644 --- a/site/content/docs/4.3/components/collapse.md +++ b/site/content/docs/4.3/components/collapse.md @@ -69,58 +69,6 @@ Multiple ` - - - -
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
- -
-
-

- -

-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
-
-
-

- -

-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. -
-
-
- -{{< /example >}} - ## Accessibility Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `` or `
`), the attribute `role="button"` should be added to the element. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index dd6a3676ac64..2794eb47a2b9 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -40,6 +40,7 @@ - title: Components pages: + - title: Accordion - title: Alerts - title: Badge - title: Breadcrumb