From c67deb4708c44178c3a0ea46d8279da1672c32b7 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 5 Jun 2018 21:31:02 +0800
Subject: Update docs demo margin

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

(limited to 'docs/experimentals.html')

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 978788d..0225fbd 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -140,7 +140,7 @@
           <div class="container" id="autocomplete">
             <h3 class="s-title"><a class="anchor" href="#autocomplete" aria-hidden="true">#</a>Autocomplete</h3>
             <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-xs-12">
                 <div class="form-group">
                   <div class="form-autocomplete">
@@ -194,7 +194,7 @@
               Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
               The autocomplete HTML structure is exampled below.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-xs-12">
                 <div class="form-group">
                   <div class="form-autocomplete autocomplete-oneline">
@@ -246,7 +246,7 @@
           <div class="container" id="calendars">
             <h3 class="s-title"><a class="anchor" href="#calendars" aria-hidden="true">#</a>Calendars</h3>
             <p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-4 col-md-12">
                 <div class="calendar">
                   <div class="calendar-nav navbar">
@@ -376,7 +376,7 @@
               </div>
             </div>
             <h4 class="s-subtitle" id="calendars-sizes"><a class="anchor" href="#calendars-sizes" aria-hidden="true">#</a>Calendars sizes</h4>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="calendar calendar-lg">
                   <div class="calendar-nav navbar">
@@ -514,7 +514,7 @@
           <div class="container" id="carousels">
             <h3 class="s-title"><a class="anchor" href="#carousels" aria-hidden="true">#</a>Carousels</h3>
             <p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="carousel">
                   <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
@@ -552,7 +552,7 @@
           <div class="container" id="comparison">
             <h3 class="s-title"><a class="anchor" href="#comparison" aria-hidden="true">#</a>Comparison sliders</h3>
             <p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="comparison-slider">
                   <figure class="comparison-before"><img class="rounded" src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper">
@@ -581,7 +581,7 @@
           <div class="container" id="filters">
             <h3 class="s-title"><a class="anchor" href="#filters" aria-hidden="true">#</a>Filters</h3>
             <p>Filters are CSS only content filters.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-12">
                 <div class="filter">
                   <input class="filter-tag" id="tag-0" type="radio" name="filter-radio" hidden="" checked="">
@@ -726,7 +726,7 @@
           <div class="container" id="meters">
             <h3 class="s-title"><a class="anchor" href="#meters" aria-hidden="true">#</a>Meters</h3>
             <p>Meters represent the value within the known range.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-xs-12">
                 <meter class="meter" value="20" min="0" max="100"></meter>
               </div>
@@ -755,7 +755,7 @@
               By default, the off-canvas menu is collapsed whenever the window width is.
               But you can add the <code>off-canvas-sidebar-show</code> class to the <code>off-canvas</code> to make the sidebar expanded when the window width is larger than or equal to <strong>960px</strong>.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column">
                 <div class="off-canvas off-canvas-sidebar-show"><a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-demo"><i class="icon icon-menu"></i></a>
                   <div class="off-canvas-sidebar flex-centered" id="sidebar-demo"><span>Sidebar</span></div><a class="off-canvas-overlay" href="#close"></a>
@@ -792,7 +792,7 @@
           <div class="container" id="parallax">
             <h3 class="s-title"><a class="anchor" href="#parallax" aria-hidden="true">#</a>Parallax</h3>
             <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-sm-12 col-8 col-mx-auto">
                 <div class="parallax">
                   <div class="parallax-top-left" tabindex="1"></div>
@@ -827,7 +827,7 @@
           <div class="container" id="progress">
             <h3 class="s-title"><a class="anchor" href="#progress" aria-hidden="true">#</a>Progress</h3>
             <p>The Progress indicates the progress completion of a task.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-3 col-xs-12">
                 <progress class="progress" value="75" max="100"></progress>
               </div>
@@ -850,7 +850,7 @@
             <p>You can add the class <code>tooltip</code> to have tooltip labels.
               If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
             </p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
                 <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
               </div>
@@ -866,7 +866,7 @@
           <div class="container" id="timelines">
             <h3 class="s-title"><a class="anchor" href="#timelines" aria-hidden="true">#</a>Timelines</h3>
             <p>Timelines are ordered sequences of activities.</p>
-            <div class="columns">
+            <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <div class="timeline">
                   <div class="timeline-item" id="timeline-example-1">
-- 
cgit v1.3.1-23-gd82d