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

Merge branch 'master' into master

Browse Source
This commit is contained in:
Cory LaViska
2017-07-31 12:07:19 -04:00
committed by GitHub
parent 9e2d1a5fb4 2da25dfcc6
commit 8471d71d72
6 changed files with 181 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

95
index.html
View File

@@ -31,7 +31,7 @@
<p>
Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any
preprocessing at all. The minified version is only
<span data-minifiedSize>29.8KB</span> and much smaller when gzipped.
<span data-minifiedSize>32KB</span> and much smaller when gzipped.
</p>
<p>
Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
@@ -60,7 +60,7 @@
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
</p>
<p class="text-small text-muted text-center">
Version <span data-version>1.0.0-beta4</span>
Version <span data-version>1.0.0-beta5</span>
</p>
<!--********************************************************************************************
@@ -81,6 +81,7 @@
<li><a href="#buttons">Buttons</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#loaders">Loaders</a></li>
<li><a href="#switches">Switches</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#utilities">Utilities</a></li>
@@ -110,7 +111,7 @@
at <a href="https://www.keycdn.com/">KeyCDN</a>.
</p>
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta4</span>/shoelace.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta5</span>/shoelace.css&quot;&gt;
</pre>
<p>
If you decide to use a CDN, consider speeding up performance by at least adding a <code>preconnect</code> resource hint to give the browser a head start on connecting to the CDN server. You can do this by adding a <code>&lt;link&gt;</code> HTML element in the head like so:
@@ -964,6 +965,92 @@ PRINT "SHOELACE IS AWESOME"
<div class="loader-bg loader-bg-big"></div>
</div>
<!--********************************************************************************************
* Switches
*********************************************************************************************-->
<h2 id="switches">
<a class="bookmark" href="#switches">#</a>
Switches
</h2>
<p>
Switches provide an alternative to standard checkboxes. Many people find them more intuitive
and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful,
animated switches with pure CSS.
</p>
<p>
Because this is a pure CSS solution, there are a couple important things to remember:
</p>
<ul>
<li>
Each switch must have a unique <code>id</code>
</li>
<li>
The <code>&lt;label&gt;</code> must have a <code>for</code> attribute that references the switch <code>id</code>
</li>
<li>
The <code>&lt;label&gt;</code> must come <strong>after</strong> the checkbox, otherwise the
control won’t render
</li>
</ul>
<p>
The markup for a switch looks like this:
</p>
<pre>
&lt;span class=&quot;switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-1&quot;&gt;
&lt;label for=&quot;switch-1&quot;&gt;Option 1&lt;/label&gt;
&lt;/span&gt;
&lt;span class=&quot;switch&quot;&gt;
&lt;input type=&quot;checkbox&quot; class=&quot;switch&quot; id=&quot;switch-2&quot; checked&gt;
&lt;label for=&quot;switch-2&quot;&gt;Option 2&lt;/label&gt;
&lt;/span&gt;
</pre>
<div class="input-single">
<span class="switch">
<input type="checkbox" class="switch" id="switch-1">
<label for="switch-1">Option 1</label>
</span>
<span class="switch">
<input type="checkbox" class="switch" id="switch-2" checked>
<label for="switch-2">Option 2</label>
</span>
</div>
<p>
Use the <code>switch-small</code> and <code>switch-big</code> modifiers to change the size of
a switch.
</p>
<div class="input-single">
<span class="switch switch-small">
<input type="checkbox" class="switch" id="switch-3">
<label for="switch-3">Small</label>
</span>
<span class="switch">
<input type="checkbox" class="switch" id="switch-4">
<label for="switch-4">Normal</label>
</span>
<span class="switch switch-big">
<input type="checkbox" class="switch" id="switch-5">
<label for="switch-5">Big</label>
</span>
</div>
<p>
Disabled switches are dimmed out. To disable a switch, add the <code>disabled</code> attribute
to the checkbox (not the wrapper).
</p>
<div class="input-single">
<span class="switch">
<input type="checkbox" class="switch" disabled id="switch-6">
<label for="switch-6">Disabled</label>
</span>
</div>
<!--********************************************************************************************
* Tabs
*********************************************************************************************-->
@@ -1472,7 +1559,7 @@ Example: class="p-left-medium m-bottom-none"
<img src="source/img/wordmark.svg" alt="Shoelace logo">
</p>
<p class="text-small text-muted">
Shoelace.css <span data-version>1.0.0-beta4</span> &middot;
Shoelace.css <span data-version>1.0.0-beta5</span> &middot;
&copy; A Beautiful Site, LLC
</p>
<p class="text-small text-muted">

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "shoelace-css",
"description": "A back to the basics CSS starter kit.",
"version": "1.0.0-beta4",
"version": "1.0.0-beta5",
"author": "Cory LaViska",
"homepage": "https://shoelace.style/",
"license": "MIT",

1
source/css/shoelace.css
View File

@@ -19,6 +19,7 @@
@import url('buttons.css');
@import url('forms.css');
@import url('loaders.css');
@import url('switches.css');
@import url('tabs.css');
@import url('tables.css');
@import url('utilities.css');

72
source/css/switches.css Normal file
View File

@@ -0,0 +1,72 @@
/*! Switches */
.switch-small {
--switch-size: var(--switch-size-small);
}
.switch-big {
--switch-size: var(--switch-size-big);
}
.switch input {
display: none;
}
.switch input + label {
position: relative;
min-width: calc(var(--switch-size) * 2);
height: var(--switch-size);
line-height: var(--switch-size);
border-radius: var(--switch-thumb-border-radius);
display: inline-block;
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
text-indent: calc(var(--switch-size) * 2 + .5rem);
}
.switch input + label::before,
.switch input + label::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(var(--switch-size) * 2);
bottom: 0;
display: block;
}
.switch input + label::before {
right: 0;
background-color: var(--switch-bg-color);
border-radius: var(--switch-border-radius);
transition: background-color var(--switch-speed);
}
.switch input + label:after {
top: var(--switch-thumb-spacing);
left: var(--switch-thumb-spacing);
width: calc(var(--switch-size) - var(--switch-thumb-spacing) * 2);
height: calc(var(--switch-size) - var(--switch-thumb-spacing) * 2);
border-radius: var(--switch-thumb-border-radius);
background-color: var(--switch-thumb-bg-color);
transition: margin var(--switch-speed);
}
.switch input:checked + label::before {
background-color: var(--switch-bg-color-checked);
}
.switch input:checked + label::after {
margin-left: var(--switch-size);
}
.switch input:disabled + label {
opacity: .5;
cursor: not-allowed;
}
.switch + .switch {
margin-left: 1rem;
}

12
source/css/variables.css
View File

@@ -193,6 +193,18 @@
--spacing-medium: calc(var(--component-spacing) * 2);
--spacing-big: calc(var(--component-spacing) * 4);
/* Switches */
--switch-bg-color: var(--component-border-color);
--switch-bg-color-checked: var(--color-primary);
--switch-border-radius: var(--switch-size);
--switch-size: 2rem;
--switch-size-small: 1rem;
--switch-size-big: 3rem;
--switch-thumb-bg-color: white;
--switch-thumb-border-radius: 50%;
--switch-thumb-spacing: 2px;
--switch-speed: .2s;
/* Tabs */
--tab-bg-color: var(--body-bg);
--tab-bg-color-hover: var(--body-bg);