Merge pull request #188 from picturepan2/0.2.13 v0.2.13

0.2.13

1 files changed, 127 insertions, 15 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 312cbdb..fa1ced1 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -7,9 +7,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Experimentals - Spectre.css</title>
-  <link rel="stylesheet" href="css/spectre.css" />
-  <link rel="stylesheet" href="css/spectre-exp.css" />
-  <link rel="stylesheet" href="css/spectre-icons.css" />
+  <link rel="stylesheet" href="dist/spectre.css" />
+  <link rel="stylesheet" href="dist/spectre-exp.css" />
+  <link rel="stylesheet" href="dist/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
 </head>
 <body>
@@ -33,7 +33,7 @@
       <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
         <ul class="docs-nav nav nav-vertical">
           <li class="nav-item">
-            <a href="index.html">Getting started</a>
+            <a href="index.html#introduction">Getting started</a>
           </li>
           <li class="nav-item">
             <a href="elements.html">Elements</a>
@@ -57,7 +57,7 @@
                 <a href="experimentals.html#carousels">Carousels</a>
               </li>
               <li class="nav-item">
-                <a href="experimentals.html#comparison">Comparison slider</a>
+                <a href="experimentals.html#comparison">Comparison sliders</a>
               </li>
               <li class="nav-item">
                 <a href="experimentals.html#filters">Filters</a>
@@ -74,6 +74,9 @@
               <li class="nav-item">
                 <a href="experimentals.html#sliders">Sliders</a>
               </li>
+              <li class="nav-item">
+                <a href="experimentals.html#timelines">Timelines</a>
+              </li>
             </ul>
           </li>
         </ul>
@@ -256,13 +259,13 @@
           <section class="notes">
             <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p>
           </section>
-          <div class="columns text-center">
+          <div class="columns">
             <div class="column col-12">
-              <div class="carousel carousel-autoplay">
-                <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked>
-              	<input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator">
-                <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator">
-              	<input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator">
+              <div class="carousel">
+                <input type="radio" id="slide-1" name="carousel-radio" hidden class="carousel-locator" checked />
+                <input type="radio" id="slide-2" name="carousel-radio" hidden class="carousel-locator" />
+                <input type="radio" id="slide-3" name="carousel-radio" hidden class="carousel-locator" />
+                <input type="radio" id="slide-4" name="carousel-radio" hidden class="carousel-locator" />
                 <div class="carousel-container">
                   <figure class="carousel-item">
                     <label class="item-prev btn btn-action btn-lg" for="slide-4">
@@ -337,6 +340,21 @@
             </div>
           </div>
 
+<!-- comparison sliders example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-slider&quot;</span>&gt;
+  &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-before&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- image (before) --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-label&quot;</span>&gt;Before&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">/figure</span>&gt;
+
+  &lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-after&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+    <span class="com">&lt;!-- image (after) --&gt;</span>
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-label&quot;</span>&gt;After&lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;comparison-resizer&quot;</span> <span class="atn">readonly</span> <span class="atn">cols</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">rows</span>=<span class="atv">&quot;0&quot;</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
+  &lt;<span class="tag">/figure</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section id="filters" class="container">
@@ -469,7 +487,7 @@
           <section class="notes">
             <p><strong>Meters</strong> represent the value within the known range.</p>
           </section>
-          <div class="columns text-center">
+          <div class="columns">
             <div class="column col-3 col-xs-12">
               <meter class="meter" value="20" min="0" max="100"></meter>
             </div>
@@ -504,7 +522,7 @@
           <section class="notes">
             <p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
           </section>
-          <div class="columns text-center">
+          <div class="columns">
             <div class="column col-12">
               <div class="parallax">
                 <div class="parallax-top-left"></div>
@@ -547,7 +565,7 @@
           <section class="notes">
             <p>The <strong>Progress</strong> indicates the progress completion of a task.</p>
           </section>
-          <div class="columns text-center">
+          <div class="columns">
             <div class="column col-3 col-xs-12">
               <progress class="progress" value="75" max="100"></progress>
             </div>
@@ -574,7 +592,7 @@
           <section class="notes">
             <p><strong>Sliders</strong> are for selecting values from ranges.</p>
           </section>
-          <div class="columns text-center">
+          <div class="columns">
             <div class="column col-6 col-xs-12">
               <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50" />
             </div>
@@ -589,6 +607,100 @@
 
         </section>
 
+        <section id="timelines" class="container">
+          <header class="text-center"><h3>Timelines</h3></header>
+          <section class="notes">
+            <p><strong>Timelines</strong> are ordered sequences of activities.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-9 col-sm-12">
+              <div class="timeline">
+                <div class="timeline-item" id="timeline-example-1">
+                  <div class="timeline-left icon-lg">
+                    <a href="#timeline-example-1" class="timeline-icon tooltip" data-tooltip="March 2016"></a>
+                  </div>
+                  <div class="timeline-content">
+                    <div class="tile">
+                      <div class="tile-content">
+                        <p class="tile-subtitle">March 2016</p>
+                        <p class="tile-title">Initial commit</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="timeline-item" id="timeline-example-2">
+                  <div class="timeline-left">
+                    <a href="#timeline-example-2" class="timeline-icon icon-lg tooltip" data-tooltip="February 2017">
+                      <i class="icon icon-check"></i>
+                    </a>
+                  </div>
+                  <div class="timeline-content">
+                    <div class="tile">
+                      <div class="tile-content">
+                        <p class="tile-subtitle">February 2017</p>
+                        <p class="tile-title">New Documents experience</p>
+                        <p class="tile-title"><a href="components.html#bars">Bars</a>: represent the progress of a task</p>
+                        <p class="tile-title"><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</p>
+                        <p class="tile-title"><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</p>
+                      </div>
+                      <div class="tile-action">
+                        <button class="btn">View</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="timeline-item" id="timeline-example-3">
+                  <div class="timeline-left">
+                    <a href="#timeline-example-3" class="timeline-icon icon-lg tooltip" data-tooltip="March 2017">
+                      <i class="icon icon-check"></i>
+                    </a>
+                  </div>
+                  <div class="timeline-content">
+                    <div class="tile">
+                      <div class="tile-content">
+                        <p class="tile-subtitle">March 2017</p>
+                        <p class="tile-title"><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</p>
+                        <p class="tile-title"><a href="components.html#popovers">Popovers</a>: small overlay content containers</p>
+                        <p class="tile-title"><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</p>
+                        <p class="tile-title"><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</p>
+                      </div>
+                      <div class="tile-action">
+                        <button class="btn">View</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+<!-- timelines example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-item&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;timeline-example-1&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-left&quot;</span>&gt;
+      &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-icon&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#timeline-example-1&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-content&quot;</span>&gt;
+      <span class="com">&lt;!-- tiles structure --&gt;</span>
+    &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-item&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;timeline-example-2&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-left&quot;</span>&gt;
+      &lt;<span class="tag">a</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-icon icon-lg&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;#timeline-example-2&quot;</span>&gt;
+        &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-check&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+      &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;timeline-content&quot;</span>&gt;
+      <span class="com">&lt;!-- tiles structure --&gt;</span>
+    &lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+  ...
+&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+        </section>
+
         <section class="container">
           <div class="divider"></div>
           <ul class="pagination">