mirror of
https://github.com/shoelace-style/shoelace.git
synced 2026-01-12 02:59:13 +00:00
1.0.0-beta14
This commit is contained in:
Cory LaViska
28
dist/shoelace.css
vendored
28
dist/shoelace.css
vendored
File diff suppressed because one or more lines are too long
4
dist/shoelace.js
vendored
4
dist/shoelace.js
vendored
@@ -1,12 +1,12 @@
|
||||
/*!
|
||||
Shoelace.css dropdowns 1.0.0-beta13
|
||||
Shoelace.css dropdowns 1.0.0-beta14
|
||||
(c) A Beautiful Site, LLC
|
||||
|
||||
Released under the MIT license
|
||||
Source: https://github.com/claviska/shoelace-css
|
||||
*/
|
||||
!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i,o,r;if(e(t.target).is(".dropdown-trigger")){if(i=e(t.target).closest(".dropdown"),r=t.target,e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else e(t.target).closest(".dropdown-menu").length&&(i=e(t.target).closest(".dropdown"),(o=e(t.target).closest("a").get(0))&&!e(o).is(".disabled")&&e(i).trigger("select",o),t.preventDefault()),e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*!
|
||||
Shoelace.css tabs 1.0.0-beta13
|
||||
Shoelace.css tabs 1.0.0-beta14
|
||||
(c) A Beautiful Site, LLC
|
||||
|
||||
Released under the MIT license
|
||||
|
||||
@@ -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>
|
||||
@@ -48,7 +48,13 @@
|
||||
|
||||
<div id="content">
|
||||
<h2 id="alerts">Alerts</h2>
|
||||
<p>Create an alert by applying the <code>alert</code> class to an element such as a <code><div></code>. You can change an alert’s appearance using the <code>alert-*</code> modifier.</p>
|
||||
<p>Create an alert by applying the <code>alert</code> class to an element such as a <code><div></code>.</p>
|
||||
<pre><code class="lang-html"><div class="alert">This is an alert</div>
|
||||
</code></pre>
|
||||
<div class="alert">This is an alert</div>
|
||||
|
||||
<h2 id="variations">Variations</h2>
|
||||
<p>Use the <code>alert-*</code> modifier to create variations.</p>
|
||||
<pre><code class="lang-html"><div class="alert">Primary</div>
|
||||
<div class="alert alert-secondary">Secondary</div>
|
||||
<div class="alert alert-success">Success</div>
|
||||
@@ -74,8 +80,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -86,8 +92,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -65,8 +65,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -77,8 +77,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -48,27 +48,10 @@
|
||||
|
||||
<div id="content">
|
||||
<h2 id="badges">Badges</h2>
|
||||
<p>Create a badge by applying the <code>badge</code> class to an element such as a <code><span></code>. You can change a badge’s appearance using the <code>badge-*</code> modifier.</p>
|
||||
<pre><code class="lang-html"><span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
<p>Create a badge by applying the <code>badge</code> class to an element such as a <code><span></code>.</p>
|
||||
<pre><code class="lang-html"><span class="badge">Badge</span>
|
||||
</code></pre>
|
||||
<p>
|
||||
<span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</p>
|
||||
|
||||
<p><span class="badge">Badge</span></p>
|
||||
<p>By default, badges are sized relative to their parent element.</p>
|
||||
<pre><code class="lang-html"><h1>Heading 1 <span class="badge">Badge</span></h1>
|
||||
<h2>Heading 2 <span class="badge">Badge</span></h2>
|
||||
@@ -80,8 +63,27 @@
|
||||
<p><h3>Heading 3 <span class="badge">Badge</span></h3></p>
|
||||
<p>Paragraph <span class="badge">Badge</span></p>
|
||||
|
||||
|
||||
<h3 id="variations">Variations</h3>
|
||||
<p>Use the <code>badge-*</code> modifier to create variations.</p>
|
||||
<pre><code class="lang-html"><span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</code></pre>
|
||||
<p><span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span></p>
|
||||
<h3 id="badge-links">Badge Links</h3>
|
||||
<p>Badges can also be made into links.</p>
|
||||
<pre><code class="lang-html"><a href="#" class="badge">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
@@ -91,16 +93,14 @@
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
</code></pre>
|
||||
<p>
|
||||
<a href="#" class="badge">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
</p>
|
||||
<p><a href="#" class="badge">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a></p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -109,8 +109,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -121,8 +121,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -65,8 +65,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -77,8 +77,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -48,9 +48,60 @@
|
||||
|
||||
<div id="content">
|
||||
<h2 id="buttons">Buttons</h2>
|
||||
<p>To create a button, use the <code><button></code> element or apply the <code>button</code> class to another element such as an <code><a></code>. You can change a button’s appearance using the <code>button-*</code> modifier.</p>
|
||||
<p>To create a button, use the <code><button></code> element or apply the <code>button</code> class to an <code><a></code>.</p>
|
||||
<pre><code class="lang-html"><button type="button">Button</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button">Button</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-block</code> modifier to make a button span the entire width of its parent.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="button-block button-small">Small Block Button</button>
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</div>
|
||||
|
||||
<p>To disable a button set the <code>disabled</code> property on <code><button></code> elements.</p>
|
||||
<pre><code class="lang-html"><button type="button" disabled>Disabled</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" disabled>Disabled</button>
|
||||
</div>
|
||||
|
||||
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
|
||||
<pre><code class="lang-html"><button type="button" class="active">Active</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button" class="active">Active</button>
|
||||
</div>
|
||||
|
||||
<h3 id="variations">Variations</h3>
|
||||
<p>Use the <code>button-*</code> modifier to create variations.</p>
|
||||
<pre><code class="lang-html"><button type="button">Primary</button>
|
||||
<button type="button" class="button-secondary">Secondary</button>
|
||||
<button type="button" class="button-success">Success</button>
|
||||
<button type="button" class="button-info">Info</button>
|
||||
<button type="button" class="button-warning">Warning</button>
|
||||
<button type="button" class="button-danger">Danger</button>
|
||||
@@ -68,57 +119,13 @@
|
||||
<button type="button" class="button-dark">Dark</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-block</code> modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</div>
|
||||
|
||||
<p>Disabled buttons look like this. Set the <code>disabled</code> property on <code><button></code> elements to achieve this effect. For all other elements, apply <code>class="disabled"</code> instead.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" disabled>Primary</button>
|
||||
<button type="button" class="button-secondary" disabled>Secondary</button>
|
||||
<button type="button" class="button-success" disabled>Success</button>
|
||||
<button type="button" class="button-info" disabled>Info</button>
|
||||
<button type="button" class="button-warning" disabled>Warning</button>
|
||||
<button type="button" class="button-danger" disabled>Danger</button>
|
||||
<button type="button" class="button-light" disabled>Light</button>
|
||||
<button type="button" class="button-dark" disabled>Dark</button>
|
||||
</div>
|
||||
|
||||
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" class="active">Primary</button>
|
||||
<button type="button" class="button-secondary active">Secondary</button>
|
||||
<button type="button" class="button-success active">Success</button>
|
||||
<button type="button" class="button-info active">Info</button>
|
||||
<button type="button" class="button-warning active">Warning</button>
|
||||
<button type="button" class="button-danger active">Danger</button>
|
||||
<button type="button" class="button-light active">Light</button>
|
||||
<button type="button" class="button-dark active">Dark</button>
|
||||
</div>
|
||||
|
||||
<h3 id="link-buttons">Link Buttons</h3>
|
||||
<p>Buttons can be styled to look like normal links with the <code>button-link</code> modifier. The appropriate sizing is placed so they align properly with regular buttons.</p>
|
||||
<pre><code class="lang-html"><a href="#" class="button">Button</a>
|
||||
<p>Buttons can be styled to look like normal links with the <code>button-link</code> modifier. Button sizing is maintained so they align properly with other buttons.</p>
|
||||
<pre><code class="lang-html"><button type="button">Button</button>
|
||||
<a href="#" class="button button-link">Link</a>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<a href="#" class="button">Button</a>
|
||||
<button type="button">Button</button>
|
||||
<a href="#" class="button button-link">Link</a>
|
||||
</div>
|
||||
|
||||
@@ -141,8 +148,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -153,8 +160,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -48,8 +48,8 @@
|
||||
|
||||
<div id="content">
|
||||
<h2 id="content">Content</h2>
|
||||
<p>Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.</p>
|
||||
<p>For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in <code>rem</code> units.</p>
|
||||
<p>Shoelace provides default content styles that are easy to customize. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.</p>
|
||||
<p>For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in <code>rem</code> units. Shoelace also sets <code>box-sizing: border-box</code> globally to make it easier to properly size elements.</p>
|
||||
<h3 id="headings-h1-h6-">Headings <code><h1> – <h6></code></h3>
|
||||
<p><h1>Heading 1</h1></p>
|
||||
<p><h2>Heading 2</h2></p>
|
||||
@@ -191,8 +191,8 @@ PRINT "SHOELACE IS AWESOME"
|
||||
<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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -203,8 +203,8 @@ PRINT "SHOELACE IS AWESOME"
|
||||
<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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -48,26 +48,29 @@
|
||||
|
||||
<div id="content">
|
||||
<h2 id="customizing">Customizing</h2>
|
||||
<p>You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in <a href="../source/css/variables.css"><code>variables.css</code></a> in your own stylesheet.</p>
|
||||
<p>For example, you can customize the default text color and background like this:</p>
|
||||
<p>You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in the <code>:root</code> block of <a href="../source/css/shoelace.css"><code>shoelace.css</code></a>.</p>
|
||||
<p>For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:</p>
|
||||
<pre><code class="lang-css">:root {
|
||||
--body-color: white;
|
||||
--body-bg-color: black;
|
||||
--state-primary: #09d;
|
||||
}
|
||||
</code></pre>
|
||||
<p>You don’t need to include all of the variables. You only need to override the ones you actually want to customize.</p>
|
||||
<p>Additional variables can be found in the <code>:root</code> block of each component’s stylesheet. For example, to customize alerts, refer to the top of <a href="https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css"><code>alerts.css</code></a> for a list of variables.</p>
|
||||
<h3 id="using-variables">Using Variables</h3>
|
||||
<p>You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own <a href="#custom-components">custom components</a>.</p>
|
||||
<p>You can use any of Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own <a href="#creating-custom-components">custom components</a>.</p>
|
||||
<pre><code class="lang-css">.your-selector {
|
||||
color: var(--state-danger);
|
||||
}
|
||||
</code></pre>
|
||||
<p>Refer to <a href="../source/css/variables.css"><code>variables.css</code></a> for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">this article</a> will bring you up to speed. There’s also an <a href="https://codepen.io/claviska/pen/NvGVYM?editors=1100">interactive demo</a> if you want to experiment.</p>
|
||||
<h3 id="custom-components">Custom Components</h3>
|
||||
<p>If you’re not familiar with CSS variables, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">this article</a> will bring you up to speed. There’s also an <a href="https://codepen.io/claviska/pen/NvGVYM?editors=1100">interactive demo</a> if you want to experiment.</p>
|
||||
<h3 id="creating-custom-components">Creating Custom Components</h3>
|
||||
<p>You can create custom components to extend Shoelace’s functionality. Here are some best practices to keep things consistent and easy for others to understand.</p>
|
||||
<p><strong>Familiarize yourself with Shoelace’s naming conventions.</strong> A custom accordion component, for example, would have a class name such as <code>accordion</code>, modifier classes such as <code>accordion-open</code>, and variable names that look like <code>--accordion-bg-color</code>. Try to follow similar patterns as much as possible.</p>
|
||||
<p><strong>Define new variables when it makes sense to.</strong> Take a look at <a href="../source/css/variables.css"><code>variables.css</code></a> to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.</p>
|
||||
<p><strong>Define new variables when it makes sense to.</strong> Take a look at how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.</p>
|
||||
<p><strong>Semantic markup is strongly encouraged.</strong> Custom components should use the most appropriate elements and the minimal amount of markup required.</p>
|
||||
<p><strong>Keep everything together.</strong> During development, each component should be in its own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend on other components’ styles or scripts. This makes it easier to add or remove components from your app without affecting others. Of course, it’s perfectly fine to bundle components for optimization purposes in production.</p>
|
||||
<p><strong>Keep everything together.</strong> Each component should be in its own folder along with its stylesheets, scripts, and documentation. Components can use core variables, but they shouldn’t depend on other components’ styles or scripts to work. This makes it easier to add or remove components from your app without worrying about dependencies.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -76,8 +79,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -88,8 +91,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -122,9 +122,25 @@
|
||||
</div>
|
||||
|
||||
<p>Dropdowns with button triggers can be used inside input groups.</p>
|
||||
<pre><code class="lang-html"><div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text" placeholder="10.00">
|
||||
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Currency</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="checked">USD</a>
|
||||
<a href="#">AUD</a>
|
||||
<a href="#">CAD</a>
|
||||
<a href="#">GBP</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text" placeholder="10.00">
|
||||
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Currency</button>
|
||||
<div class="dropdown-menu">
|
||||
@@ -164,8 +180,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -176,8 +192,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -82,7 +82,7 @@
|
||||
<td>
|
||||
<code><input type="file"></code>
|
||||
<br>
|
||||
<span class="text-small text-muted">
|
||||
<span class="text-small text-secondary">
|
||||
File inputs aren’t supported. Use a <a href="buttons.html#file-buttons">file button</a> instead.
|
||||
</span>
|
||||
</td>
|
||||
@@ -226,35 +226,27 @@
|
||||
<button type="button" class="button">Option 3</button>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button type="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Option 1</button>
|
||||
<button type="button">Option 2</button>
|
||||
<button type="button">Option 3</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button type="button">Option 1</button>
|
||||
<button type="button">Option 2</button>
|
||||
<button type="button">Option 3</button>
|
||||
</div>
|
||||
|
||||
<h3 id="input-addons">Input Addons</h3>
|
||||
@@ -359,8 +351,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -371,8 +363,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -83,8 +83,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -95,8 +95,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>
|
||||
|
||||
|
||||
@@ -20,7 +20,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>
|
||||
@@ -56,7 +56,7 @@
|
||||
<pre><code class="lang-html"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
|
||||
</code></pre>
|
||||
<p>Then add icons as you normally would with <code><i class="fa fa-*"></i></code>:</p>
|
||||
<div class="input-single text-muted" style="font-size: 2rem;">
|
||||
<div class="input-single text-secondary" style="font-size: 2rem;">
|
||||
<i class="fa fa-magic"></i>
|
||||
<i class="fa fa-briefcase"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
@@ -87,8 +87,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -99,8 +99,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -52,10 +52,10 @@
|
||||
<p>To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load <a href="https://cdnjs.com/libraries/jquery/">jQuery</a> or <a href="https://cdnjs.com/libraries/zepto/">Zepto</a> along with <code>shoelace.js</code>.</p>
|
||||
<h3 id="cdn">CDN</h3>
|
||||
<p>The easiest way to use Shoelace is via CDN. Just add this to your <code><head></code>:</p>
|
||||
<pre><code class="lang-html"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta13/shoelace.css">
|
||||
<pre><code class="lang-html"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta14/shoelace.css">
|
||||
</code></pre>
|
||||
<p>And this before <code></body></code> but after jQuery/Zepto:</p>
|
||||
<pre><code class="lang-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta13/shoelace.js"></script>
|
||||
<pre><code class="lang-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta14/shoelace.js"></script>
|
||||
</code></pre>
|
||||
<p>This service is provided free, courtesy of <a href="https://cdnjs.com/">CDNJS</a>. New releases can take up to 12 hours to appear on the CDN.</p>
|
||||
<h3 id="download">Download</h3>
|
||||
@@ -76,8 +76,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -88,8 +88,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -59,6 +59,7 @@
|
||||
<span class="loader loader-big"></span>
|
||||
</div>
|
||||
|
||||
<h3 id="background-loaders">Background Loaders</h3>
|
||||
<p>You can simulate a background loader using <code>loader-bg</code>. This is achieved using <code>position: relative</code> on the container and the <code>::after</code> pseudo-element. You can use the <code>loader-bg-small</code> and <code>loader-bg-big</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
@@ -70,6 +71,24 @@
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
</div>
|
||||
|
||||
<h3 id="variations">Variations</h3>
|
||||
<p>Use the <code>loader-*</code> modifier to create variations.</p>
|
||||
<pre><code class="lang-html"><span class="loader loader-secondary"></span>
|
||||
<span class="loader loader-success"></span>
|
||||
<span class="loader loader-info"></span>
|
||||
<span class="loader loader-warning"></span>
|
||||
<span class="loader loader-danger"></span>
|
||||
<span class="loader loader-light"></span>
|
||||
<span class="loader loader-dark"></span>
|
||||
</code></pre>
|
||||
<p><span class="loader loader-secondary"></span>
|
||||
<span class="loader loader-success"></span>
|
||||
<span class="loader loader-info"></span>
|
||||
<span class="loader loader-warning"></span>
|
||||
<span class="loader loader-danger"></span>
|
||||
<span class="loader loader-light"></span>
|
||||
<span class="loader loader-dark"></span></p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -77,8 +96,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -89,8 +108,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>
|
||||
|
||||
|
||||
@@ -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"><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>
|
||||
</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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© 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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -104,6 +104,46 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 id="variations">Variations</h3>
|
||||
<p>Use the <code>switch-*</code> modifier to create variations.</p>
|
||||
<pre><code class="lang-html"><span class="switch switch-secondary">...</span>
|
||||
<span class="switch switch-success">...</span>
|
||||
<span class="switch switch-info">...</span>
|
||||
<span class="switch switch-warning">...</span>
|
||||
<span class="switch switch-danger">...</span>
|
||||
<span class="switch switch-light">...</span>
|
||||
<span class="switch switch-dark">...</span>
|
||||
</code></pre>
|
||||
<p><span class="switch switch-secondary">
|
||||
<input type="checkbox" class="switch" id="variation-1" checked>
|
||||
<label for="variation-1">Secondary</label>
|
||||
</span></p>
|
||||
<p><span class="switch switch-success">
|
||||
<input type="checkbox" class="switch" id="variation-2" checked>
|
||||
<label for="variation-2">Success</label>
|
||||
</span></p>
|
||||
<p><span class="switch switch-info">
|
||||
<input type="checkbox" class="switch" id="variation-3" checked>
|
||||
<label for="variation-3">Info</label>
|
||||
</span></p>
|
||||
<p><span class="switch switch-warning">
|
||||
<input type="checkbox" class="switch" id="variation-4" checked>
|
||||
<label for="variation-4">Warning</label>
|
||||
</span></p>
|
||||
<p><span class="switch switch-danger">
|
||||
<input type="checkbox" class="switch" id="variation-5" checked>
|
||||
<label for="variation-5">Danger</label>
|
||||
</span></p>
|
||||
<p><span class="switch switch-light">
|
||||
<input type="checkbox" class="switch" id="variation-6" checked>
|
||||
<label for="variation-6">Light</label>
|
||||
</span></p>
|
||||
<p><span class="switch switch-dark">
|
||||
<input type="checkbox" class="switch" id="variation-7" checked>
|
||||
<label for="variation-7">Dark</label>
|
||||
</span></p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -111,8 +151,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -123,8 +163,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -134,8 +134,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -146,8 +146,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -184,8 +184,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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -196,8 +196,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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -50,8 +50,7 @@
|
||||
<h2 id="utilities">Utilities</h2>
|
||||
<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
|
||||
<h3 id="text-utilities">Text Utilities</h3>
|
||||
<p>Text utilities are classes that can be applied to just about any element. The text inside will be
|
||||
formatted appropriately.</p>
|
||||
<p>Text utility classes can be applied to change an element’s text.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -60,6 +59,14 @@ formatted appropriately.</p>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>text-primary</code></td>
|
||||
<td class="text-primary">This is primary text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-secondary</code></td>
|
||||
<td class="text-secondary">This is secondary text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-success</code></td>
|
||||
<td class="text-success">This is success text</td>
|
||||
@@ -77,8 +84,12 @@ formatted appropriately.</p>
|
||||
<td class="text-danger">This is danger text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-muted</code></td>
|
||||
<td class="text-muted">This is muted text</td>
|
||||
<td><code>text-light</code></td>
|
||||
<td class="text-light">This is light text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-dark</code></td>
|
||||
<td class="text-dark">This is dark text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-small</code></td>
|
||||
@@ -127,11 +138,23 @@ formatted appropriately.</p>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<p>A clearfix utility is also available to clear floated elements. Just apply the <code>clearfix</code> class to the appropriate element.</p>
|
||||
<h3 id="sizing-utilities">Sizing Utilities</h3>
|
||||
<p>Sizing utilities can be used to set a relative width or height on any element. Just apply a <code>width-*</code> or <code>height-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
|
||||
<p>You can also use the <code>max-width-100</code> and <code>max-height-100</code> classes to set a max width and height of 100%.</p>
|
||||
<pre><code class="lang-html"><div class="width-25">25%</div>
|
||||
<div class="width-50">50%</div>
|
||||
<div class="width-75">75%</div>
|
||||
@@ -179,8 +202,8 @@ margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
|
||||
<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 ·
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css 1.0.0-beta14 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
@@ -191,8 +214,8 @@ margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
|
||||
<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>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<header id="head" class="text-center">
|
||||
<h1><img src="../source/img/wordmark.svg" alt="Shoelace logo"></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>
|
||||
@@ -40,7 +40,7 @@
|
||||
:root {
|
||||
--body-color: white;
|
||||
--body-bg-color: black;
|
||||
--color-primary: #09d;
|
||||
--state-primary: #09d;
|
||||
}
|
||||
</style></code></pre>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
<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 class="text-center text-small text-muted">
|
||||
<p class="text-center text-small text-secondary">
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "shoelace-css",
|
||||
"description": "A back to the basics CSS starter kit.",
|
||||
"version": "1.0.0-beta13",
|
||||
"version": "1.0.0-beta14",
|
||||
"author": "Cory LaViska",
|
||||
"homepage": "https://shoelace.style/",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -39,7 +39,7 @@ body {
|
||||
}
|
||||
|
||||
#nav a.current {
|
||||
color: var(--text-muted);
|
||||
color: var(--state-secondary);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@@ -154,7 +154,7 @@ a code {
|
||||
}
|
||||
|
||||
.width-sizing-example div {
|
||||
background: var(--color-primary);
|
||||
background: var(--state-primary);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: .25rem;
|
||||
@@ -175,7 +175,7 @@ a code {
|
||||
.height-sizing-example div {
|
||||
width: calc(25% - 1rem);
|
||||
float: left;
|
||||
background: var(--color-primary);
|
||||
background: var(--state-primary);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: .25rem;
|
||||
|
||||
@@ -1,49 +1,20 @@
|
||||
/*! Alerts */
|
||||
:root {
|
||||
--alert-color: var(--color-white);
|
||||
--alert-bg-color: var(--state-primary);
|
||||
--alert-padding-x: var(--component-spacing);
|
||||
--alert-padding-y: var(--component-spacing);
|
||||
}
|
||||
|
||||
.alert {
|
||||
color: var(--alert-color);
|
||||
background-color: var(--alert-bg-color);
|
||||
border-radius: var(--alert-border-radius);
|
||||
padding: var(--alert-spacing-y) var(--alert-spacing-x);
|
||||
border-radius: var(--component-border-radius);
|
||||
padding: var(--alert-padding-y) var(--alert-padding-x);
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
color: var(--alert-color-secondary);
|
||||
background-color: var(--alert-bg-color-secondary);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: var(--alert-color-success);
|
||||
background-color: var(--alert-bg-color-success);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: var(--alert-color-info);
|
||||
background-color: var(--alert-bg-color-info);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: var(--alert-color-warning);
|
||||
background-color: var(--alert-bg-color-warning);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: var(--alert-color-danger);
|
||||
background-color: var(--alert-bg-color-danger);
|
||||
}
|
||||
|
||||
.alert-light {
|
||||
color: var(--alert-color-light);
|
||||
background-color: var(--alert-bg-color-light);
|
||||
}
|
||||
|
||||
.alert-dark {
|
||||
color: var(--alert-color-dark);
|
||||
background-color: var(--alert-bg-color-dark);
|
||||
}
|
||||
|
||||
.alert:empty {
|
||||
display: none;
|
||||
}
|
||||
@@ -56,3 +27,34 @@
|
||||
.alert :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.alert-secondary {
|
||||
background-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--state-success);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: var(--state-info);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.alert-light {
|
||||
color: var(--state-dark);
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.alert-dark {
|
||||
color: var(--state-light);
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
@@ -1,57 +1,62 @@
|
||||
/*! Badges */
|
||||
:root {
|
||||
--badge-font-size: .8em; /* ems for relative sizing */
|
||||
--badge-color: var(--color-white);
|
||||
--badge-bg-color: var(--state-primary);
|
||||
--badge-border-radius: 1em; /* ems for relative sizing */
|
||||
--badge-box-shadow-hover: inset 0 0 0 1em rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: var(--badge-font-size);
|
||||
font-weight: var(--badge-font-weight);
|
||||
color: var(--badge-color);
|
||||
background-color: var(--badge-bg-color);
|
||||
border-radius: var(--badge-border-radius);
|
||||
padding: var(--badge-spacing-y) var(--badge-spacing-x);
|
||||
padding: .2em .6em;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
transition: .1s box-shadow, .1s background-color, .1s color;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
color: var(--badge-color-secondary);
|
||||
background-color: var(--badge-bg-color-secondary);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
color: var(--badge-color-success);
|
||||
background-color: var(--badge-bg-color-success);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
color: var(--badge-color-info);
|
||||
background-color: var(--badge-bg-color-info);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
color: var(--badge-color-warning);
|
||||
background-color: var(--badge-bg-color-warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
color: var(--badge-color-danger);
|
||||
background-color: var(--badge-bg-color-danger);
|
||||
}
|
||||
|
||||
.badge-light {
|
||||
color: var(--badge-color-light);
|
||||
background-color: var(--badge-bg-color-light);
|
||||
}
|
||||
|
||||
.badge-dark {
|
||||
color: var(--badge-color-dark);
|
||||
background-color: var(--badge-bg-color-dark);
|
||||
}
|
||||
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.badge:hover {
|
||||
color: var(--badge-color);
|
||||
text-decoration: none;
|
||||
box-shadow: var(--badge-box-shadow-hover);
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.badge-secondary {
|
||||
background-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: var(--state-success);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background-color: var(--state-info);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.badge-light,
|
||||
a.badge-light:hover {
|
||||
color: var(--state-dark);
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.badge-dark,
|
||||
a.badge-dark:hover {
|
||||
color: var(--state-light);
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,20 @@
|
||||
/*! Buttons */
|
||||
:root {
|
||||
--button-font-family: var(--input-font-family);
|
||||
--button-font-weight: var(--input-font-weight);
|
||||
--button-font-size: var(--input-font-size);
|
||||
--button-font-size-small: var(--input-font-size-small);
|
||||
--button-font-size-big: var(--input-font-size-big);
|
||||
--button-color: var(--color-white);
|
||||
--button-bg-color: var(--state-primary);
|
||||
--button-height: var(--input-height);
|
||||
--button-height-small: var(--input-height-small);
|
||||
--button-height-big: var(--input-height-big);
|
||||
--button-border-radius: var(--component-border-radius);
|
||||
--button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
|
||||
--button-box-shadow-hover: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
|
||||
--button-box-shadow-active: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 2px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
@@ -40,41 +56,6 @@ button,
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
color: var(--button-color-secondary);
|
||||
background-color: var(--button-bg-color-secondary);
|
||||
}
|
||||
|
||||
.button-success {
|
||||
color: var(--button-color-success);
|
||||
background-color: var(--button-bg-color-success);
|
||||
}
|
||||
|
||||
.button-info {
|
||||
color: var(--button-color-info);
|
||||
background-color: var(--button-bg-color-info);
|
||||
}
|
||||
|
||||
.button-warning {
|
||||
color: var(--button-color-warning);
|
||||
background-color: var(--button-bg-color-warning);
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
color: var(--button-color-danger);
|
||||
background-color: var(--button-bg-color-danger);
|
||||
}
|
||||
|
||||
.button-light {
|
||||
color: var(--button-color-light);
|
||||
background-color: var(--button-bg-color-light);
|
||||
}
|
||||
|
||||
.button-dark {
|
||||
color: var(--button-color-dark);
|
||||
background-color: var(--button-bg-color-dark);
|
||||
}
|
||||
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
color: var(--link-color);
|
||||
@@ -82,7 +63,7 @@ button,
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button-link:hover:not(:disabled):not(.disabled) {
|
||||
.button-link:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: var(--link-text-decoration-hover);
|
||||
@@ -90,24 +71,23 @@ button,
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
a.button:hover {
|
||||
color: var(--button-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled),
|
||||
.button:hover:not(.disabled) {
|
||||
button:hover:not(:disabled) {
|
||||
color: var(--button-color);
|
||||
box-shadow: var(--button-box-shadow-hover);
|
||||
}
|
||||
|
||||
button:active:not(.button-link):not(:disabled),
|
||||
button.active:not(.button-link):not(:disabled),
|
||||
.button.active:not(.button-link):not(.disabled) {
|
||||
a.button.active:not(.button-link) {
|
||||
box-shadow: var(--button-box-shadow-active);
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button.disabled,
|
||||
.button.disabled {
|
||||
button:disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -115,3 +95,38 @@ button.disabled,
|
||||
label.button input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.button-secondary {
|
||||
background-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.button-success {
|
||||
background-color: var(--state-success);
|
||||
}
|
||||
|
||||
.button-info {
|
||||
background-color: var(--state-info);
|
||||
}
|
||||
|
||||
.button-warning {
|
||||
background-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.button-danger {
|
||||
background-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.button-light,
|
||||
button.button-light:hover:not(:disabled),
|
||||
a.button-light:hover {
|
||||
color: var(--state-dark);
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.button-dark,
|
||||
button.button-dark:hover:not(:disabled),
|
||||
a.button-dark {
|
||||
color: var(--state-light);
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,66 @@
|
||||
/*! Content */
|
||||
:root {
|
||||
--body-bg-color: var(--color-white);
|
||||
--body-color: var(--color-black);
|
||||
--font-family: var(--font-system);
|
||||
--font-size: 1rem; /* Most browsers use a default font size of 16px */
|
||||
--font-size-big: 1.25rem;
|
||||
--font-size-small: .875rem;
|
||||
--font-weight-light: 300;
|
||||
--font-weight: 400;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 1.5;
|
||||
|
||||
--code-font-size: 90%;
|
||||
--code-color: var(--color-black);
|
||||
--code-border-radius: var(--component-border-radius);
|
||||
--code-bg-color: var(--component-bg-color);
|
||||
--code-spacing-x: calc(var(--font-size) * .4);
|
||||
--code-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--headings-font-family: var(--font-system);
|
||||
--headings-font-weight: var(--font-weight-light);
|
||||
--headings-line-height: 1.1;
|
||||
--headings-margin-bottom: .5rem;
|
||||
--headings-color: inherit;
|
||||
--headings-font-size-h1: 2.5rem;
|
||||
--headings-font-size-h2: 2rem;
|
||||
--headings-font-size-h3: 1.75rem;
|
||||
--headings-font-size-h4: 1.5rem;
|
||||
--headings-font-size-h5: 1.25rem;
|
||||
--headings-font-size-h6: 1rem;
|
||||
|
||||
--hr-border-width: 1px;
|
||||
--hr-border-color: var(--component-border-color);
|
||||
--hr-spacing: var(--component-spacing-big);
|
||||
|
||||
--kbd-font-size: 90%;
|
||||
--kbd-color: var(--color-white);
|
||||
--kbd-border-radius: var(--component-border-radius);
|
||||
--kbd-bg-color: var(--color-black);
|
||||
--kbd-spacing-x: calc(var(--font-size) * .4);
|
||||
--kbd-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--link-color: var(--state-primary);
|
||||
--link-text-decoration: none;
|
||||
--link-color-hover: var(--link-color);
|
||||
--link-text-decoration-hover: underline;
|
||||
|
||||
--mark-color: inherit;
|
||||
--mark-bg-color: var(--color-yellow);
|
||||
--mark-spacing-x: calc(var(--font-size) * .4);
|
||||
--mark-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--placeholder-color: var(--state-secondary);
|
||||
|
||||
--pre-color: var(--code-color);
|
||||
--pre-border-radius: var(--component-border-radius);
|
||||
--pre-bg-color: var(--code-bg-color);
|
||||
--pre-max-height: none;
|
||||
|
||||
--selection-color: var(--color-white);
|
||||
--selection-bg-color: var(--state-primary);
|
||||
}
|
||||
|
||||
/* Box sizing reset */
|
||||
html {
|
||||
|
||||
@@ -1,4 +1,24 @@
|
||||
/*! Dropdowns */
|
||||
:root {
|
||||
--dropdown-min-width: 10rem;
|
||||
--dropdown-max-width: 25rem;
|
||||
--dropdown-max-height: none;
|
||||
--dropdown-offset-x: 0;
|
||||
--dropdown-offset-y: 1px;
|
||||
--dropdown-border-color: var(--component-border-color);
|
||||
--dropdown-border-radius: var(--component-border-radius);
|
||||
--dropdown-border-width: var(--component-border-width);
|
||||
--dropdown-color: var(--body-color);
|
||||
--dropdown-color-hover: var(--color-white);
|
||||
--dropdown-bg-color: var(--color-white);
|
||||
--dropdown-bg-color-hover: var(--state-primary);
|
||||
--dropdown-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--dropdown-divider-border-color: var(--component-border-color);
|
||||
--dropdown-divider-border-width: var(--component-border-width);
|
||||
--dropdown-spacing-x: 1rem;
|
||||
--dropdown-spacing-y: .25rem;
|
||||
--dropdown-z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
@@ -13,6 +33,7 @@
|
||||
margin-left: .5em;
|
||||
display: inline-block;
|
||||
transform: scaleY(.75);
|
||||
margin-top: -.2em;
|
||||
}
|
||||
|
||||
.dropdown-top .dropdown-trigger::after {
|
||||
|
||||
@@ -1,4 +1,37 @@
|
||||
/*! Forms */
|
||||
:root {
|
||||
--fieldset-border-color: var(--component-border-color);
|
||||
--fieldset-border-width: var(--component-border-width);
|
||||
--fieldset-border-radius: var(--component-border-radius);
|
||||
--fieldset-spacing-x: var(--component-spacing);
|
||||
--fieldset-spacing-y: var(--component-spacing);
|
||||
|
||||
--input-font-family: inherit;
|
||||
--input-font-size: var(--font-size);
|
||||
--input-font-size-small: .8rem;
|
||||
--input-font-size-big: 1.2rem;
|
||||
--input-font-weight: inherit;
|
||||
--input-height: 2rem;
|
||||
--input-height-big: 2.75rem;
|
||||
--input-height-small: 1.25rem;
|
||||
--input-color: var(--body-color);
|
||||
--input-border-color: var(--component-border-color);
|
||||
--input-border-color-focus: var(--state-primary);
|
||||
--input-border-width: 1px;
|
||||
--input-border-radius: var(--component-border-radius);
|
||||
--input-bg-color: var(--color-white);
|
||||
--input-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--input-readonly-bg-color: var(--component-bg-color);
|
||||
--input-range-track-color: var(--component-bg-color);
|
||||
--input-range-track-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--input-range-thumb-color: var(--state-primary);
|
||||
--input-range-thumb-height: 2rem;
|
||||
|
||||
--input-invalid-color: var(--state-danger);
|
||||
--input-invalid-border-color: var(--state-danger);
|
||||
--input-valid-color: var(--state-success);
|
||||
--input-valid-border-color: var(--state-success);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: solid var(--fieldset-border-width) var(--fieldset-border-color);
|
||||
@@ -322,7 +355,7 @@ progress {
|
||||
/* Input addons */
|
||||
.input-addon {
|
||||
font-size: var(--input-font-size);
|
||||
color: var(--text-muted);
|
||||
color: var(--state-secondary);
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
border-top: solid var(--input-border-width) var(--input-border-color);
|
||||
|
||||
@@ -1,4 +1,17 @@
|
||||
/*! Loaders */
|
||||
:root {
|
||||
--loader-bg-color: var(--component-bg-color);
|
||||
--loader-border-color: var(--state-primary);
|
||||
--loader-border-width: .2rem;
|
||||
--loader-border-width-small: calc(var(--loader-border-width) / 2);
|
||||
--loader-border-width-big: calc(var(--loader-border-width) * 2);;
|
||||
--loader-size: 2rem;
|
||||
--loader-size-small: calc(var(--loader-size) / 2);
|
||||
--loader-size-big: calc(var(--loader-size) * 2);
|
||||
--loader-speed: 750ms;
|
||||
--loader-margin-x: var(--component-spacing-small);
|
||||
--loader-margin-y: 0;
|
||||
}
|
||||
|
||||
@keyframes loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
@@ -16,7 +29,7 @@
|
||||
display: inline-block;
|
||||
animation: loader var(--loader-speed) linear infinite;
|
||||
vertical-align: middle;
|
||||
margin: var(--loader-spacing-y) var(--loader-spacing-x);
|
||||
margin: var(--loader-margin-y) var(--loader-margin-x);
|
||||
}
|
||||
|
||||
.loader-bg {
|
||||
@@ -54,3 +67,48 @@
|
||||
top: calc(50% - var(--loader-size-big) / 2);
|
||||
left: calc(50% - var(--loader-size-big) / 2);
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.loader-secondary,
|
||||
.loader-secondary.loader-bg::after {
|
||||
border-top-color: var(--state-secondary);
|
||||
border-left-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.loader-success,
|
||||
.loader-success.loader-bg::after {
|
||||
border-top-color: var(--state-success);
|
||||
border-left-color: var(--state-success);
|
||||
}
|
||||
|
||||
.loader-info,
|
||||
.loader-info.loader-bg::after {
|
||||
border-top-color: var(--state-info);
|
||||
border-left-color: var(--state-info);
|
||||
}
|
||||
|
||||
.loader-warning,
|
||||
.loader-warning.loader-bg::after {
|
||||
border-top-color: var(--state-warning);
|
||||
border-left-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.loader-danger,
|
||||
.loader-danger.loader-bg::after {
|
||||
border-top-color: var(--state-danger);
|
||||
border-left-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.loader-light,
|
||||
.loader-light.loader-bg::after {
|
||||
border-top-color: var(--state-light);
|
||||
border-left-color: var(--state-light);
|
||||
border-bottom-color: var(--state-dark);
|
||||
border-right-color: var(--state-dark);
|
||||
}
|
||||
|
||||
.loader-dark,
|
||||
.loader-dark.loader-bg::after {
|
||||
border-top-color: var(--state-dark);
|
||||
border-left-color: var(--state-dark);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,19 @@
|
||||
/*! Progress Bars */
|
||||
:root {
|
||||
--progress-font-size: var(--input-font-size);
|
||||
--progress-font-size-small: var(--input-font-size-small);
|
||||
--progress-font-size-big: var(--input-font-size-big);
|
||||
--progress-height: var(--input-height);
|
||||
--progress-height-small: var(--input-height-small);
|
||||
--progress-height-big: var(--input-height-big);
|
||||
--progress-color: var(--color-white);
|
||||
--progress-bg-color: var(--component-bg-color);
|
||||
--progress-bar-bg-color: var(--state-primary);
|
||||
--progress-border-radius: var(--component-border-radius);
|
||||
--progress-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||
--progress-speed-change: .2s;
|
||||
--progress-speed-indeterminate: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
@@ -21,6 +36,7 @@
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--progress-box-shadow);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@@ -53,3 +69,38 @@
|
||||
width: 50% !important;
|
||||
animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite;
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.progress-secondary .progress-bar {
|
||||
background-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.progress-success .progress-bar {
|
||||
background-color: var(--state-success);
|
||||
}
|
||||
|
||||
.progress-info .progress-bar {
|
||||
background-color: var(--state-info);
|
||||
}
|
||||
|
||||
.progress-warning .progress-bar {
|
||||
background-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.progress-danger .progress-bar {
|
||||
background-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.progress-light {
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
.progress-light .progress-bar {
|
||||
color: var(--state-dark);
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.progress-dark .progress-bar {
|
||||
color: var(--state-light);
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
@@ -6,14 +6,8 @@
|
||||
Source: https://github.com/claviska/shoelace-css
|
||||
*/
|
||||
|
||||
/* Reset */
|
||||
@import url('normalize.css');
|
||||
|
||||
/* Shoelace variables and base styles */
|
||||
@import url('variables.css');
|
||||
@import url('content.css');
|
||||
|
||||
/* Components */
|
||||
@import url('alerts.css');
|
||||
@import url('badges.css');
|
||||
@import url('buttons.css');
|
||||
@@ -25,3 +19,49 @@
|
||||
@import url('tabs.css');
|
||||
@import url('tables.css');
|
||||
@import url('utilities.css');
|
||||
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-sans-serif: sans-serif;
|
||||
--font-serif: serif;
|
||||
--font-system: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
|
||||
/* Colors (most courtesy of http://clrs.cc/) */
|
||||
--color-white: white;
|
||||
--color-navy: #001f3f;
|
||||
--color-blue: #0074d9;
|
||||
--color-aqua: #7fdbff;
|
||||
--color-teal: #39cccc;
|
||||
--color-olive: #3d9970;
|
||||
--color-green: #2ecc40;
|
||||
--color-lime: #01ff70;
|
||||
--color-yellow: #ffdc00;
|
||||
--color-orange: #ff851b;
|
||||
--color-red: #ff4136;
|
||||
--color-maroon: #85144b;
|
||||
--color-fuchsia: #f012be;
|
||||
--color-purple: #b10dc9;
|
||||
--color-black: #111;
|
||||
--color-gray: #aaa;
|
||||
--color-silver: #ddd;
|
||||
|
||||
/* States */
|
||||
--state-primary: tomato;
|
||||
--state-secondary: #a5a5a5;
|
||||
--state-success: var(--color-green);
|
||||
--state-info: var(--color-teal);
|
||||
--state-warning: var(--color-orange);
|
||||
--state-danger: var(--color-red);
|
||||
--state-light: #eee;
|
||||
--state-dark: var(--color-black);
|
||||
|
||||
/* Components */
|
||||
--component-bg-color: #f2f2f2;
|
||||
--component-border-color: #ddd;
|
||||
--component-border-radius: .25rem;
|
||||
--component-border-width: 1px;
|
||||
--component-spacing: 1rem;
|
||||
--component-spacing-big: 2rem;
|
||||
--component-spacing-small: .5rem;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,20 @@
|
||||
/*! Switches */
|
||||
:root {
|
||||
--switch-font-size: var(--input-font-size);
|
||||
--switch-font-size-small: var(--input-font-size-small);
|
||||
--switch-font-size-big: var(--input-font-size-big);
|
||||
--switch-bg-color: var(--component-border-color);
|
||||
--switch-bg-color-checked: var(--state-primary);
|
||||
--switch-border-radius: var(--switch-height);
|
||||
--switch-height: var(--input-height);
|
||||
--switch-height-small: var(--input-height-small);
|
||||
--switch-height-big: var(--input-height-big);
|
||||
--switch-thumb-bg-color: white;
|
||||
--switch-thumb-border-radius: 50%;
|
||||
--switch-thumb-spacing: 2px;
|
||||
--switch-speed: .2s;
|
||||
}
|
||||
|
||||
.switch {
|
||||
font-size: var(--switch-font-size);
|
||||
}
|
||||
@@ -112,3 +128,40 @@
|
||||
.switch + .switch {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
/* Variations */
|
||||
.switch-secondary input:checked + label::before {
|
||||
background-color: var(--state-secondary);
|
||||
}
|
||||
|
||||
.switch-success input:checked + label::before {
|
||||
background-color: var(--state-success);
|
||||
}
|
||||
|
||||
.switch-info input:checked + label::before {
|
||||
background-color: var(--state-info);
|
||||
}
|
||||
|
||||
.switch-warning input:checked + label::before {
|
||||
background-color: var(--state-warning);
|
||||
}
|
||||
|
||||
.switch-danger input:checked + label::before {
|
||||
background-color: var(--state-danger);
|
||||
}
|
||||
|
||||
.switch-light input + label::before {
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
.switch-light input:checked + label::before {
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.switch-dark input + label::before {
|
||||
background-color: var(--state-light);
|
||||
}
|
||||
|
||||
.switch-dark input:checked + label::before {
|
||||
background-color: var(--state-dark);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,14 @@
|
||||
/*! Tables */
|
||||
:root {
|
||||
--table-border-color: var(--component-border-color);
|
||||
--table-border-width: var(--component-border-width);
|
||||
--table-header-bg-color: transparent;
|
||||
--table-stripe-bg-color: var(--component-bg-color);
|
||||
--table-hover-color: var(--color-white);
|
||||
--table-hover-bg-color: var(--state-primary);
|
||||
--table-spacing-x: calc(var(--component-spacing-small) * 1.5);
|
||||
--table-spacing-y: var(--component-spacing-small);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
@@ -9,7 +19,7 @@ table {
|
||||
table caption {
|
||||
caption-side: bottom;
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--text-muted);
|
||||
color: var(--state-secondary);
|
||||
text-align: center;
|
||||
padding-top: var(--table-spacing-y);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,23 @@
|
||||
/*! Tabs */
|
||||
:root {
|
||||
--tab-bg-color: var(--body-bg-color);
|
||||
--tab-bg-color-hover: var(--body-bg-color);
|
||||
--tab-bg-color-active: var(--link-color);
|
||||
--tab-bg-color-disabled: var(--body-bg-color);
|
||||
--tab-border-radius: var(--component-border-radius);
|
||||
--tab-color: var(--link-color);
|
||||
--tab-color-hover: var(--link-color-hover);
|
||||
--tab-color-active: var(--color-white);
|
||||
--tab-color-disabled: var(--state-secondary);
|
||||
--tab-spacing-x: var(--component-spacing);
|
||||
--tab-spacing-y: calc(var(--component-spacing) / 2);
|
||||
|
||||
--tab-pane-border-color: var(--component-border-color);
|
||||
--tab-pane-border-radius: var(--component-border-radius);
|
||||
--tab-pane-border-width: var(--component-border-width);
|
||||
--tab-pane-spacing-x: var(--component-spacing);
|
||||
--tab-pane-spacing-y: var(--component-spacing);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,4 +1,56 @@
|
||||
/*! Utilties */
|
||||
:root {
|
||||
--spacing-small: var(--component-spacing);
|
||||
--spacing-medium: calc(var(--component-spacing) * 2);
|
||||
--spacing-big: calc(var(--component-spacing) * 4);
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
* Text utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
/* Text color */
|
||||
.text-primary { color: var(--state-primary) !important; }
|
||||
.text-secondary { color: var(--state-secondary) !important; }
|
||||
.text-success { color: var(--state-success) !important; }
|
||||
.text-success { color: var(--state-success) !important; }
|
||||
.text-info { color: var(--state-info) !important; }
|
||||
.text-warning { color: var(--state-warning) !important; }
|
||||
.text-danger { color: var(--state-danger) !important; }
|
||||
.text-light { color: var(--state-light) !important; }
|
||||
.text-dark { color: var(--state-dark) !important; }
|
||||
|
||||
/* Text style */
|
||||
.text-small { font-size: var(--font-size-small) !important; }
|
||||
.text-bold { font-weight: var(--font-weight-bold) !important; }
|
||||
.text-italic { font-style: italic !important; }
|
||||
|
||||
/* Text alignment */
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
|
||||
/* Text case */
|
||||
.text-lowercase { text-transform: lowercase !important; }
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.text-capitalize { text-transform: capitalize !important; }
|
||||
|
||||
/* Text wrapping */
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Background utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
.bg-primary { background-color: var(--state-primary) !important; }
|
||||
.bg-secondary { background-color: var(--state-secondary) !important; }
|
||||
.bg-success { background-color: var(--state-success) !important; }
|
||||
.bg-info { background-color: var(--state-info) !important; }
|
||||
.bg-warning { background-color: var(--state-warning) !important; }
|
||||
.bg-danger { background-color: var(--state-danger) !important; }
|
||||
.bg-light { background-color: var(--state-light) !important; }
|
||||
.bg-dark { background-color: var(--state-dark) !important; }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Float utilities
|
||||
@@ -70,6 +122,9 @@
|
||||
.height-95 { height: 95% !important; }
|
||||
.height-100 { height: 100% !important; }
|
||||
|
||||
.max-width-100 { max-width: 100% !important; }
|
||||
.max-height-100 { max-width: 100% !important; }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Spacing utilities
|
||||
***************************************************************************************************/
|
||||
@@ -141,33 +196,3 @@
|
||||
.margin-x-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||
.margin-y-auto { margin-top: auto !important; margin-bottom: auto !important; }
|
||||
.margin-xy-auto { margin: auto !important; }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Text utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
/* Text color */
|
||||
.text-success { color: var(--state-success) !important; }
|
||||
.text-info { color: var(--state-info) !important; }
|
||||
.text-warning { color: var(--state-warning) !important; }
|
||||
.text-danger { color: var(--state-danger) !important; }
|
||||
.text-muted { color: var(--text-muted) !important; }
|
||||
|
||||
/* Text style */
|
||||
.text-small { font-size: var(--font-size-small) !important; }
|
||||
.text-bold { font-weight: var(--font-weight-bold) !important; }
|
||||
.text-italic { font-style: italic !important; }
|
||||
|
||||
/* Text alignment */
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
|
||||
/* Text case */
|
||||
.text-lowercase { text-transform: lowercase !important; }
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.text-capitalize { text-transform: capitalize !important; }
|
||||
|
||||
/* Text wrapping */
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
|
||||
@@ -1,338 +0,0 @@
|
||||
/*! Variables */
|
||||
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-sans-serif: sans-serif;
|
||||
--font-serif: serif;
|
||||
--font-system: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
|
||||
/* Colors (most courtesy of http://clrs.cc/) */
|
||||
--color-primary: tomato;
|
||||
--color-secondary: #a5a5a5;
|
||||
--color-white: white;
|
||||
--color-navy: #001f3f;
|
||||
--color-blue: #0074d9;
|
||||
--color-aqua: #7fdbff;
|
||||
--color-teal: #39cccc;
|
||||
--color-olive: #3d9970;
|
||||
--color-green: #2ecc40;
|
||||
--color-lime: #01ff70;
|
||||
--color-yellow: #ffdc00;
|
||||
--color-orange: #ff851b;
|
||||
--color-red: #ff4136;
|
||||
--color-maroon: #85144b;
|
||||
--color-fuchsia: #f012be;
|
||||
--color-purple: #b10dc9;
|
||||
--color-black: #111;
|
||||
--color-gray: #aaa;
|
||||
--color-silver: #ddd;
|
||||
|
||||
/* States */
|
||||
--state-success: var(--color-green);
|
||||
--state-info: var(--color-teal);
|
||||
--state-warning: var(--color-orange);
|
||||
--state-danger: var(--color-red);
|
||||
--state-light: #f2f2f2;
|
||||
--state-dark: var(--color-black);
|
||||
|
||||
/* Components */
|
||||
--component-bg-color: #f2f2f2;
|
||||
--component-border-color: #ddd;
|
||||
--component-border-radius: .25rem;
|
||||
--component-border-width: 1px;
|
||||
--component-spacing: 1rem;
|
||||
--component-spacing-big: 2rem;
|
||||
--component-spacing-small: .5rem;
|
||||
|
||||
/* Content */
|
||||
--body-bg-color: var(--color-white);
|
||||
--body-color: var(--color-black);
|
||||
--font-family: var(--font-system);
|
||||
--font-size: 1rem; /* Most browsers use a default font size of 16px */
|
||||
--font-size-big: 1.25rem;
|
||||
--font-size-small: .875rem;
|
||||
--font-weight-light: 300;
|
||||
--font-weight: 400;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 1.5;
|
||||
--text-muted: var(--color-gray);
|
||||
|
||||
--code-font-size: 90%;
|
||||
--code-color: var(--color-black);
|
||||
--code-border-radius: var(--component-border-radius);
|
||||
--code-bg-color: var(--component-bg-color);
|
||||
--code-spacing-x: calc(var(--font-size) * .4);
|
||||
--code-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--headings-font-family: var(--font-system);
|
||||
--headings-font-weight: var(--font-weight-light);
|
||||
--headings-line-height: 1.1;
|
||||
--headings-margin-bottom: .5rem;
|
||||
--headings-color: inherit;
|
||||
--headings-font-size-h1: 2.5rem;
|
||||
--headings-font-size-h2: 2rem;
|
||||
--headings-font-size-h3: 1.75rem;
|
||||
--headings-font-size-h4: 1.5rem;
|
||||
--headings-font-size-h5: 1.25rem;
|
||||
--headings-font-size-h6: 1rem;
|
||||
|
||||
--hr-border-width: 1px;
|
||||
--hr-border-color: var(--component-border-color);
|
||||
--hr-spacing: var(--component-spacing-big);
|
||||
|
||||
--kbd-font-size: 90%;
|
||||
--kbd-color: var(--color-white);
|
||||
--kbd-border-radius: var(--component-border-radius);
|
||||
--kbd-bg-color: var(--color-black);
|
||||
--kbd-spacing-x: calc(var(--font-size) * .4);
|
||||
--kbd-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--link-color: var(--color-primary);
|
||||
--link-text-decoration: none;
|
||||
--link-color-hover: var(--link-color);
|
||||
--link-text-decoration-hover: underline;
|
||||
|
||||
--mark-color: inherit;
|
||||
--mark-bg-color: var(--color-yellow);
|
||||
--mark-spacing-x: calc(var(--font-size) * .4);
|
||||
--mark-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--placeholder-color: var(--text-muted);
|
||||
|
||||
--pre-color: var(--code-color);
|
||||
--pre-border-radius: var(--component-border-radius);
|
||||
--pre-bg-color: var(--code-bg-color);
|
||||
--pre-max-height: none;
|
||||
|
||||
--selection-color: var(--color-white);
|
||||
--selection-bg-color: var(--color-primary);
|
||||
|
||||
/* Alerts */
|
||||
--alert-border-radius: var(--component-border-radius);
|
||||
--alert-spacing-x: var(--component-spacing);
|
||||
--alert-spacing-y: var(--component-spacing);
|
||||
|
||||
--alert-color: var(--color-white);
|
||||
--alert-bg-color: var(--color-primary);
|
||||
|
||||
--alert-color-secondary: var(--color-white);
|
||||
--alert-bg-color-secondary: var(--color-secondary);
|
||||
|
||||
--alert-color-success: var(--color-white);
|
||||
--alert-bg-color-success: var(--state-success);
|
||||
|
||||
--alert-color-info: var(--color-white);
|
||||
--alert-bg-color-info: var(--state-info);
|
||||
|
||||
--alert-color-warning: var(--color-white);
|
||||
--alert-bg-color-warning: var(--state-warning);
|
||||
|
||||
--alert-color-danger: var(--color-white);
|
||||
--alert-bg-color-danger: var(--state-danger);
|
||||
|
||||
--alert-color-light: var(--color-black);
|
||||
--alert-bg-color-light: var(--state-light);
|
||||
|
||||
--alert-color-dark: var(--color-white);
|
||||
--alert-bg-color-dark: var(--state-dark);
|
||||
|
||||
/* Badges */
|
||||
--badge-font-size: .8em; /* ems for relative sizing */
|
||||
--badge-font-weight: var(--font-weight);
|
||||
--badge-border-radius: 1em; /* ems for relative sizing */
|
||||
--badge-box-shadow-hover: inset 0 0 0 1em rgba(0, 0, 0, .1);
|
||||
--badge-spacing-x: .6em;
|
||||
--badge-spacing-y: .2em;
|
||||
|
||||
--badge-color: var(--color-white);
|
||||
--badge-bg-color: var(--color-primary);
|
||||
|
||||
--badge-color-secondary: var(--color-white);
|
||||
--badge-bg-color-secondary: var(--color-secondary);
|
||||
|
||||
--badge-color-success: var(--color-white);
|
||||
--badge-bg-color-success: var(--state-success);
|
||||
|
||||
--badge-color-info: var(--color-white);
|
||||
--badge-bg-color-info: var(--state-info);
|
||||
|
||||
--badge-color-warning: var(--color-white);
|
||||
--badge-bg-color-warning: var(--state-warning);
|
||||
|
||||
--badge-color-danger: var(--color-white);
|
||||
--badge-bg-color-danger: var(--state-danger);
|
||||
|
||||
--badge-color-light: var(--color-black);
|
||||
--badge-bg-color-light: var(--state-light);
|
||||
|
||||
--badge-color-dark: var(--color-white);
|
||||
--badge-bg-color-dark: var(--state-dark);
|
||||
|
||||
/* Buttons */
|
||||
--button-font-family: var(--input-font-family);
|
||||
--button-font-weight: var(--input-font-weight);
|
||||
--button-font-size: var(--input-font-size);
|
||||
--button-font-size-small: var(--input-font-size-small);
|
||||
--button-font-size-big: var(--input-font-size-big);
|
||||
--button-height: var(--input-height);
|
||||
--button-height-small: var(--input-height-small);
|
||||
--button-height-big: var(--input-height-big);
|
||||
--button-border-radius: var(--component-border-radius);
|
||||
--button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
|
||||
--button-box-shadow-hover: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
|
||||
--button-box-shadow-active: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 2px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
--button-color: var(--color-white);
|
||||
--button-bg-color: var(--color-primary);
|
||||
|
||||
--button-color-secondary: var(--color-white);
|
||||
--button-bg-color-secondary: var(--color-secondary);
|
||||
|
||||
--button-color-success: var(--color-white);
|
||||
--button-bg-color-success: var(--state-success);
|
||||
|
||||
--button-color-info: var(--color-white);
|
||||
--button-bg-color-info: var(--state-info);
|
||||
|
||||
--button-color-warning: var(--color-white);
|
||||
--button-bg-color-warning: var(--state-warning);
|
||||
|
||||
--button-color-danger: var(--color-white);
|
||||
--button-bg-color-danger: var(--state-danger);
|
||||
|
||||
--button-color-light: var(--color-black);
|
||||
--button-bg-color-light: var(--state-light);
|
||||
|
||||
--button-color-dark: var(--color-white);
|
||||
--button-bg-color-dark: var(--state-dark);
|
||||
|
||||
/* Dropdowns */
|
||||
--dropdown-min-width: 10rem;
|
||||
--dropdown-max-width: 25rem;
|
||||
--dropdown-max-height: none;
|
||||
--dropdown-offset-x: 0;
|
||||
--dropdown-offset-y: 1px;
|
||||
--dropdown-border-color: var(--component-border-color);
|
||||
--dropdown-border-radius: var(--component-border-radius);
|
||||
--dropdown-border-width: var(--component-border-width);
|
||||
--dropdown-color: var(--body-color);
|
||||
--dropdown-color-hover: var(--color-white);
|
||||
--dropdown-bg-color: var(--color-white);
|
||||
--dropdown-bg-color-hover: var(--color-primary);
|
||||
--dropdown-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--dropdown-divider-border-color: var(--component-border-color);
|
||||
--dropdown-divider-border-width: var(--component-border-width);
|
||||
--dropdown-spacing-x: var(--component-spacing);
|
||||
--dropdown-spacing-y: calc(var(--dropdown-spacing-x) / 4);
|
||||
--dropdown-z-index: 100;
|
||||
|
||||
/* Forms */
|
||||
--fieldset-border-color: var(--component-border-color);
|
||||
--fieldset-border-width: var(--component-border-width);
|
||||
--fieldset-border-radius: var(--component-border-radius);
|
||||
--fieldset-spacing-x: var(--component-spacing);
|
||||
--fieldset-spacing-y: var(--component-spacing);
|
||||
|
||||
--input-font-family: inherit;
|
||||
--input-font-size: var(--font-size);
|
||||
--input-font-size-small: .8rem;
|
||||
--input-font-size-big: 1.2rem;
|
||||
--input-font-weight: inherit;
|
||||
--input-height: 2rem;
|
||||
--input-height-big: 2.75rem;
|
||||
--input-height-small: 1.25rem;
|
||||
--input-color: var(--body-color);
|
||||
--input-border-color: var(--component-border-color);
|
||||
--input-border-color-focus: var(--color-primary);
|
||||
--input-border-width: 1px;
|
||||
--input-border-radius: var(--component-border-radius);
|
||||
--input-bg-color: var(--color-white);
|
||||
--input-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--input-readonly-bg-color: var(--component-bg-color);
|
||||
--input-range-track-color: var(--component-bg-color);
|
||||
--input-range-track-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--input-range-thumb-color: var(--color-primary);
|
||||
--input-range-thumb-height: 2rem;
|
||||
|
||||
--input-invalid-color: var(--state-danger);
|
||||
--input-invalid-border-color: var(--state-danger);
|
||||
--input-valid-color: var(--state-success);
|
||||
--input-valid-border-color: var(--state-success);
|
||||
|
||||
/* Loaders */
|
||||
--loader-bg-color: var(--component-bg-color);
|
||||
--loader-border-color: var(--color-primary);
|
||||
--loader-border-width: .2rem;
|
||||
--loader-border-width-small: calc(var(--loader-border-width) / 2);
|
||||
--loader-border-width-big: calc(var(--loader-border-width) * 2);;
|
||||
--loader-size: 2rem;
|
||||
--loader-size-small: calc(var(--loader-size) / 2);
|
||||
--loader-size-big: calc(var(--loader-size) * 2);
|
||||
--loader-speed: 750ms;
|
||||
--loader-spacing-x: var(--component-spacing-small);
|
||||
--loader-spacing-y: 0;
|
||||
|
||||
/* Progress */
|
||||
--progress-font-size: var(--input-font-size);
|
||||
--progress-font-size-small: var(--input-font-size-small);
|
||||
--progress-font-size-big: var(--input-font-size-big);
|
||||
--progress-height: var(--input-height);
|
||||
--progress-height-small: var(--input-height-small);
|
||||
--progress-height-big: var(--input-height-big);
|
||||
--progress-color: var(--color-white);
|
||||
--progress-bg-color: var(--component-bg-color);
|
||||
--progress-bar-bg-color: var(--color-primary);
|
||||
--progress-border-radius: var(--component-border-radius);
|
||||
--progress-speed-change: .2s;
|
||||
--progress-speed-indeterminate: 1.5s;
|
||||
|
||||
/* Spacing Utilties */
|
||||
--spacing-small: var(--component-spacing);
|
||||
--spacing-medium: calc(var(--component-spacing) * 2);
|
||||
--spacing-big: calc(var(--component-spacing) * 4);
|
||||
|
||||
/* Switches */
|
||||
--switch-font-size: var(--input-font-size);
|
||||
--switch-font-size-small: var(--input-font-size-small);
|
||||
--switch-font-size-big: var(--input-font-size-big);
|
||||
--switch-bg-color: var(--component-border-color);
|
||||
--switch-bg-color-checked: var(--color-primary);
|
||||
--switch-border-radius: var(--switch-height);
|
||||
--switch-height: var(--input-height);
|
||||
--switch-height-small: var(--input-height-small);
|
||||
--switch-height-big: var(--input-height-big);
|
||||
--switch-thumb-bg-color: white;
|
||||
--switch-thumb-border-radius: 50%;
|
||||
--switch-thumb-spacing: 2px;
|
||||
--switch-speed: .2s;
|
||||
|
||||
/* Tabs */
|
||||
--tab-bg-color: var(--body-bg-color);
|
||||
--tab-bg-color-hover: var(--body-bg-color);
|
||||
--tab-bg-color-active: var(--link-color);
|
||||
--tab-bg-color-disabled: var(--body-bg-color);
|
||||
--tab-border-radius: var(--component-border-radius);
|
||||
--tab-color: var(--link-color);
|
||||
--tab-color-hover: var(--link-color-hover);
|
||||
--tab-color-active: var(--color-white);
|
||||
--tab-color-disabled: var(--text-muted);
|
||||
--tab-spacing-x: var(--component-spacing);
|
||||
--tab-spacing-y: calc(var(--component-spacing) / 2);
|
||||
|
||||
--tab-pane-border-color: var(--component-border-color);
|
||||
--tab-pane-border-radius: var(--component-border-radius);
|
||||
--tab-pane-border-width: var(--component-border-width);
|
||||
--tab-pane-spacing-x: var(--component-spacing);
|
||||
--tab-pane-spacing-y: var(--component-spacing);
|
||||
|
||||
/* Tables */
|
||||
--table-border-color: var(--component-border-color);
|
||||
--table-border-width: var(--component-border-width);
|
||||
--table-header-bg-color: transparent;
|
||||
--table-stripe-bg-color: var(--component-bg-color);
|
||||
--table-hover-color: var(--color-white);
|
||||
--table-hover-bg-color: var(--color-primary);
|
||||
--table-spacing-x: calc(var(--component-spacing-small) * 1.5);
|
||||
--table-spacing-y: var(--component-spacing-small);
|
||||
}
|
||||
@@ -6,7 +6,17 @@ description: Call attention in your app with alerts.
|
||||
|
||||
## Alerts
|
||||
|
||||
Create an alert by applying the `alert` class to an element such as a `<div>`. You can change an alert’s appearance using the `alert-*` modifier.
|
||||
Create an alert by applying the `alert` class to an element such as a `<div>`.
|
||||
|
||||
```html
|
||||
<div class="alert">This is an alert</div>
|
||||
```
|
||||
|
||||
<div class="alert">This is an alert</div>
|
||||
|
||||
## Variations
|
||||
|
||||
Use the `alert-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<div class="alert">Primary</div>
|
||||
|
||||
@@ -6,29 +6,13 @@ description: Add badges to your app with minimal effort.
|
||||
|
||||
## Badges
|
||||
|
||||
Create a badge by applying the `badge` class to an element such as a `<span>`. You can change a badge’s appearance using the `badge-*` modifier.
|
||||
Create a badge by applying the `badge` class to an element such as a `<span>`.
|
||||
|
||||
```html
|
||||
<span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
<span class="badge">Badge</span>
|
||||
```
|
||||
|
||||
<p>
|
||||
<span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
</p>
|
||||
<span class="badge">Badge</span>
|
||||
|
||||
By default, badges are sized relative to their parent element.
|
||||
|
||||
@@ -44,9 +28,34 @@ By default, badges are sized relative to their parent element.
|
||||
<h3>Heading 3 <span class="badge">Badge</span></h3>
|
||||
<p>Paragraph <span class="badge">Badge</span></p>
|
||||
|
||||
### Variations
|
||||
|
||||
Use the `badge-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
```
|
||||
|
||||
<span class="badge">Primary</span>
|
||||
<span class="badge badge-secondary">Secondary</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-light">Light</span>
|
||||
<span class="badge badge-dark">Dark</span>
|
||||
|
||||
### Badge Links
|
||||
|
||||
Badges can also be made into links.
|
||||
|
||||
```html
|
||||
<a href="#" class="badge">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
@@ -58,13 +67,11 @@ By default, badges are sized relative to their parent element.
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
```
|
||||
|
||||
<p>
|
||||
<a href="#" class="badge">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
</p>
|
||||
<a href="#" class="badge">Primary</a>
|
||||
<a href="#" class="badge badge-secondary">Secondary</a>
|
||||
<a href="#" class="badge badge-success">Success</a>
|
||||
<a href="#" class="badge badge-info">Info</a>
|
||||
<a href="#" class="badge badge-warning">Warning</a>
|
||||
<a href="#" class="badge badge-danger">Danger</a>
|
||||
<a href="#" class="badge badge-light">Light</a>
|
||||
<a href="#" class="badge badge-dark">Dark</a>
|
||||
|
||||
@@ -6,11 +6,78 @@ description: Add styled buttons to your app with minimal effort.
|
||||
|
||||
## Buttons
|
||||
|
||||
To create a button, use the `<button>` element or apply the `button` class to another element such as an `<a>`. You can change a button’s appearance using the `button-*` modifier.
|
||||
To create a button, use the `<button>` element or apply the `button` class to an `<a>`.
|
||||
|
||||
```html
|
||||
<button type="button">Button</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button">Button</button>
|
||||
</div>
|
||||
|
||||
Use the `button-small` and `button-big` modifiers to change the size of a button.
|
||||
|
||||
```html
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
Use the `button-block` modifier to make a button span the entire width of its parent.
|
||||
|
||||
```html
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</div>
|
||||
|
||||
To disable a button set the `disabled` property on `<button>` elements.
|
||||
|
||||
```html
|
||||
<button type="button" disabled>Disabled</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" disabled>Disabled</button>
|
||||
</div>
|
||||
|
||||
You can force buttons to have an active state by applying the `active` class.
|
||||
|
||||
```html
|
||||
<button type="button" class="active">Active</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="active">Active</button>
|
||||
</div>
|
||||
|
||||
### Variations
|
||||
|
||||
Use the `button-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<button type="button">Primary</button>
|
||||
<button type="button" class="button-secondary">Secondary</button>
|
||||
<button type="button" class="button-success">Success</button>
|
||||
<button type="button" class="button-info">Info</button>
|
||||
<button type="button" class="button-warning">Warning</button>
|
||||
<button type="button" class="button-danger">Danger</button>
|
||||
@@ -29,65 +96,17 @@ To create a button, use the `<button>` element or apply the `button` class to an
|
||||
<button type="button" class="button-dark">Dark</button>
|
||||
</div>
|
||||
|
||||
Use the `button-small` and `button-big` modifiers to change the size of a button.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
Use the `button-block` modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</div>
|
||||
|
||||
Disabled buttons look like this. Set the `disabled` property on `<button>` elements to achieve this effect. For all other elements, apply `class="disabled"` instead.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" disabled>Primary</button>
|
||||
<button type="button" class="button-secondary" disabled>Secondary</button>
|
||||
<button type="button" class="button-success" disabled>Success</button>
|
||||
<button type="button" class="button-info" disabled>Info</button>
|
||||
<button type="button" class="button-warning" disabled>Warning</button>
|
||||
<button type="button" class="button-danger" disabled>Danger</button>
|
||||
<button type="button" class="button-light" disabled>Light</button>
|
||||
<button type="button" class="button-dark" disabled>Dark</button>
|
||||
</div>
|
||||
|
||||
You can force buttons to have an active state by applying the `active` class.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="active">Primary</button>
|
||||
<button type="button" class="button-secondary active">Secondary</button>
|
||||
<button type="button" class="button-success active">Success</button>
|
||||
<button type="button" class="button-info active">Info</button>
|
||||
<button type="button" class="button-warning active">Warning</button>
|
||||
<button type="button" class="button-danger active">Danger</button>
|
||||
<button type="button" class="button-light active">Light</button>
|
||||
<button type="button" class="button-dark active">Dark</button>
|
||||
</div>
|
||||
|
||||
### Link Buttons
|
||||
|
||||
Buttons can be styled to look like normal links with the `button-link` modifier. The appropriate sizing is placed so they align properly with regular buttons.
|
||||
Buttons can be styled to look like normal links with the `button-link` modifier. Button sizing is maintained so they align properly with other buttons.
|
||||
|
||||
```html
|
||||
<a href="#" class="button">Button</a>
|
||||
<button type="button">Button</button>
|
||||
<a href="#" class="button button-link">Link</a>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<a href="#" class="button">Button</a>
|
||||
<button type="button">Button</button>
|
||||
<a href="#" class="button button-link">Link</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@ description: Default content styles.
|
||||
|
||||
## Content
|
||||
|
||||
Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.
|
||||
Shoelace provides default content styles that are easy to customize. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.
|
||||
|
||||
For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in `rem` units.
|
||||
For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in `rem` units. Shoelace also sets `box-sizing: border-box` globally to make it easier to properly size elements.
|
||||
|
||||
### Headings `<h1> – <h6>`
|
||||
|
||||
|
||||
@@ -6,20 +6,25 @@ description: Learn how to customize Shoelace.css with CSS variables.
|
||||
|
||||
## Customizing
|
||||
|
||||
You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in [`variables.css`](../source/css/variables.css) in your own stylesheet.
|
||||
You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in the `:root` block of [`shoelace.css`](../source/css/shoelace.css).
|
||||
|
||||
For example, you can customize the default text color and background like this:
|
||||
For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--body-color: white;
|
||||
--body-bg-color: black;
|
||||
--state-primary: #09d;
|
||||
}
|
||||
```
|
||||
|
||||
You don’t need to include all of the variables. You only need to override the ones you actually want to customize.
|
||||
|
||||
Additional variables can be found in the `:root` block of each component’s stylesheet. For example, to customize alerts, refer to the top of [`alerts.css`](https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css) for a list of variables.
|
||||
|
||||
### Using Variables
|
||||
|
||||
You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#custom-components).
|
||||
You can use any of Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#creating-custom-components).
|
||||
|
||||
```css
|
||||
.your-selector {
|
||||
@@ -27,16 +32,16 @@ You can use any of Shoelace’s variables in your stylesheet. This makes it easy
|
||||
}
|
||||
```
|
||||
|
||||
Refer to [`variables.css`](../source/css/variables.css) for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment.
|
||||
If you’re not familiar with CSS variables, [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment.
|
||||
|
||||
### Custom Components
|
||||
### Creating Custom Components
|
||||
|
||||
You can create custom components to extend Shoelace’s functionality. Here are some best practices to keep things consistent and easy for others to understand.
|
||||
|
||||
**Familiarize yourself with Shoelace’s naming conventions.** A custom accordion component, for example, would have a class name such as `accordion`, modifier classes such as `accordion-open`, and variable names that look like `--accordion-bg-color`. Try to follow similar patterns as much as possible.
|
||||
|
||||
**Define new variables when it makes sense to.** Take a look at [`variables.css`](../source/css/variables.css) to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.
|
||||
**Define new variables when it makes sense to.** Take a look at how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.
|
||||
|
||||
**Semantic markup is strongly encouraged.** Custom components should use the most appropriate elements and the minimal amount of markup required.
|
||||
|
||||
**Keep everything together.** During development, each component should be in its own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend on other components’ styles or scripts. This makes it easier to add or remove components from your app without affecting others. Of course, it’s perfectly fine to bundle components for optimization purposes in production.
|
||||
**Keep everything together.** Each component should be in its own folder along with its stylesheets, scripts, and documentation. Components can use core variables, but they shouldn’t depend on other components’ styles or scripts to work. This makes it easier to add or remove components from your app without worrying about dependencies.
|
||||
|
||||
@@ -89,9 +89,27 @@ Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning o
|
||||
|
||||
Dropdowns with button triggers can be used inside input groups.
|
||||
|
||||
```html
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text" placeholder="10.00">
|
||||
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Currency</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="checked">USD</a>
|
||||
<a href="#">AUD</a>
|
||||
<a href="#">CAD</a>
|
||||
<a href="#">GBP</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text" placeholder="10.00">
|
||||
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Currency</button>
|
||||
<div class="dropdown-menu">
|
||||
|
||||
@@ -43,7 +43,7 @@ Form controls are styled at 100% of the width of their parent element.
|
||||
<td>
|
||||
<code><input type="file"></code>
|
||||
<br>
|
||||
<span class="text-small text-muted">
|
||||
<span class="text-small text-secondary">
|
||||
File inputs aren’t supported. Use a [file button](buttons.html#file-buttons) instead.
|
||||
</span>
|
||||
</td>
|
||||
@@ -200,35 +200,27 @@ Form controls and buttons can be grouped by wrapping them in `input-group` conta
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button type="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Option 1</button>
|
||||
<button type="button">Option 2</button>
|
||||
<button type="button">Option 3</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button type="button">Option 1</button>
|
||||
<button type="button">Option 2</button>
|
||||
<button type="button">Option 3</button>
|
||||
</div>
|
||||
|
||||
### Input Addons
|
||||
|
||||
@@ -22,7 +22,7 @@ You can load Font Awesome locally or via CDN. To use the CDN version, add this t
|
||||
|
||||
Then add icons as you normally would with `<i class="fa fa-*"></i>`:
|
||||
|
||||
<div class="input-single text-muted" style="font-size: 2rem;">
|
||||
<div class="input-single text-secondary" style="font-size: 2rem;">
|
||||
<i class="fa fa-magic"></i>
|
||||
<i class="fa fa-briefcase"></i>
|
||||
<i class="fa fa-cog"></i>
|
||||
|
||||
@@ -19,6 +19,8 @@ Create a pure CSS loader by applying the `loader` class to an empty `<span>` ele
|
||||
<span class="loader loader-big"></span>
|
||||
</div>
|
||||
|
||||
### Background Loaders
|
||||
|
||||
You can simulate a background loader using `loader-bg`. This is achieved using `position: relative` on the container and the `::after` pseudo-element. You can use the `loader-bg-small` and `loader-bg-big` modifiers to change the size.
|
||||
|
||||
```html
|
||||
@@ -32,3 +34,25 @@ You can simulate a background loader using `loader-bg`. This is achieved using `
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
</div>
|
||||
|
||||
### Variations
|
||||
|
||||
Use the `loader-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<span class="loader loader-secondary"></span>
|
||||
<span class="loader loader-success"></span>
|
||||
<span class="loader loader-info"></span>
|
||||
<span class="loader loader-warning"></span>
|
||||
<span class="loader loader-danger"></span>
|
||||
<span class="loader loader-light"></span>
|
||||
<span class="loader loader-dark"></span>
|
||||
```
|
||||
|
||||
<span class="loader loader-secondary"></span>
|
||||
<span class="loader loader-success"></span>
|
||||
<span class="loader loader-info"></span>
|
||||
<span class="loader loader-warning"></span>
|
||||
<span class="loader loader-danger"></span>
|
||||
<span class="loader loader-light"></span>
|
||||
<span class="loader loader-dark"></span>
|
||||
|
||||
@@ -49,3 +49,73 @@ When progress can’t be determined, use the `progress-indeterminate` modifier t
|
||||
<div class="progress progress-indeterminate">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
### Variations
|
||||
|
||||
Use the `progress-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<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 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>
|
||||
|
||||
@@ -67,3 +67,53 @@ Disabled switches are dimmed out. To disable a switch, add the `disabled` attrib
|
||||
<label for="switch-6">Disabled</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
### Variations
|
||||
|
||||
Use the `switch-*` modifier to create variations.
|
||||
|
||||
```html
|
||||
<span class="switch switch-secondary">...</span>
|
||||
<span class="switch switch-success">...</span>
|
||||
<span class="switch switch-info">...</span>
|
||||
<span class="switch switch-warning">...</span>
|
||||
<span class="switch switch-danger">...</span>
|
||||
<span class="switch switch-light">...</span>
|
||||
<span class="switch switch-dark">...</span>
|
||||
```
|
||||
|
||||
<span class="switch switch-secondary">
|
||||
<input type="checkbox" class="switch" id="variation-1" checked>
|
||||
<label for="variation-1">Secondary</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-success">
|
||||
<input type="checkbox" class="switch" id="variation-2" checked>
|
||||
<label for="variation-2">Success</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-info">
|
||||
<input type="checkbox" class="switch" id="variation-3" checked>
|
||||
<label for="variation-3">Info</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-warning">
|
||||
<input type="checkbox" class="switch" id="variation-4" checked>
|
||||
<label for="variation-4">Warning</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-danger">
|
||||
<input type="checkbox" class="switch" id="variation-5" checked>
|
||||
<label for="variation-5">Danger</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-light">
|
||||
<input type="checkbox" class="switch" id="variation-6" checked>
|
||||
<label for="variation-6">Light</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-dark">
|
||||
<input type="checkbox" class="switch" id="variation-7" checked>
|
||||
<label for="variation-7">Dark</label>
|
||||
</span>
|
||||
|
||||
@@ -10,8 +10,7 @@ Shoelace provides a number of helpful utility classes that make prototyping easi
|
||||
|
||||
### Text Utilities
|
||||
|
||||
Text utilities are classes that can be applied to just about any element. The text inside will be
|
||||
formatted appropriately.
|
||||
Text utility classes can be applied to change an element’s text.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
@@ -21,6 +20,14 @@ formatted appropriately.
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>`text-primary`</td>
|
||||
<td class="text-primary">This is primary text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-secondary`</td>
|
||||
<td class="text-secondary">This is secondary text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-success`</td>
|
||||
<td class="text-success">This is success text</td>
|
||||
@@ -38,8 +45,12 @@ formatted appropriately.
|
||||
<td class="text-danger">This is danger text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-muted`</td>
|
||||
<td class="text-muted">This is muted text</td>
|
||||
<td>`text-light`</td>
|
||||
<td class="text-light">This is light text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-dark`</td>
|
||||
<td class="text-dark">This is dark text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-small`</td>
|
||||
@@ -88,7 +99,21 @@ formatted appropriately.
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Background Utilities
|
||||
|
||||
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>
|
||||
|
||||
### Float Utilities
|
||||
|
||||
Float utilities are provided to easily float elements to the left or right. Just apply the `float-left` or `float-right` class to an element to float it left or right.
|
||||
|
||||
A clearfix utility is also available to clear floated elements. Just apply the `clearfix` class to the appropriate element.
|
||||
@@ -97,6 +122,8 @@ A clearfix utility is also available to clear floated elements. Just apply the `
|
||||
|
||||
Sizing utilities can be used to set a relative width or height on any element. Just apply a `width-*` or `height-*` class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.
|
||||
|
||||
You can also use the `max-width-100` and `max-height-100` classes to set a max width and height of 100%.
|
||||
|
||||
```html
|
||||
<div class="width-25">25%</div>
|
||||
<div class="width-50">50%</div>
|
||||
|
||||
@@ -22,7 +22,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>
|
||||
@@ -58,7 +58,7 @@
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
<p class="text-small text-secondary">
|
||||
Shoelace.css {{version}} ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
@@ -70,8 +70,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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user