From: Andy Cochran <acochran@council.nyc.gov>
Date: Fri, 29 Apr 2016 18:51:20 +0000 (-0400)
Subject: fix radius and hover on Accordion
X-Git-Tag: v6.2.2-rc1~30^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2b701378713f58f3312c3eaae6d6ab29a05936d9;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix radius and hover on Accordion
---

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 3d07bad01..e6e4da7bc 100644
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -46,12 +46,19 @@ $accordion-content-padding: 1rem !default;
 @mixin accordion-container {
   list-style-type: none;
   background: $accordion-background;
-  border: $accordion-content-border;
-  border-bottom: 0;
-  border-radius: $global-radius;
   margin-#{$global-left}: 0;
 }
 
+/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+@mixin accordion-item {
+  &:first-child > :first-child {
+    border-radius: $global-radius $global-radius 0 0;
+  }
+  &:last-child > :last-child {
+    border-radius: 0 0 $global-radius $global-radius;
+  }
+}
+
 /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
 @mixin accordion-title {
   display: block;
@@ -60,7 +67,12 @@ $accordion-content-padding: 1rem !default;
   font-size: rem-calc(12);
   color: $accordion-item-color;
   position: relative;
-  border-bottom: $accordion-content-border;
+  border: $accordion-content-border;
+  border-bottom: 0;
+  :last-child:not(.is-active) > & {
+    border-radius: 0 0 $global-radius $global-radius;
+    border-bottom: $accordion-content-border;
+  }
 
   &:hover,
   &:focus {
@@ -86,9 +98,13 @@ $accordion-content-padding: 1rem !default;
 @mixin accordion-content {
   padding: $accordion-content-padding;
   display: none;
-  border-bottom: $accordion-content-border;
+  border: $accordion-content-border;
+  border-bottom: 0;
   background-color: $accordion-content-background;
   color: $accordion-content-color;
+  :last-child > &:last-child {
+    border-bottom: $accordion-content-border;
+  }
 }
 
 @mixin foundation-accordion {
@@ -97,7 +113,7 @@ $accordion-content-padding: 1rem !default;
   }
 
   .accordion-item {
-    // This class doesn't need styles!
+    @include accordion-item;
   }
 
   .accordion-title {