js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make examples more consistent

Browse Source
This commit is contained in:
Cory LaViska
2017-09-02 00:26:47 -04:00
parent df784b6914
commit 3669e46b3f
2 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/buttons.html
View File

@@ -132,18 +132,18 @@
<h3 id="loader-buttons">Loader Buttons</h3>
<p>Buttons can be given a loading state with the <code>button-loader</code> modifier. This will make the button text invisible and display a loader using the <code>::after</code> pseudo-element. The button’s width will not be affected.</p>
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-xs&quot;&gt;XS&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-sm&quot;&gt;SM&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader&quot;&gt;Default&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;LG&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;XL&lt;/button&gt;
<pre><code class="lang-html">&lt;button type=&quot;button&quot; class=&quot;button-loader button-xs&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-sm&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-lg&quot;&gt;Button&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;button-loader button-xl&quot;&gt;Button&lt;/button&gt;
</code></pre>
<div class="input-field">
<button type="button" class="button-loader button-xs">XS</button>
<button type="button" class="button-loader button-sm">SM</button>
<button type="button" class="button-loader">Default</button>
<button type="button" class="button-loader button-lg">LG</button>
<button type="button" class="button-loader button-xl">XL</button>
<button type="button" class="button-loader button-xs">Button</button>
<button type="button" class="button-loader button-sm">Button</button>
<button type="button" class="button-loader">Button</button>
<button type="button" class="button-loader button-lg">Button</button>
<button type="button" class="button-loader button-xl">Button</button>
</div>
<p>Loader buttons also work with button variations.</p>

20
source/docs/buttons.md
View File

@@ -111,19 +111,19 @@ Buttons can be styled to look like normal links with the `button-link` modifier.
Buttons can be given a loading state with the `button-loader` modifier. This will make the button text invisible and display a loader using the `::after` pseudo-element. The button’s width will not be affected.
```html
<button type="button" class="button-loader button-xs">XS</button>
<button type="button" class="button-loader button-sm">SM</button>
<button type="button" class="button-loader">Default</button>
<button type="button" class="button-loader button-lg">LG</button>
<button type="button" class="button-loader button-xl">XL</button>
<button type="button" class="button-loader button-xs">Button</button>
<button type="button" class="button-loader button-sm">Button</button>
<button type="button" class="button-loader">Button</button>
<button type="button" class="button-loader button-lg">Button</button>
<button type="button" class="button-loader button-xl">Button</button>
```
<div class="input-field">
<button type="button" class="button-loader button-xs">XS</button>
<button type="button" class="button-loader button-sm">SM</button>
<button type="button" class="button-loader">Default</button>
<button type="button" class="button-loader button-lg">LG</button>
<button type="button" class="button-loader button-xl">XL</button>
<button type="button" class="button-loader button-xs">Button</button>
<button type="button" class="button-loader button-sm">Button</button>
<button type="button" class="button-loader">Button</button>
<button type="button" class="button-loader button-lg">Button</button>
<button type="button" class="button-loader button-xl">Button</button>
</div>
Loader buttons also work with button variations.