From 2afb2fe88ae517c00dc6aa308ad88daeb63aaabd Mon Sep 17 00:00:00 2001
From: Daihua Ye <daihuaye@users.noreply.github.com>
Date: Tue, 2 Oct 2018 22:55:20 -0700
Subject: [PATCH] Add a new snippet: CSS toggle switch (#98)

* Add snippet for visual, interactivity: CSS toggle switch

* Add Explanation #8

* add transition for button and change background color from blue to #7983ff

* add explanation #9

* address based on comment.

* update the css matched with explanation description

* Remove 'CSS' from title for simplicity

* Explanation grammar

* class scoping

* Explanation improvements
---
 snippets/toggle-switch.md | 113 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 snippets/toggle-switch.md

diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md
new file mode 100644
index 000000000..98961619e
--- /dev/null
+++ b/snippets/toggle-switch.md
@@ -0,0 +1,113 @@
+### Toggle switch
+
+Creates a toggle switch with CSS only.
+
+#### HTML
+
+```html
+<input type="checkbox" id="toggle" class="offscreen" />
+<label for="toggle" class="switch"></label>
+```
+
+#### CSS
+
+```css
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  transition: all 0.3s;
+}
+
+.switch::after {
+  content: '';
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background-color: white;
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+input[type='checkbox']:checked + .switch::after {
+  transform: translateX(20px);
+}
+
+input[type='checkbox']:checked + .switch {
+  background-color: #7983ff;
+}
+
+.offscreen {
+  position: absolute;
+  left: -9999px;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <input type="checkbox" id="toggle" class="snippet-demo__offscreen" />
+  <label for="toggle" class="snippet-demo__switch"></label>
+</div>
+
+<style>
+.snippet-demo__switch {
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 20px;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.snippet-demo__switch::after {
+  content: '';
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  background-color: white;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  transition: all 0.3s;
+}
+
+input[type="checkbox"]:checked + .snippet-demo__switch::after {
+  transform: translateX(20px);
+}
+
+input[type="checkbox"]:checked + .snippet-demo__switch {
+  background-color: #7983ff;
+}
+
+.snippet-demo__offscreen {
+  position: absolute;
+  left: -9999px;
+}
+</style>
+
+#### Explanation
+
+This effect is styling only the `<label>` element to look like a toggle switch, and hiding the actual `<input>` checkbox by positioning it offscreen. When clicking the label associated with the `<input>` element, it sets the `<input>` checkbox into the `:checked` state.
+
+1. The `for` attribute associates the `<label>` with the appropriate `<input>` checkbox element by its `id`.
+2. `.switch::after` defines a pseudo-element for the `<label>` to create the circular knob.
+3. `input[type='checkbox']:checked + .switch::after` targets the `<label>`'s pseudo-element's style when the checkbox is `checked`.
+4. `transform: translateX(20px)` moves the pseudo-element (knob) 20px to the right when the checkbox is `checked`.
+5. `background-color: #7983ff;` sets the background-color of the switch to a different color when the checkbox is `checked`.
+6. `.offscreen` moves the `<input>` checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is accessible via keyboard and screen readers.
+7. `transition: all 0.3s` specifies all property changes will be transitioned over 0.3 seconds, therefore transitioning the `<label>`'s `background-color` and the pseudo-element's `transform` property when the checkbox is checked.
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
+
+* https://caniuse.com/#feat=transforms2d
+
+<!-- tags: visual, interactivity -->