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

Add bg example code

Browse Source
This commit is contained in:
Cory LaViska
2017-08-13 17:14:29 -04:00
parent 2c6d6d2d5e
commit ed64f18142
2 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/utilities.html
View File

@@ -140,14 +140,23 @@
<h3 id="background-utilities">Background Utilities</h3>
<p>Background utility classes can be applied to change an element’s background color.</p>
<div class="margin-bottom-small padding-small bg-primary text-light">bg-primary</div>
<div class="margin-bottom-small padding-small bg-secondary text-light">bg-secondary</div>
<div class="margin-bottom-small padding-small bg-success text-light">bg-success</div>
<div class="margin-bottom-small padding-small bg-info text-light">bg-info</div>
<div class="margin-bottom-small padding-small bg-warning text-light">bg-warning</div>
<div class="margin-bottom-small padding-small bg-danger text-light">bg-danger</div>
<div class="margin-bottom-small padding-small bg-light text-dark">bg-light</div>
<div class="margin-bottom-small padding-small bg-dark text-light">bg-dark</div>
<pre><code class="lang-html">&lt;div class=&quot;bg-primary&quot;&gt;Primary&lt;/div&gt;
&lt;div class=&quot;bg-secondary&quot;&gt;Secondary&lt;/div&gt;
&lt;div class=&quot;bg-success&quot;&gt;Success&lt;/div&gt;
&lt;div class=&quot;bg-info&quot;&gt;Info&lt;/div&gt;
&lt;div class=&quot;bg-warning&quot;&gt;Warning&lt;/div&gt;
&lt;div class=&quot;bg-danger&quot;&gt;Danger&lt;/div&gt;
&lt;div class=&quot;bg-light&quot;&gt;Light&lt;/div&gt;
&lt;div class=&quot;bg-dark&quot;&gt;Dark&lt;/div&gt;
</code></pre>
<div class="margin-bottom-small padding-small bg-primary text-light">Primary</div>
<div class="margin-bottom-small padding-small bg-secondary text-light">Secondary</div>
<div class="margin-bottom-small padding-small bg-success text-light">Success</div>
<div class="margin-bottom-small padding-small bg-info text-light">Info</div>
<div class="margin-bottom-small padding-small bg-warning text-light">Warning</div>
<div class="margin-bottom-small padding-small bg-danger text-light">Danger</div>
<div class="margin-bottom-small padding-small bg-light text-dark">Light</div>
<div class="margin-bottom-small padding-small bg-dark text-light">Dark</div>
<h3 id="float-utilities">Float Utilities</h3>
<p>Float utilities are provided to easily float elements to the left or right. Just apply the <code>float-left</code> or <code>float-right</code> class to an element to float it left or right.</p>

27
source/docs/utilities.md
View File

@@ -103,14 +103,25 @@ Text utility classes can be applied to change an element’s text.
Background utility classes can be applied to change an element’s background color.
<div class="margin-bottom-small padding-small bg-primary text-light">bg-primary</div>
<div class="margin-bottom-small padding-small bg-secondary text-light">bg-secondary</div>
<div class="margin-bottom-small padding-small bg-success text-light">bg-success</div>
<div class="margin-bottom-small padding-small bg-info text-light">bg-info</div>
<div class="margin-bottom-small padding-small bg-warning text-light">bg-warning</div>
<div class="margin-bottom-small padding-small bg-danger text-light">bg-danger</div>
<div class="margin-bottom-small padding-small bg-light text-dark">bg-light</div>
<div class="margin-bottom-small padding-small bg-dark text-light">bg-dark</div>
```html
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-success">Success</div>
<div class="bg-info">Info</div>
<div class="bg-warning">Warning</div>
<div class="bg-danger">Danger</div>
<div class="bg-light">Light</div>
<div class="bg-dark">Dark</div>
```
<div class="margin-bottom-small padding-small bg-primary text-light">Primary</div>
<div class="margin-bottom-small padding-small bg-secondary text-light">Secondary</div>
<div class="margin-bottom-small padding-small bg-success text-light">Success</div>
<div class="margin-bottom-small padding-small bg-info text-light">Info</div>
<div class="margin-bottom-small padding-small bg-warning text-light">Warning</div>
<div class="margin-bottom-small padding-small bg-danger text-light">Danger</div>
<div class="margin-bottom-small padding-small bg-light text-dark">Light</div>
<div class="margin-bottom-small padding-small bg-dark text-light">Dark</div>
### Float Utilities