Updating component list and accordion styles

diff --git a/docs/assets/scss/_accordion-content.scss b/docs/assets/scss/_accordion-content.scss
index aab6cf3f74a73e0ac00f5618576311cd7fa0e0e5..3d059b534d2e4fb2ee706f267ad838b73dd87800 100644 (file)
--- a/docs/assets/scss/_accordion-content.scss
+++ b/docs/assets/scss/_accordion-content.scss
@@ -1,54 +1,58 @@
-.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;
-}
-
-
 .welcome-accordion-item {
-  
+
   &.is-active {
-    box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.15);  
-    
+    // box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.15);
+
     .accordion-title {
       margin-bottom: 0;
       border-bottom: none;
       color: $black;
+      border: none;
     }
-    
+
     .accordion-content {
-      margin-bottom: 1rem;
-      border-bottom: 1px solid #e6e6e6;
+      // margin-bottom: 1rem;
+      border: none;
+      border-bottom: 1px dashed #e6e6e6;
     }
   }
-}
 
+  .accordion-title:hover,
+  .accordion-title:focus {
+    color: $black;
+    background: none;
+  }
+
+  .accordion-title {
+    background-color: #f5f5f5;
+    color: #676767;
+    font-size: 1.25rem;
+    // margin-bottom: 1rem;
+    // border-bottom: 1px solid #e6e6e6;
+    background: none;
+    border: none;
+    border-bottom: 1px dashed #e6e6e6;
+  }
 
+  .accordion-title::before {
+    color: $medium-gray;
+  }
+}
 
+.welcome-accordion-item:last-child {
+
+  .accordion-title{
+    border-bottom: none;
+  }
+}
 
 .accordion-content-item-divider {
   border-bottom: 1px dashed #e5e5e5;
 }
 
 .accordion-content-item-cta {
-  
+
   img {
     margin-right: 0.5rem;
   }
-}
\ No newline at end of file
+}

diff --git a/docs/assets/scss/_component-list.scss b/docs/assets/scss/_component-list.scss
index 17b030153ca7fdcb23088bf90101eed2cf2b02a8..5bfb2977d3d97b51a9bf328ab81615e611a6c8a6 100644 (file)
--- a/docs/assets/scss/_component-list.scss
+++ b/docs/assets/scss/_component-list.scss
@@ -5,19 +5,33 @@
 
 .docs-nav-category {
   background: none;
-  
+
   .accordion-title {
-    border: none; 
-    color: #383838;
+    border: none;
+    color: #444444;
+    font-weight: 600;
+  }
+
+  .accordion-title:hover {
+    border: none;
+    color: $black;
     font-weight: 600;
   }
-  
+
+  .accordion-item:last-child {
+
+    .accordion-title{
+      border-bottom: none;
+    }
+  }
+
   .accordion-content {
     padding-top: 0;
     border: none;
     background: none;
+    padding-bottom: 0.5rem;
   }
-  
+
   .is-active > .accordion-title::before {
     content: '';
   }
@@ -27,7 +41,6 @@
   }
 }
 
-
 .docs-nav.menu a:hover {
   background: none;
 }
@@ -43,16 +56,22 @@
 
 .docs-nav-subcategory {
   list-style: none;
-  margin-left: 0.65rem;
-  
+  margin-left: 0.85rem;
+
   li {
     padding: 0.25rem 0;
   }
-  
+
   li a {
     font-size: 1rem;
-    color: #414141;
+    color: #717171;
     line-height: 1.5;
+    transition: color 0.3s ease;
+  }
+
+  li a:hover {
+    color: $black;
+    transition: color 0.3s ease;
   }
 }
 

diff --git a/docs/assets/scss/_course-callout.scss b/docs/assets/scss/_course-callout.scss
index a26c94314ad3236ce7b5a70d4b66f1fc35465600..8c01571368c5946bd3ade91ac9b0c55f633ea931 100644 (file)
--- a/docs/assets/scss/_course-callout.scss
+++ b/docs/assets/scss/_course-callout.scss
@@ -3,7 +3,7 @@
   border-top: 1px solid #cacaca;
   background: #F5F5F5;
   padding-top: 10px;
-  margin-top: 25px;
+  // margin-top: 25px;
 
   .sites-course {
     position: relative;
@@ -14,7 +14,7 @@
     bottom: -205px;
     animation:  ad-unit-hover 8s infinite ease;
   }
-  
+
   .sites-course-title {
     font-size: 30px;
     margin-bottom: 1rem;
@@ -61,4 +61,3 @@
   }
 
 }
-

