From b56b14d2f4a5c30c9a3d106377b40d3a7f595b8a Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 16 Aug 2017 19:53:45 +0800
Subject: Move Panels and Empty states to Components from Layout

---
 docs/experimentals.html | 54 ++++++++++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

(limited to 'docs/experimentals.html')

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 7008acb..18ca5d2 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -105,12 +105,6 @@
                   <li class="menu-item">
                     <a href="layout.html#navbar">Navbar</a>
                   </li>
-                  <li class="menu-item">
-                    <a href="layout.html#panels">Panels</a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="layout.html#empty">Empty states</a>
-                  </li>
                 </ul>
               </div>
             </div>
@@ -145,6 +139,9 @@
                   <li class="menu-item">
                     <a href="components.html#chips">Chips</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="components.html#empty">Empty states</a>
+                  </li>
                   <li class="menu-item">
                     <a href="components.html#menus">Menus</a>
                   </li>
@@ -157,6 +154,9 @@
                   <li class="menu-item">
                     <a href="components.html#pagination">Pagination</a>
                   </li>
+                  <li class="menu-item">
+                    <a href="components.html#panels">Panels</a>
+                  </li>
                   <li class="menu-item">
                     <a href="components.html#popovers">Popovers</a>
                   </li>
@@ -252,15 +252,15 @@
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
 
       <div id="content" class="s-content">
-        <div id="experimentals" class="container">
-          <h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3>
+        <div class="container">
+          <h3 id="experimentals" class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3>
           <div class="docs-note">
             <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
           </div>
         </div>
 
-        <div id="calendars" class="container">
-          <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
+        <div class="container">
+          <h3 id="calendars" class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
           <div class="docs-note">
             <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
           </div>
@@ -328,7 +328,7 @@
             </div>
           </div>
 
-          <h4 class="s-subtitle">Calendars large</h4>
+          <h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
           <div class="columns">
             <div class="column col-12">
               <div class="calendar calendar-lg">
@@ -422,8 +422,8 @@
 
         </div>
 
-        <div id="carousels" class="container">
-          <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3>
+        <div class="container">
+          <h3 id="carousels" class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3>
           <div class="docs-note">
             <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
           </div>
@@ -487,8 +487,8 @@
 
         </div>
 
-        <div id="comparison" class="container">
-          <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3>
+        <div class="container">
+          <h3 id="comparison" class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3>
           <div class="docs-note">
             <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
           </div>
@@ -525,8 +525,8 @@
 
         </div>
 
-        <div id="filters" class="container">
-          <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3>
+        <div class="container">
+          <h3 id="filters" class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3>
           <div class="docs-note">
             <p>Filters are CSS only content filters.</p>
           </div>
@@ -674,8 +674,8 @@
 
         </div>
 
-        <div id="meters" class="container">
-          <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3>
+        <div class="container">
+          <h3 id="meters" class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3>
           <div class="docs-note">
             <p>Meters represent the value within the known range.</p>
           </div>
@@ -709,8 +709,8 @@
 
         </div>
 
-        <div id="parallax" class="container">
-          <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
+        <div class="container">
+          <h3 id="parallax" class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
           <div class="docs-note">
             <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
           </div>
@@ -752,8 +752,8 @@
 
         </div>
 
-        <div id="progress" class="container">
-          <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3>
+        <div class="container">
+          <h3 id="progress" class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3>
           <div class="docs-note">
             <p>The Progress indicates the progress completion of a task.</p>
           </div>
@@ -779,8 +779,8 @@
 
         </div>
 
-        <div id="sliders" class="container">
-          <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
+        <div class="container">
+          <h3 id="sliders" class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
           <div class="docs-note">
             <p>Sliders are for selecting values from ranges.</p>
           </div>
@@ -799,8 +799,8 @@
 
         </div>
 
-        <div id="timelines" class="container">
-          <h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3>
+        <div class="container">
+          <h3 id="timelines" class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3>
           <div class="docs-note">
             <p>Timelines are ordered sequences of activities.</p>
           </div>
-- 
cgit v1.3.1-26-gb76a