From 98813116bdbba7bd94171840aab347481bf93000 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 10:02:36 +0100 Subject: [PATCH 01/16] Add standalone accordion component #30015 --- scss/_accordion.scss | 35 +++++++++++++++ scss/_card.scss | 25 ----------- scss/_variables.scss | 14 ++++++ scss/bootstrap.scss | 1 + site/content/docs/4.3/components/collapse.md | 45 ++++++++------------ 5 files changed, 67 insertions(+), 53 deletions(-) create mode 100644 scss/_accordion.scss diff --git a/scss/_accordion.scss b/scss/_accordion.scss new file mode 100644 index 000000000000..b22d1913ece5 --- /dev/null +++ b/scss/_accordion.scss @@ -0,0 +1,35 @@ +// +// Base styles +// + +.accordion-header { + padding: $accordion-header-padding-y $accordion-header-padding-x; + margin-bottom: -$accordion-border-width; + color: $accordion-header-color; + background-color: $accordion-header-bg; + border-bottom: $accordion-border-width solid $accordion-border-color; + @include border-radius(0); +} + +.accordion-item{ + overflow: hidden; + border: $accordion-border-width solid $accordion-border-color; + @include border-radius($accordion-border-radius); + + &:not(:last-of-type) { + border-bottom: 0; + @include border-bottom-radius(0); + } + + &:not(:first-of-type) { + @include border-top-radius(0); + } + + &:not(:last-child){ + border-bottom: none; + } +} + +.accordion-body{ + padding: $accordion-body-padding-y $accordion-body-padding-x; +} 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..e77bef531be1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -962,6 +962,20 @@ $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: 1rem !default; +$accordion-padding-x: 1.25rem !default; +$accordion-bg: rgba($black, .03) !default; +$accordion-color: null !default; +$accordion-header-padding-y: $accordion-padding-y !default; +$accordion-header-padding-x: $accordion-padding-x !default; +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; +$accordion-header-color: $accordion-color !default; +$accordion-header-bg: $accordion-bg !default; +$accordion-border-width: $border-width !default; +$accordion-border-radius: $border-radius !default; +$accordion-border-color: rgba($black, .125) !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/collapse.md b/site/content/docs/4.3/components/collapse.md index beb9486c9b9c..af6f9d5c1e1f 100644 --- a/site/content/docs/4.3/components/collapse.md +++ b/site/content/docs/4.3/components/collapse.md @@ -75,47 +75,36 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t {{< 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. -
+
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.
From 99e6f1ca1592fecf1c05a3108083c1ecfa2d5074 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 10:42:52 +0100 Subject: [PATCH 02/16] Remove overflow hidden to support position sticky inside accordions. Fixes #28873 Also fixes #28134 as we move the border from the header to the body and no longer have a overlapping issue of the header bottom. --- scss/_accordion.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index b22d1913ece5..6a6b1cb983bc 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -7,12 +7,10 @@ margin-bottom: -$accordion-border-width; color: $accordion-header-color; background-color: $accordion-header-bg; - border-bottom: $accordion-border-width solid $accordion-border-color; @include border-radius(0); } -.accordion-item{ - overflow: hidden; +.accordion-item { border: $accordion-border-width solid $accordion-border-color; @include border-radius($accordion-border-radius); @@ -25,11 +23,12 @@ @include border-top-radius(0); } - &:not(:last-child){ + &:not(:last-child) { border-bottom: none; } } -.accordion-body{ +.accordion-body { padding: $accordion-body-padding-y $accordion-body-padding-x; + border-top: $accordion-border-width solid $accordion-border-color; } From d2969cf278d2497fc249d2c21360f2c94486cbc8 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 11:06:15 +0100 Subject: [PATCH 03/16] Move padding to btn inside accordion header so the click area is large and more predictable. --- scss/_accordion.scss | 52 ++++++++++++- scss/_variables.scss | 9 ++- site/content/docs/4.3/components/collapse.md | 82 ++++++++++++++++++++ 3 files changed, 141 insertions(+), 2 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 6a6b1cb983bc..98d96fe20c00 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -3,11 +3,14 @@ // .accordion-header { - padding: $accordion-header-padding-y $accordion-header-padding-x; + padding: 0; margin-bottom: -$accordion-border-width; color: $accordion-header-color; background-color: $accordion-header-bg; @include border-radius(0); + > .btn{ + padding: $accordion-header-padding-y $accordion-header-padding-x; + } } .accordion-item { @@ -32,3 +35,50 @@ padding: $accordion-body-padding-y $accordion-body-padding-x; border-top: $accordion-border-width solid $accordion-border-color; } + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-header { + background-color: $accordion-flush-header-bg; + } + + .accordion-item { + border-right-width: 0; + border-left-width: 0; + @include border-radius(0); + + &:first-child { + border-top-width: 0; + } + } + + &:last-child { + .accordion-item:last-child { + border-bottom-width: 0; + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.accordion-striped { + .accordion-header{ + background-color: transparent; + } + .accordion-item:nth-of-type(#{$accordion-striped-order}) { + .accordion-header { + background-color: $accordion-header-accent-bg; + } + + .accordion-body { + background-color: $accordion-body-accent-bg; + } + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index e77bef531be1..83993dcc40c3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -963,7 +963,7 @@ $card-group-margin: $grid-gutter-width / 2 !default; $card-deck-margin: $card-group-margin !default; // Accordion -$accordion-padding-y: 1rem !default; +$accordion-padding-y: 1.25rem !default; $accordion-padding-x: 1.25rem !default; $accordion-bg: rgba($black, .03) !default; $accordion-color: null !default; @@ -977,6 +977,13 @@ $accordion-border-width: $border-width !default; $accordion-border-radius: $border-radius !default; $accordion-border-color: rgba($black, .125) !default; +$accordion-flush-header-bg: transparent !default; + +$accordion-striped-order: odd !default; +$accordion-accent-bg: rgba($black, .05) !default; +$accordion-header-accent-bg: $accordion-accent-bg !default; +$accordion-body-accent-bg: null !default; + // Tooltips $tooltip-font-size: $font-size-sm !default; diff --git a/site/content/docs/4.3/components/collapse.md b/site/content/docs/4.3/components/collapse.md index af6f9d5c1e1f..5e6bbe63dafc 100644 --- a/site/content/docs/4.3/components/collapse.md +++ b/site/content/docs/4.3/components/collapse.md @@ -110,6 +110,88 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
{{< /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 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. From 5f42b4c8b6f997746b51c7c8148467d16dfd9cc4 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 12:49:46 +0100 Subject: [PATCH 04/16] Removed unused padding property --- scss/_accordion.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 98d96fe20c00..2363829864ef 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -3,7 +3,6 @@ // .accordion-header { - padding: 0; margin-bottom: -$accordion-border-width; color: $accordion-header-color; background-color: $accordion-header-bg; From f95fa04600430ccae78ca2fb1fdbe93280e156a3 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 12:59:12 +0100 Subject: [PATCH 05/16] Updated formatting in accordion documentation examples --- site/content/docs/4.3/components/collapse.md | 80 +++++++++----------- 1 file changed, 37 insertions(+), 43 deletions(-) diff --git a/site/content/docs/4.3/components/collapse.md b/site/content/docs/4.3/components/collapse.md index 5e6bbe63dafc..8ff1a6b083c4 100644 --- a/site/content/docs/4.3/components/collapse.md +++ b/site/content/docs/4.3/components/collapse.md @@ -77,34 +77,32 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t

- +

-
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.
+
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.
@@ -118,34 +116,32 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco

- +

-
-
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.
+
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.
@@ -159,34 +155,32 @@ Use `.accordion-striped` to add zebra-striping to any accordion.

- +

-
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.
+
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.
From 8d455eb5fecb0acfe6423b927498fde987924b7f Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 14:07:59 +0100 Subject: [PATCH 06/16] Extract accordion to a separate component --- site/content/docs/4.3/components/accordion.md | 137 ++++++++++++++++++ site/content/docs/4.3/components/collapse.md | 117 --------------- site/data/sidebar.yml | 1 + 3 files changed, 138 insertions(+), 117 deletions(-) create mode 100644 site/content/docs/4.3/components/accordion.md 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..98b69c2cd17a --- /dev/null +++ b/site/content/docs/4.3/components/accordion.md @@ -0,0 +1,137 @@ +--- +layout: docs +title: Accordion +description: Provides an accordion to collapse content vertically. +toc: true +--- + +## How it works + +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally in order 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. + +## Accordion example + +{{< 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/collapse.md b/site/content/docs/4.3/components/collapse.md index 8ff1a6b083c4..ab48ce436cc2 100644 --- a/site/content/docs/4.3/components/collapse.md +++ b/site/content/docs/4.3/components/collapse.md @@ -69,123 +69,6 @@ Multiple `
{{< /example >}} -## Accordion example - -Using the [card]({{< docsref "/components/card" >}}) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper. - -{{< 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 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 From 1f7e5d839ef2a45d23c4b1d3b07601a2e62bc8a2 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 14:41:04 +0100 Subject: [PATCH 07/16] Fixed active state on accordion page --- site/content/docs/4.3/components/accordion.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/4.3/components/accordion.md b/site/content/docs/4.3/components/accordion.md index 98b69c2cd17a..a579cee4e8a1 100644 --- a/site/content/docs/4.3/components/accordion.md +++ b/site/content/docs/4.3/components/accordion.md @@ -2,6 +2,10 @@ layout: docs title: Accordion description: Provides an accordion to collapse content vertically. +group: components +aliases: + - "/components/" + - "/docs/4.3/components/" toc: true --- From bdd82c6f37efd058d4bb0dac6ac5eac80ceed0ad Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 14:41:42 +0100 Subject: [PATCH 08/16] Copy improvements and added missing backtick --- site/content/docs/4.3/components/accordion.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/content/docs/4.3/components/accordion.md b/site/content/docs/4.3/components/accordion.md index a579cee4e8a1..21217d03083c 100644 --- a/site/content/docs/4.3/components/accordion.md +++ b/site/content/docs/4.3/components/accordion.md @@ -11,7 +11,7 @@ toc: true ## How it works -The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally in order to make it collapsible. In order to render an accordion that's expanded you need to add the `open` class on the `.accordion +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally in order 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" >}} @@ -21,8 +21,6 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally Click the accordions below to expand/collapse the accordion content. -## Accordion example - {{< example >}}
From 2c96e648825bcdae11d5564744a5d6aaccbe38f6 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 14:45:28 +0100 Subject: [PATCH 09/16] Copy improvements in the "How it works" section --- site/content/docs/4.3/components/accordion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/4.3/components/accordion.md b/site/content/docs/4.3/components/accordion.md index 21217d03083c..2fc4e6e0ca83 100644 --- a/site/content/docs/4.3/components/accordion.md +++ b/site/content/docs/4.3/components/accordion.md @@ -11,7 +11,7 @@ toc: true ## How it works -The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally in order to make it collapsible. In order to render an accordion that's expanded you need to add the `open` class on the `.accordion` +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" >}} From 20aa53a9a9650b6188f102fcbdb5a752abd467e7 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 17 Jan 2020 16:43:17 +0100 Subject: [PATCH 10/16] Rewrote accordions in order to be more customizable * Added expanded/collapsed icon * Added active state * Added focus state --- scss/_accordion.scss | 117 ++++++++++++++---- scss/_variables.scss | 25 ++-- site/content/docs/4.3/components/accordion.md | 18 +-- 3 files changed, 115 insertions(+), 45 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 2363829864ef..baad1ec57b97 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -2,37 +2,84 @@ // Base styles // -.accordion-header { - margin-bottom: -$accordion-border-width; - color: $accordion-header-color; - background-color: $accordion-header-bg; +.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); - > .btn{ - padding: $accordion-header-padding-y $accordion-header-padding-x; + + &[aria-expanded="true"] { + color: $accordion-button-active-color !important; // stylelint-disable-line declaration-no-important + background-color: $accordion-button-active-bg !important; // stylelint-disable-line declaration-no-important + &::after { + background-image: escape-svg($accordion-button-active-icon); + transform: rotate(180deg); + } } + + &::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; + @include transition($accordion-icon-transition); + } + + &:focus, + &.focus { + position: relative; + outline: 0; + box-shadow: $btn-focus-box-shadow; + } +} + +.accordion-header { + margin-bottom: 0; } .accordion-item { - border: $accordion-border-width solid $accordion-border-color; @include border-radius($accordion-border-radius); - &:not(:last-of-type) { - border-bottom: 0; - @include border-bottom-radius(0); - } + &:last-of-type { + .accordion-button { + border-bottom: $accordion-border-width solid $accordion-border-color; - &:not(:first-of-type) { - @include border-top-radius(0); + // Only set a border-radius on the last item if the accordion is collapsed + &:not([aria-expanded="true"]) { + @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); + } } - &:not(:last-child) { - border-bottom: none; + &:first-of-type { + .accordion-button { + @include border-top-radius($accordion-border-radius); + } } } .accordion-body { padding: $accordion-body-padding-y $accordion-body-padding-x; - border-top: $accordion-border-width solid $accordion-border-color; + border: $accordion-border-width solid $accordion-border-color; + border-bottom: none; } @@ -41,8 +88,15 @@ // Remove borders and border-radius to keep accordion items edge-to-edge. .accordion-flush { - .accordion-header { - background-color: $accordion-flush-header-bg; + .accordion-button { + background-color: $accordion-flush-button-bg; + border-right: 0; + border-left: 0; + @include border-radius(0); + } + + .accordion-body { + border-width: 0; } .accordion-item { @@ -50,14 +104,22 @@ border-left-width: 0; @include border-radius(0); - &:first-child { - border-top-width: 0; + &:first-of-type { + .accordion-button { + border-top-width: 0; + @include border-top-radius(0); + } } - } - &:last-child { - .accordion-item:last-child { - border-bottom-width: 0; + &:last-of-type { + .accordion-button { + border-bottom-width: 0; + @include border-bottom-radius(0); + } + + .accordion-body{ + border-width: 0; + } } } } @@ -68,12 +130,13 @@ // Default zebra-stripe styles (alternating gray and transparent backgrounds) .accordion-striped { - .accordion-header{ + .accordion-button { background-color: transparent; } + .accordion-item:nth-of-type(#{$accordion-striped-order}) { - .accordion-header { - background-color: $accordion-header-accent-bg; + .accordion-button { + background-color: $accordion-button-accent-bg; } .accordion-body { diff --git a/scss/_variables.scss b/scss/_variables.scss index 83993dcc40c3..bf0c14abd7aa 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -965,23 +965,30 @@ $card-deck-margin: $card-group-margin !default; // Accordion $accordion-padding-y: 1.25rem !default; $accordion-padding-x: 1.25rem !default; -$accordion-bg: rgba($black, .03) !default; -$accordion-color: null !default; -$accordion-header-padding-y: $accordion-padding-y !default; -$accordion-header-padding-x: $accordion-padding-x !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-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-header-color: $accordion-color !default; -$accordion-header-bg: $accordion-bg !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: url("data:image/svg+xml,") !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default; -$accordion-flush-header-bg: transparent !default; +$accordion-flush-button-bg: transparent !default; $accordion-striped-order: odd !default; -$accordion-accent-bg: rgba($black, .05) !default; -$accordion-header-accent-bg: $accordion-accent-bg !default; +$accordion-accent-bg: rgba($black, .025) !default; +$accordion-button-accent-bg: $accordion-accent-bg !default; $accordion-body-accent-bg: null !default; // Tooltips diff --git a/site/content/docs/4.3/components/accordion.md b/site/content/docs/4.3/components/accordion.md index 2fc4e6e0ca83..8c7c1f7cdc2d 100644 --- a/site/content/docs/4.3/components/accordion.md +++ b/site/content/docs/4.3/components/accordion.md @@ -25,7 +25,7 @@ Click the accordions below to expand/collapse the accordion content.

-

@@ -35,7 +35,7 @@ Click the accordions below to expand/collapse the accordion content.

-

@@ -45,7 +45,7 @@ Click the accordions below to expand/collapse the accordion content.

-

@@ -64,7 +64,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco

-

@@ -74,7 +74,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco

-

@@ -84,7 +84,7 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco

-

@@ -103,7 +103,7 @@ Use `.accordion-striped` to add zebra-striping to any accordion.

-

@@ -113,7 +113,7 @@ Use `.accordion-striped` to add zebra-striping to any accordion.

-

@@ -123,7 +123,7 @@ Use `.accordion-striped` to add zebra-striping to any accordion.

-

From c6e92fbe42eb08a9569bc03ecc78046b92710e8a Mon Sep 17 00:00:00 2001 From: gijsroge Date: Tue, 21 Jan 2020 17:25:06 +0100 Subject: [PATCH 11/16] Use collapsed class for theming rather then aria attribute --- scss/_accordion.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index baad1ec57b97..9936accb4af4 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -15,7 +15,7 @@ border-bottom: none; @include border-radius(0); - &[aria-expanded="true"] { + &:not(.collapsed) { color: $accordion-button-active-color !important; // stylelint-disable-line declaration-no-important background-color: $accordion-button-active-bg !important; // stylelint-disable-line declaration-no-important &::after { From 1224da3a54cf25a8f41cd8ece2e723cf63be889f Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 31 Jan 2020 17:11:02 +0100 Subject: [PATCH 12/16] Removed unused '.focus' class --- scss/_accordion.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 9936accb4af4..5a4e5a3a22a9 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -37,8 +37,7 @@ @include transition($accordion-icon-transition); } - &:focus, - &.focus { + &:focus { position: relative; outline: 0; box-shadow: $btn-focus-box-shadow; @@ -117,7 +116,7 @@ @include border-bottom-radius(0); } - .accordion-body{ + .accordion-body { border-width: 0; } } From cb601aa8d446555961afea40051ca5b0a2fec18d Mon Sep 17 00:00:00 2001 From: gijsroge Date: Fri, 31 Jan 2020 17:19:22 +0100 Subject: [PATCH 13/16] Accordion icon rotation is now configurable with variables --- scss/_accordion.scss | 3 ++- scss/_variables.scss | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 5a4e5a3a22a9..d0fc919d6eea 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -20,7 +20,7 @@ background-color: $accordion-button-active-bg !important; // stylelint-disable-line declaration-no-important &::after { background-image: escape-svg($accordion-button-active-icon); - transform: rotate(180deg); + transform: rotate($accordion-button-active-icon-rotation); } } @@ -34,6 +34,7 @@ background-repeat: no-repeat; background-position: center; background-size: 1.5rem; + transform: rotate($accordion-button-icon-rotation); @include transition($accordion-icon-transition); } diff --git a/scss/_variables.scss b/scss/_variables.scss index bf0c14abd7aa..7b7177237d7f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -981,8 +981,10 @@ $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-rotation: 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-rotation: 180deg !default; $accordion-flush-button-bg: transparent !default; From 3beab28c62f6c703de562a4e4372b22b325d9765 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Tue, 11 Feb 2020 16:25:55 +0100 Subject: [PATCH 14/16] Replace fixed rotate value with general transform property. --- scss/_accordion.scss | 4 ++-- scss/_variables.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index d0fc919d6eea..ae02009a2cb5 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -20,7 +20,7 @@ background-color: $accordion-button-active-bg !important; // stylelint-disable-line declaration-no-important &::after { background-image: escape-svg($accordion-button-active-icon); - transform: rotate($accordion-button-active-icon-rotation); + transform: $accordion-button-active-icon-transform; } } @@ -34,7 +34,7 @@ background-repeat: no-repeat; background-position: center; background-size: 1.5rem; - transform: rotate($accordion-button-icon-rotation); + transform: $accordion-button-icon-transform; @include transition($accordion-icon-transition); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 7b7177237d7f..071c9756c812 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -981,10 +981,10 @@ $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-rotation: 0deg !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-rotation: 180deg !default; +$accordion-button-active-icon-transform: rotate(180deg) !default; $accordion-flush-button-bg: transparent !default; From 2419f2e1036b5c20381b4f15c9dea441d2dfda97 Mon Sep 17 00:00:00 2001 From: gijsroge Date: Tue, 11 Feb 2020 17:20:50 +0100 Subject: [PATCH 15/16] Separate active states & readability improvements * Striped / Flushed variations now have a separate bg/text color active states that are configurable. * Used breaks to give list of accordion variables more readability * Added inline explanations where needed. --- scss/_accordion.scss | 33 +++++++++++++++---- scss/_variables.scss | 75 +++++++++++++++++++++++++++----------------- 2 files changed, 73 insertions(+), 35 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index ae02009a2cb5..8e58c678c359 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -16,14 +16,16 @@ @include border-radius(0); &:not(.collapsed) { - color: $accordion-button-active-color !important; // stylelint-disable-line declaration-no-important - background-color: $accordion-button-active-bg !important; // stylelint-disable-line declaration-no-important + 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; @@ -57,7 +59,7 @@ border-bottom: $accordion-border-width solid $accordion-border-color; // Only set a border-radius on the last item if the accordion is collapsed - &:not([aria-expanded="true"]) { + &.collapsed { @include border-bottom-radius($accordion-border-radius); } } @@ -89,7 +91,14 @@ .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); @@ -131,16 +140,28 @@ .accordion-striped { .accordion-button { - background-color: transparent; + 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 { - background-color: $accordion-button-accent-bg; + 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-body-accent-bg; + background-color: $accordion-striped-body-accent-bg; } } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 071c9756c812..912e56291762 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -963,35 +963,52 @@ $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-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-flush-button-bg: transparent !default; - -$accordion-striped-order: odd !default; -$accordion-accent-bg: rgba($black, .025) !default; -$accordion-button-accent-bg: $accordion-accent-bg !default; -$accordion-body-accent-bg: null !default; +$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 From 25aba774d0f03d866e47f7518783635a3f6f6cf4 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 11 Feb 2020 18:28:56 +0200 Subject: [PATCH 16/16] Update alerts.md --- site/content/docs/4.3/components/alerts.md | 3 --- 1 file changed, 3 deletions(-) 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 ---