diff options
Merge pull request #551 from picturepan2/0.5.8 v0.5.8
0.5.8
12 files changed, 58 insertions, 47 deletions
| -rw-r--r-- | docs/experimentals/autocomplete.html | 6 | ||||
| -rw-r--r-- | docs/experimentals/calendars.html | 6 | ||||
| -rw-r--r-- | docs/experimentals/carousels.html | 8 | ||||
| -rw-r--r-- | docs/experimentals/comparison.html | 8 | ||||
| -rw-r--r-- | docs/experimentals/filters.html | 8 | ||||
| -rw-r--r-- | docs/experimentals/meters.html | 6 | ||||
| -rw-r--r-- | docs/experimentals/off-canvas.html | 8 | ||||
| -rw-r--r-- | docs/experimentals/parallax.html | 8 | ||||
| -rw-r--r-- | docs/experimentals/progress.html | 6 | ||||
| -rw-r--r-- | docs/experimentals/sliders.html | 6 | ||||
| -rw-r--r-- | docs/experimentals/timelines.html | 6 | ||||
| -rw-r--r-- | docs/experimentals/viewer-360.html | 29 |
diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html index c4acee8..30bc7dc 100644 --- a/docs/experimentals/autocomplete.html +++ b/docs/experimentals/autocomplete.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -320,7 +320,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html index 5d12ca0..19993a1 100644 --- a/docs/experimentals/calendars.html +++ b/docs/experimentals/calendars.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -578,7 +578,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html index f584d52..f8fe2f4 100644 --- a/docs/experimentals/carousels.html +++ b/docs/experimentals/carousels.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -200,7 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="carousels"> <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3> - <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <p><small class="label label-secondary">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -293,7 +293,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html index e351e04..8c6b78f 100644 --- a/docs/experimentals/comparison.html +++ b/docs/experimentals/comparison.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -200,7 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="comparison"> <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3> - <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <p><small class="label label-secondary">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -244,7 +244,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html index d87a0bf..3e609c2 100644 --- a/docs/experimentals/filters.html +++ b/docs/experimentals/filters.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -200,7 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="filters"> <h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3> - <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <p><small class="label label-secondary">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -360,7 +360,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html index b449c33..3d65885 100644 --- a/docs/experimentals/meters.html +++ b/docs/experimentals/meters.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -239,7 +239,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html index b5b7636..d01b45d 100644 --- a/docs/experimentals/off-canvas.html +++ b/docs/experimentals/off-canvas.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -200,7 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="off-canvas"> <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3> - <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <p><small class="label label-secondary">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -256,7 +256,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html index bb590c2..a7e2ae4 100644 --- a/docs/experimentals/parallax.html +++ b/docs/experimentals/parallax.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -200,7 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="parallax"> <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3> - <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <p><small class="label label-secondary">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -249,7 +249,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html index ad96664..4649d5b 100644 --- a/docs/experimentals/progress.html +++ b/docs/experimentals/progress.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -234,7 +234,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html index 30a2768..cafcca8 100644 --- a/docs/experimentals/sliders.html +++ b/docs/experimentals/sliders.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -233,7 +233,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html index a1c0599..8418694 100644 --- a/docs/experimentals/timelines.html +++ b/docs/experimentals/timelines.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -291,7 +291,7 @@ </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html index 394db70..065bd36 100644 --- a/docs/experimentals/viewer-360.html +++ b/docs/experimentals/viewer-360.html @@ -31,7 +31,7 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a> + <h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a> </div> <div class="docs-nav"> <div class="accordion-container"> @@ -64,7 +64,7 @@ </li> <li class="menu-item"><a href="../elements/forms.html">Forms</a> </li> - <li class="menu-item"><a href="../elements/icons.html">Icons</a> + <li class="menu-item"><a href="../elements/icons.html">Icons.css</a> </li> <li class="menu-item"><a href="../elements/labels.html">Labels</a> </li> @@ -200,7 +200,7 @@ <div class="docs-content" id="content"> <div class="container" id="viewer-360"> <h3 class="s-title">360-Degree Viewer<a class="anchor" href="#viewer-360" aria-hidden="true">#</a></h3> - <p><small class="label label-primary mr-2">CSS ONLY</small></p> + <p><small class="label label-secondary">CSS ONLY</small></p> <div class="docs-ad"> <div class="hide-md text-center"> <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> @@ -217,25 +217,36 @@ <div class="column col-12"> <div class="viewer-360"> <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);"> - <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');"></figure> + <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/25/5bfa45b4b3f27.jpg');padding-bottom:37.5%;width:100%;"></figure> </div> </div> </div> - <p> - Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2Fsurface-pro-6%2F8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p> - <p>You will need to use your own product image sprite (all angle of photos in one image) and change the attribute <code>max</code> to use this component.</p> - <p>The default image number in CSS is <code>36</code>. You can change the image number by changing the variable <code>$image-number</code> in <code>_viewer-360.scss</code> and re-compiling the CSS.</p> + <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-pro-6/8zcnc665slq5" target="_blank">Microsoft Surface Pro 6</a></p> + <div class="docs-demo columns"> + <div class="column col-12"> + <div class="viewer-360"> + <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);"> + <figure class="viewer-image" style="background-image:url('https://i.loli.net/2018/11/26/5bfc0ab4a5a4f.jpg');padding-bottom:37.5%;width:100%;"></figure> + </div> + </div> + </div> + <p class="text-center">Photo credits: <a href="https://microsoft.msafflnk.net/c/1272791/433017/7593?u=https://www.microsoft.com/en-us/p/surface-studio-2/8SBJXM0M58T4" target="_blank">Microsoft Xbox One X</a></p> + <p>You will need to use your own product image sprite (all angle of photos in one image) and set the attribute <code>max</code> to the image numbers to use this component.</p> <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-360"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-slider slider"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"range"</span> <span class="hljs-attr">min</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">max</span>=<span class="hljs-string">"36"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">oninput</span>=<span class="hljs-string">"this.setAttribute('value', this.value);"</span>></span> <span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"viewer-image"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-image:url('...');"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> + <p>The default image numbers in CSS are <code>36</code>. You can copy the mixin and add more numbers in <code>_viewer-360.scss</code> and re-compiling the CSS.</p> + <pre class="code" data-lang="SCSS"><code>@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">36</span>); +@<span class="hljs-keyword">include</span> viewer-slider-size(<span class="hljs-number">30</span>); +</code></pre> <div class="docs-ad docs-ad-sidebar text-center"> <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> </div> </div> <div class="docs-footer container grid-lg" id="copyright"> - <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> + <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </div> </div> |