From 71596b8c964733a9f03dd7251668ed51fc62bfa2 Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Sun, 16 May 2021 13:09:15 +0300
Subject: [PATCH] Add custom checkbox

---
 snippets/custom-checkbox.md  | 146 +++++++++++++++++++++++++++++++++++
 snippets/custom-scrollbar.md |   2 +-
 2 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 snippets/custom-checkbox.md

diff --git a/snippets/custom-checkbox.md b/snippets/custom-checkbox.md
new file mode 100644
index 000000000..660978aca
--- /dev/null
+++ b/snippets/custom-checkbox.md
@@ -0,0 +1,146 @@
+---
+title: Custom checkbox
+tags: visual,animation,advancd
+---
+
+Creates a styled checkbox with animation on state change.
+
+- Use an `<svg>` element to create the check `<symbol>` and insert it via the `<use>` element to create a reusable SVG icon.
+- Create a `.checkbox-container` and use flexbox to create the appropriate layout for the checkboxes.
+- Hide the `<input>` element and use the `label` associated with it to display a checkbox and the provided text.
+- Use `stroke-dashoffset` to animate the check symbol on state change and `transform: scale(0.9)` via a CSS animation to create a zoom animation effect.
+
+```html
+<svg class="checkbox-symbol">
+  <symbol id="check" viewbox="0 0 12 10">
+    <polyline
+      points="1.5 6 4.5 9 10.5 1"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    ></polyline>
+  </symbol>
+</svg>
+
+<div class="checkbox-container">
+  <input class="checkbox-input" id="apples" type="checkbox" />
+  <label class="checkbox" for="apples">
+    <span>
+      <svg width="12px" height="10px">
+        <use xlink:href="#check"></use>
+      </svg>
+    </span>
+    <span>Apples</span>
+  </label>
+  <input class="checkbox-input" id="oranges" type="checkbox" />
+  <label class="checkbox" for="oranges">
+    <span>
+      <svg width="12px" height="10px">
+        <use xlink:href="#check"></use>
+      </svg>
+    </span>
+    <span>Oranges</span>
+  </label>
+</div>
+```
+
+```css
+.checkbox-symbol {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.checkbox-container {
+  box-sizing: border-box;
+  background: #ffffff;
+  color: #222;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: row wrap;
+}
+
+.checkbox-container * {
+  box-sizing: border-box;
+}
+
+.checkbox-input {
+  position: absolute;
+  visibility: hidden;
+}
+
+.checkbox {
+  user-select: none;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 6px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+}
+
+.checkbox:not(:last-child) {
+  margin-right: 6px;
+}
+
+.checkbox:hover {
+  background: rgba(0, 119, 255, 0.06);
+}
+
+.checkbox span {
+  vertical-align: middle;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:first-child {
+  position: relative;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  transform: scale(1);
+  border: 1px solid #cccfdb;
+  transition: all 0.3s ease;
+}
+
+.checkbox span:first-child svg {
+  position: absolute;
+  top: 3px;
+  left: 2px;
+  fill: none;
+  stroke: #fff;
+  stroke-dasharray: 16px;
+  stroke-dashoffset: 16px;
+  transition: all 0.3s ease;
+  transform: translate3d(0, 0, 0);
+}
+
+.checkbox span:last-child {
+  padding-left: 8px;
+  line-height: 18px;
+}
+
+.checkbox:hover span:first-child {
+  border-color: #0077ff;
+}
+
+.checkbox-input:checked + .checkbox span:first-child {
+  background: #0077ff;
+  border-color: #0077ff;
+  animation: zoom-in-out 0.3s ease;
+}
+
+.checkbox-input:checked + .checkbox span:first-child svg {
+  stroke-dashoffset: 0;
+}
+
+@keyframes zoom-in-out {
+  50% {
+    transform: scale(0.9);
+  }
+}
+```
diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md
index ea1c11567..8215f7055 100644
--- a/snippets/custom-scrollbar.md
+++ b/snippets/custom-scrollbar.md
@@ -3,7 +3,7 @@ title: Custom scrollbar
 tags: visual,advanced
 ---
 
-Customizes the scrollbar style for the an elements with scrollable overflow.
+Customizes the scrollbar style for elements with scrollable overflow.
 
 - Use `::-webkit-scrollbar` to style the scrollbar element.
 - Use `::-webkit-scrollbar-track` to style the scrollbar track (the background of the scrollbar).