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

1.0.0-beta14

Browse Source
This commit is contained in:
Cory LaViska
2017-08-13 15:41:38 -04:00
parent 9ff586b508
commit afa95589eb
50 changed files with 1300 additions and 852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/progress-bars.html
View File

@@ -19,7 +19,7 @@
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
</h1>
<p class="text-muted text-small">
<p class="text-secondary text-small">
A back to the basics CSS starter kit. For when you don’t need the whole boot.
</p>
</header>
@@ -84,6 +84,72 @@
<div class="progress-bar"></div>
</div>
<h3 id="variations">Variations</h3>
<p>Use the <code>progress-*</code> modifier to create variations.</p>
<pre><code class="lang-html">&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-secondary&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-success&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-info&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-warning&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-danger&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-light&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;progress progress-dark&quot;&gt;
&lt;div class=&quot;progress-bar width-50&quot;&gt;50%&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="progress">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-secondary">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-success">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-info">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-warning">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-danger">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-light">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-dark">
<div class="progress-bar width-50">50%</div>
</div>
</div>
</main>
@@ -91,8 +157,8 @@
<a href="../index.html">
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
</a>
<p class="text-small text-muted">
Shoelace.css 1.0.0-beta13 &middot;
<p class="text-small text-secondary">
Shoelace.css 1.0.0-beta14 &middot;
&copy; A Beautiful Site, LLC
</p>
@@ -103,8 +169,8 @@
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
</p>
<p>
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
<a href="https://twitter.com/shoelacecss" class="button button-info text-light" style="margin-bottom: 1.2rem;">Follow</a>
<a href="https://paypal.me/claviska" class="button button-success text-light" style="margin-bottom: 1.2rem;">Donate</a>
</p>
</footer>