diff options
Diffstat (limited to 'docs/elements.html')
| -rw-r--r-- | docs/elements.html | 59 |
1 files changed, 40 insertions, 19 deletions
diff --git a/docs/elements.html b/docs/elements.html index 8935483..023d450 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -25,7 +25,7 @@ <div class="docs-brand"> <a href="index.html" class="docs-logo"> <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>Spectre.css</h2> + <h2>SPECTRE</h2> </a> </div> <div class="docs-nav"> @@ -38,7 +38,7 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="getting-started.html#introduction">Introduction</a> + <a href="getting-started.html">Introduction</a> </li> <li class="menu-item"> <a href="getting-started.html#installation">Installation</a> @@ -63,7 +63,7 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="elements.html#typography">Typography</a> + <a href="elements.html">Typography</a> </li> <li class="menu-item"> <a href="elements.html#tables">Tables</a> @@ -97,7 +97,7 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="layout.html#grid">Flexbox grid</a> + <a href="layout.html">Flexbox grid</a> </li> <li class="menu-item"> <a href="layout.html#responsive">Responsive</a> @@ -116,7 +116,7 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="components.html#accordions">Accordions</a> + <a href="components.html">Accordions</a> </li> <li class="menu-item"> <a href="components.html#autocomplete">Autocomplete</a> @@ -186,7 +186,7 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="utilities.html#colors">Colors</a> + <a href="utilities.html">Colors</a> </li> <li class="menu-item"> <a href="utilities.html#cursors">Cursors</a> @@ -220,7 +220,7 @@ <div class="accordion-body"> <ul class="menu menu-nav"> <li class="menu-item"> - <a href="experimentals.html#calendars">Calendars</a> + <a href="experimentals.html">Calendars</a> </li> <li class="menu-item"> <a href="experimentals.html#carousels">Carousels</a> @@ -542,6 +542,20 @@ </div> + <div class="container"> + <div class="docs-ad docs-ad-sidebar"> + <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- github-vertical-sm --> + <ins class="adsbygoogle" + style="display:inline-block;width:120px;height:240px" + data-ad-client="ca-pub-2225124559530218" + data-ad-slot="5087273059"></ins> + <script> + (adsbygoogle = window.adsbygoogle || []).push({}); + </script> + </div> + </div> + <div id="tables" class="container"> <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> <div class="docs-note"> @@ -684,6 +698,22 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> </code></pre> + <h4 id="buttons-colors" class="s-subtitle">Button colors</h4> + <div class="columns"> + <div class="column col-12"> + <button class="btn btn-success">success button</button> + <button class="btn btn-error">error button</button> + </div> + </div> + <div class="docs-note"> + <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color. If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants. </p> + </div> + +<!-- buttons --> +<pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-success"</span>>success button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-error"</span>>error button<<span class="tag">/button</span>> +</code></pre> + <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> <div class="columns"> <div class="column col-12"> @@ -1050,8 +1080,7 @@ </div> </div> <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> + <div class="col-9 col-ml-auto"> <label class="form-switch"> <input type="checkbox"> <i class="form-icon"></i> Send me emails with news and tips @@ -1067,21 +1096,13 @@ </div> </div> <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> + <div class="col-9 col-ml-auto"> <label class="form-checkbox"> <input type="checkbox"> <i class="form-icon"></i> Remember me </label> </div> </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <button class="btn btn-primary" type="submit">Submit</button> - <button class="btn btn-link" type="reset">Cancel</button> - </div> - </div> </form> </div> </div> @@ -1956,7 +1977,7 @@ <footer class="docs-footer"> <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> | Version <span class="version"></span></p> - <p>Designed and built with ♥ 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> + <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> </footer> </div> |