Prepare repository for merge

2023-05-01 22:51:44 +03:00
parent 334b4dd6f8
commit e49fc829dd
100 changed files with 0 additions and 593 deletions
--- a/css/snippets/custom-checkbox.md
+++ b/css/snippets/custom-checkbox.md
@ -0,0 +1,151 @@
+---
+title: Custom checkbox
+type: snippet
+tags: [visual,animation]
+author: chalarangelo
+cover: interior-8
+dateModified: 2021-10-11T18:44:51+03:00
+---
+
+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.
+- Use `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);
+  }
+}
+```