From c9dbb0a96dabe7a910f8e320265cacef349ee98b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 31 Jul 2017 10:10:17 -0400 Subject: [PATCH] Added switches --- index.html | 87 ++++++++++++++++++++++++++++++++++++++++ source/css/shoelace.css | 1 + source/css/switches.css | 70 ++++++++++++++++++++++++++++++++ source/css/variables.css | 12 ++++++ 4 files changed, 170 insertions(+) create mode 100644 source/css/switches.css diff --git a/index.html b/index.html index 117e7bc10..95711935d 100644 --- a/index.html +++ b/index.html @@ -81,6 +81,7 @@
  • Buttons
  • Forms
  • Loaders
    • +
  • Switches
  • Tabs
  • Tables
  • Utilities
    • @@ -1171,6 +1172,92 @@ PRINT "SHOELACE IS AWESOME" + + + +

    + # + Switches +

    + +

    + 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. +

    +

    + Because this is a pure CSS solution, there are a couple important things to remember: +

    + +

    + The markup for a switch looks like this: +

    +
    +<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>
+
    +
    + + + + + + + + + +
    +

    + Use the switch-small and switch-big modifiers to change the size of + a switch. +

    +
    + + + + + + + + + + + + + + +
    +

    + Disabled switches are dimmed out. To disable a switch, add the disabled attribute + to the checkbox (not the wrapper). +

    +
    + + + + +
    + diff --git a/source/css/shoelace.css b/source/css/shoelace.css index 5c548244c..68f333713 100644 --- a/source/css/shoelace.css +++ b/source/css/shoelace.css @@ -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'); diff --git a/source/css/switches.css b/source/css/switches.css new file mode 100644 index 000000000..45d7f2f72 --- /dev/null +++ b/source/css/switches.css @@ -0,0 +1,70 @@ +.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; +} diff --git a/source/css/variables.css b/source/css/variables.css index d4a96f699..85c6cda85 100644 --- a/source/css/variables.css +++ b/source/css/variables.css @@ -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);