Skip to content

Commit

Permalink
feat(collapse): Orange branded 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed May 14, 2020
1 parent af93f30 commit ee8b3ef
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 10 deletions.
74 changes: 72 additions & 2 deletions scss/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,14 @@

.accordion {
> .card {
overflow: hidden;
// Boosted mod
border-color: $gray-500;
border-width: $border-width 0;

@include media-breakpoint-up(md) {
border-width: $border-width / 2 0;
}
// End mod

&:not(:last-of-type) {
border-bottom: 0;
Expand All @@ -228,9 +235,72 @@
@include border-top-radius(0);
}

// Boosted mod
> .card-header {
@include border-radius(0);
margin-bottom: -$card-border-width;
padding: 0;
background-color: $card-cap-color;
border: 0;

.btn {
width: add(100%, $accordion-spacer * 2);
padding: $card-cap-padding-y;
margin: 0 -#{$accordion-spacer};
@include font-size($h3-font-size);
line-height: $h3-line-height;
text-decoration: if($link-decoration == none, null, none);
letter-spacing: $h3-spacing;
border: 0;

&:not(.collapsed) {
color: $primary;

&::after {
transform: rotate(180deg);
}
}

&::after {
align-self: center;
width: $accordion-spacer;
height: $accordion-spacer / 2;
margin: 0 map-get($spacers, 2) 0 auto;
content: "";
background: escape-svg($accordion-arrow-icon) no-repeat 50% / $accordion-arrow-size;
}

&:hover::after,
&:not(.collapsed)::after {
// @todo drop this in favor of `mask-image` & `background-color` (#370)
background-image: escape-svg($accordion-arrow-icon-active);
}

&:focus {
z-index: 2;
outline-offset: 0;
}
}

.btn-sm {
padding-top: $accordion-spacer-sm;
padding-bottom: $accordion-spacer-sm;
@include font-size($h5-font-size);
line-height: $h5-line-height;
letter-spacing: $h5-spacing;
}

.btn-lg {
padding-top: $accordion-spacer;
padding-bottom: $accordion-spacer;
@include font-size($h2-font-size);
line-height: $h2-line-height;
letter-spacing: $h2-spacing;
}
}

.card-body {
padding: 0 $spacer $spacer 0;
}
// End mod
}
}
20 changes: 15 additions & 5 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -533,7 +533,7 @@ $table-caption-padding: .75rem !default; // Boosted mod
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y: .375rem !default;
$input-btn-padding-y: .5rem !default;
$input-btn-padding-x: 1.125rem !default;
$input-btn-font-family: $font-family-sans-serif !default;
$input-btn-font-size: $font-size-base !default;
Expand Down Expand Up @@ -989,8 +989,8 @@ $pagination-disabled-border-color: $pagination-disabled-color !default;
// Boosted mod
$pagination-icon: $chevron-icon !default;
$pagination-icon-hover: $chevron-icon-hover !default;
$pagination-icon-width: .5625rem !default;
$pagination-icon-height: .9375rem !default;
$pagination-icon-width: add(.5rem, 1px) !default;
$pagination-icon-height: subtract(1rem, 1px) !default;
$pagination-icon-background: escape-svg($pagination-icon) no-repeat 50% / #{$pagination-icon-width} $pagination-icon-height !default;
// End mod

Expand All @@ -1004,13 +1004,12 @@ $card-border-radius: $border-radius !default;
$card-border-color: $black !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: .75rem !default;
$card-cap-padding-x: 1.25rem !default;
$card-cap-padding-x: $spacer !default;
$card-cap-bg: $black !default;
$card-cap-color: $white !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
//$card-accordion-spacer: .875rem !default; // Boosted mod

$card-img-overlay-padding: $spacer !default;

Expand Down Expand Up @@ -1315,3 +1314,14 @@ $kbd-color: $black !default;
$kbd-bg: $gray-300 !default;

$pre-color: $gray-900 !default;

//
// Boosted mod
//

// Accordions
$accordion-spacer: .875rem !default;
$accordion-spacer-sm: map-get($spacers, 2) !default;
$accordion-arrow-size: .875rem 1rem !default;
$accordion-arrow-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path d='M7 7L0 0h14L7 7z'/></svg>") !default;
$accordion-arrow-icon-active: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$primary}' d='M7 7L0 0h14L7 7z'/></svg>") !default;
107 changes: 104 additions & 3 deletions site/content/docs/4.3/components/collapse.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
Expand All @@ -93,7 +93,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<button class="btn btn-link text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
Expand All @@ -107,7 +107,7 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<button class="btn btn-link text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
Expand All @@ -121,6 +121,107 @@ Using the [card]({{< docsref "/components/card" >}}) component, you can extend t
</div>
{{< /example >}}

### Sizes

You may use [buttons' sizes utilities]({{< docsref "/components/buttons" >}}#sizes) to increase or decrease accordion size.

{{< example >}}
<div class="row">
<div class="col-md-6">
<div class="accordion" id="accordionExample-3">
<div class="card">
<div class="card-header" id="headingOne-3">
<h2 class="mb-0">
<button class="btn btn-link btn-sm" type="button" data-toggle="collapse" data-target="#collapseOne-3" aria-expanded="true" aria-controls="collapseOne-3">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne-3" class="collapse show" aria-labelledby="headingOne-3" data-parent="#accordionExample-3">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo-3">
<h2 class="mb-0">
<button class="btn btn-link btn-sm collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo-3" aria-expanded="false" aria-controls="collapseTwo-3">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo-3" class="collapse" aria-labelledby="headingTwo-3" data-parent="#accordionExample-3">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree-3">
<h2 class="mb-0">
<button class="btn btn-link btn-sm collapsed" type="button" data-toggle="collapse" data-target="#collapseThree-3" aria-expanded="false" aria-controls="collapseThree-3">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree-3" class="collapse" aria-labelledby="headingThree-3" data-parent="#accordionExample-3">
<div class="card-body">
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.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion" id="accordionExample-4">
<div class="card">
<div class="card-header" id="headingOne-4">
<h2 class="mb-0">
<button class="btn btn-link btn-lg" type="button" data-toggle="collapse" data-target="#collapseOne-4" aria-expanded="true" aria-controls="collapseOne-4">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne-4" class="collapse show" aria-labelledby="headingOne-4" data-parent="#accordionExample-4">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo-4">
<h2 class="mb-0">
<button class="btn btn-link btn-lg collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo-4" aria-expanded="false" aria-controls="collapseTwo-4">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo-4" class="collapse" aria-labelledby="headingTwo-4" data-parent="#accordionExample-4">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree-4">
<h2 class="mb-0">
<button class="btn btn-link btn-lg collapsed" type="button" data-toggle="collapse" data-target="#collapseThree-4" aria-expanded="false" aria-controls="collapseThree-4">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree-4" class="collapse" aria-labelledby="headingThree-4" data-parent="#accordionExample-4">
<div class="card-body">
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.
</div>
</div>
</div>
</div>
</div>
</div>
{{< /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 `<a>` or `<div>`), the attribute `role="button"` should be added to the element.
Expand Down

0 comments on commit ee8b3ef

Please sign in to comment.