diff options
Update docs demo margin
1 files changed, 13 insertions, 13 deletions
| -rw-r--r-- | docs/experimentals.html | 26 |
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"> |