feat(accordion): update accordion styles accordingly to navigation st…

…encils, add sizes variant and improve focus visibility to close #159
Orange-OpenSource · Nov 5, 2019 · 9f07e9e · 9f07e9e
1 parent a78afc6
commit 9f07e9e
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 40 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -265,49 +265,70 @@
 .accordion {
   // Boosted mod
   .card {
-    margin-bottom: 0;
-    border: 0;
-    border-bottom: $border-width / 2 solid $gray-500;
+    position: static;
+    border-color: $gray-500;
+    border-width: 0 0 $border-width;
     &:first-child {
-      border-top: $border-width / 2 solid $gray-500;
+      border-width: $border-width 0;
+    }
+
+    @include media-breakpoint-up(md) {
+      border-width: 0 0 $border-width / 2;
+      &:first-child {
+        border-width: $border-width / 2 0;
+      }
     }
   }
 
   .card-header {
     padding: 0;
-    background-color: $white;
+    background: none;
     border: 0;
 
-    &,
-    h5 {
-      margin: 0;
-      font-size: $font-size-base;
-      font-weight: $font-weight-bold;
-      line-height: 1;
-    }
-
     button,
     a {
-      position: relative;
-      display: block;
-      width: 100%;
-      padding: 1rem 2.125rem 1rem 0;
-      line-height: 1.125rem;
-      text-align: left;
+      display: flex;
+      width: calc(100% + (.875rem * 2));
+      padding: .875rem;
+      margin: 0 -.875rem;
       border: 0;
 
       &::after {
-        position: absolute;
-        top: 1.3125rem;
-        right: .625rem;
+        align-self: center;
         width: .875rem;
         height: .4375rem;
+        margin-left: auto;
         content: "";
         background-image: escape-svg($accordion-arrow-icon);
       }
 
-      // stylelint-disable-next-line selector-no-qualifying-type
-      &[aria-expanded="true"]::after {
+      &:hover::after,
+      &[aria-expanded="true"]::after { // stylelint-disable-line selector-no-qualifying-type
+        background-image: escape-svg($accordion-arrow-icon-active);
+      }
+
+      &:focus {
+        z-index: 2;
+        outline-offset: 0;
+      }
+    }
+
+    .btn-sm {
+      width: calc(100% + (.75rem * 2));
+      padding: .75rem;
+      margin: 0 -.75rem;
+    }
+
+    .btn-lg {
+      width: calc(100% + (#{map-get($spacers, 3)} * 2));
+      padding: map-get($spacers, 3);
+      margin: 0 -#{map-get($spacers, 3)};
+    }
+
+    [aria-expanded="true"] {
+      color: $primary;
+
+      &::after {
         transform: rotate(180deg);
       }
     }
@@ -318,12 +339,3 @@
     margin: 0 0 $spacer;
   }
 }
-// For mobile display emphase the border
-@include media-breakpoint-down(sm) {
-  .accordion .card {
-    border-bottom-width: $border-width;
-    &:first-child {
-      border-top-width: $border-width;
-    }
-  }
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1245,8 +1245,9 @@ $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
 // Boosted mod
 // Accordions
 
-$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;
-$o-sortable-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'><path d='M 7,17 0,10 h 14 l -7,7 z'/><path d='M 7,0 14,7 0,7 7,0 z'/></svg>") !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;
+$o-sortable-hover-icon:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'><path d='M 7,17 0,10 h 14 l -7,7 z'/><path d='M 7,0 14,7 0,7 7,0 z'/></svg>") !default;
 
 // arrow Links
 

diff --git a/site/docs/4.3/components/collapse.md b/site/docs/4.3/components/collapse.md
@@ -83,7 +83,6 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
         </button>
       </h2>
     </div>
-
     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
       <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.
@@ -124,6 +123,108 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
 
 [comment]: # Boosted mod
 
+#### Sizes
+
+You may use [buttons' sizes utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#sizes) to increase or decrease accordion size.
+
+{% capture 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>
+{% endcapture %}
+{% include example.html content=example %}
+
 ### Multiple openable
 
 Simply add the `.multi` class on each panel to get multi openable accordions.
@@ -133,12 +234,11 @@ Simply add the `.multi` class on each panel to get multi openable accordions.
   <div class="card multi">
     <div class="card-header" role="tab" id="headingOne-1">
       <h5 class="mb-0">
-        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne-1" role="button" aria-expanded="true" aria-controls="collapseOne-1">
+        <a data-toggle="collapse" data-parent="#accordionExample-2" href="#collapseOne-1" role="button" aria-expanded="true" aria-controls="collapseOne-1">
           Collapsible Group Item #1
         </a>
       </h5>
     </div>
-
     <div id="collapseOne-1" class="collapse show" role="tabpanel" aria-labelledby="headingOne-1">
       <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.
@@ -148,7 +248,7 @@ Simply add the `.multi` class on each panel to get multi openable accordions.
   <div class="card multi">
     <div class="card-header" role="tab" id="headingTwo-1">
       <h5 class="mb-0">
-        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo-1" role="button" aria-expanded="false" aria-controls="collapseTwo-1">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordionExample-2" href="#collapseTwo-1" role="button" aria-expanded="false" aria-controls="collapseTwo-1">
           Collapsible Group Item #2
         </a>
       </h5>
@@ -162,7 +262,7 @@ Simply add the `.multi` class on each panel to get multi openable accordions.
   <div class="card multi">
     <div class="card-header" role="tab" id="headingThree-1">
       <h5 class="mb-0">
-        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree-1" role="button" aria-expanded="false" aria-controls="collapseThree-1">
+        <a class="collapsed" data-toggle="collapse" data-parent="#accordionExample-2" href="#collapseThree-1" role="button" aria-expanded="false" aria-controls="collapseThree-1">
           Collapsible Group Item #3
         </a>
       </h5>