diff --git a/docs/layout/default.html b/docs/layout/default.html
index 2ef99e70f25b3799874c98f197d9ce42f62876f3..1e96fc39a6bef634bc04a7a873adfbc32d059936 100644 (file)
--- a/docs/layout/default.html
+++ b/docs/layout/default.html
@@ -48,14 +48,13 @@
       <div class="collapse expanded row secondary-bar">
         <div class="medium-3 large-2 columns">
         
-          <button class="button version-dropdown-label" data-toggle="example-dropdown"><span class="foundation-version-label">Foundation for Sites</span><span class="foundation-version-number">6.3.0</span></button>
+          <button class="button version-dropdown-label" data-toggle="example-dropdown"><span class="foundation-version-label">Foundation for Sites</span><span class="foundation-version-number">6.0</span></button>
             <div class="dropdown-pane version-dropdown" id="example-dropdown" data-dropdown data-auto-focus="true">
               <ul class="version-dropdown-menu">
-                <li class="version-dropdown-menu-link"><a href="#">6.2.0</a></li>
-                <li class="version-dropdown-menu-link"><a href="#">6.1.0</a></li>
-                <li class="version-dropdown-menu-link"><a href="#">6.0.0</a></li>
-                <li class="version-dropdown-menu-link"><a href="#">5.9.0</a></li>
-                <li class="version-dropdown-menu-link"><a href="#">5.8.0</a></li>
+                <li class="version-dropdown-menu-link"><a href="#">6.0</a></li>
+                <li class="version-dropdown-menu-link"><a href="#">5.0</a></li>
+                <li class="version-dropdown-menu-link"><a href="#">4.0</a></li>
+                <li class="version-dropdown-menu-link"><a href="#">3.0</a></li>
               </ul>
             </div>
 <!--

diff --git a/docs/pages/index.md b/docs/pages/index.md
index f989137723de65f241116c3940275ceb187a553a..f6da6ffd2d765f5f341920bbd9d132564406ace3 100644 (file)
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -8,7 +8,7 @@ tags:
 
 ## Installing Foundation
 
-There are a number of ways to install Foundation for Sites. Our installatin page will help you find the best option for you. 
+There are a number of ways to install Foundation for Sites. Our installation page will help you find the best option for you.
 
 <a href="installation.html" class="large button">Install Foundation for Sites</a>
 
@@ -16,13 +16,13 @@ There are a number of ways to install Foundation for Sites. Our installatin page
 
 ## New to 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 welcome-accordion-item is-active" data-accordion-item>
+<ul class="accordion welcome-accordion" data-accordion data-allow-all-closed="true">
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Intro Videos</a>
     <div class="accordion-content " data-tab-content>
-      
+
       <div class="row">
         <div class="medium-4 columns">
           <img src="http://placehold.it/350x250">
@@ -32,9 +32,9 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
           <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
         </div>
       </div>
-      
+
       <hr class="accordion-content-item-divider">
-      
+
       <div class="row">
         <div class="medium-4 columns">
           <img src="http://placehold.it/350x250">
@@ -44,9 +44,9 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
           <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
         </div>
       </div>
-      
+
       <hr class="accordion-content-item-divider">
-      
+
       <div class="row">
         <div class="medium-4 columns">
           <img src="http://placehold.it/350x250">
@@ -56,13 +56,13 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
           <a href="#" class="accordion-content-item-cta"><img src="http://placehold.it/20x20">Watch Video</a>
         </div>
       </div>
-      
+
     </div>
   </li>
   <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Beginner Lessons</a>
       <div class="accordion-content " data-tab-content>
-      
+
         <div class="row">
           <div class="medium-4 columns">
             <img src="http://placehold.it/350x250">
@@ -102,7 +102,7 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
   <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Simple Templates</a>
       <div class="accordion-content " data-tab-content>
-      
+
         <div class="row">
           <div class="medium-4 columns">
             <img src="http://placehold.it/350x250">
@@ -142,7 +142,7 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
   <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Basic Documentation</a>
       <div class="accordion-content " data-tab-content>
-      
+
         <div class="row">
           <div class="medium-4 columns">
             <img src="http://placehold.it/350x250">
@@ -187,8 +187,8 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
 
 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 welcome-accordion-item is-active" data-accordion-item>
+<ul class="accordion welcome-accordion" data-accordion data-allow-all-closed="true">
+  <li class="accordion-item welcome-accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Latest updates in Foundation 6.3.0</a>
     <div class="accordion-content" data-tab-content>
       I would start in the open state, due to using the `is-active` state class.
@@ -218,4 +218,4 @@ With an easy to understand syntax and consistent structure, you'll learn your wa
       I would start in the open state, due to using the `is-active` state class.
     </div>
   </li>
-</ul>
\ No newline at end of file
+</ul>