Updating accordion styles

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
index c41bb83df73dde6d0ea49dee7c6ba2a9ce1f7af7..f3558de6aa52c6006498958901135fb3666b9c8f 100644 (file)
--- a/docs/assets/scss/_accordion-content.scss
+++ b/docs/assets/scss/_accordion-content.scss
@@ -1,7 +1,47 @@
+.accordion {
+  margin-top: 2rem;
+}
+
 .accordion-content-item {
   margin-bottom: 1rem;
 }
 
+.accordion-title {
+  background-color: #f5f5f5;
+  color: #676767;
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.accordion-title:hover,
+.accordion-title:focus {
+  color: $black;
+  background-color: #efefef;
+}
+
+
+.accordion-item {
+  
+  &.is-active {
+    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.15);  
+    
+    .accordion-title {
+      margin-bottom: 0;
+      border-bottom: none;
+      color: $black;
+    }
+    
+    .accordion-content {
+      margin-bottom: 1rem;
+      border-bottom: 1px solid #e6e6e6;
+    }
+  }
+}
+
+
+
+
 .accordion-content-item-divider {
   border-bottom: 1px dashed #e5e5e5;
 }

diff --git a/docs/pages/index.md b/docs/pages/index.md
index 9890098dcdcf07af6d18c56da4c19b994c5ab8f2..11042a9bf02cb24b24bb4e6d35ea68fcbaed02e2 100644 (file)
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -70,7 +70,7 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
 
 ## Experienced with Foundation for Sites?
 
-With an easy to understand syntax and consistent structure, you'll learn your way around Foudnation in no time!
+With an easy to understand syntax and consistent structure, you'll learn your way around Foundation in no time!
 
 <ul class="accordion" data-accordion>
   <li class="accordion-item is-active" data-accordion-item>