Squashed commit of the following:

commit 79c8360 Author: Francesco Improta <francesco@designabile.com> Date: Fri Aug 19 16:17:20 2022 +0200 Added min css commit f65deaf Author: Francesco Improta <francesco@designabile.com> Date: Fri Aug 19 16:17:15 2022 +0200 Added doc page commit 574c818 Author: Francesco Improta <francesco@designabile.com> Date: Fri Aug 19 16:06:49 2022 +0200 Changed input display commit c66259b Author: Francesco Improta <francesco@designabile.com> Date: Fri Aug 19 16:04:20 2022 +0200 Changed html commit 6742fc9 Author: Francesco Improta <francesco@designabile.com> Date: Thu Aug 18 16:44:27 2022 +0200 Added toggle variables commit 480bddd Author: Francesco Improta <francesco@designabile.com> Date: Wed Aug 17 17:39:36 2022 +0200 Removed margin commit cadb106 Author: Francesco Improta <francesco@designabile.com> Date: Wed Aug 17 17:38:59 2022 +0200 Added toggle
zetareticoli · Aug 22, 2022 · 9494414 · 9494414
1 parent 49dfe82
commit 9494414
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 0 deletions.
diff --git a/content/docs/components/toggle.md b/content/docs/components/toggle.md
@@ -0,0 +1,57 @@
+---
+title: "Toggle"
+description: "A toggle button allows the user to change a setting between two states."
+lead: "A toggle button allows the user to change a setting between two states."
+date: 2022-08-18T13:26:54+01:00
+lastmod: 2022-08-18T13:26:54+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "components"
+weight: 610
+toc: true
+---
+
+Commonly used in websites, mobile apps, and other software, it provides the users a way to choose between two different states.
+
+<div class="preview">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.toggle.min.css">
+
+  <input type="checkbox" id="toggle" name="toggle" data-toggle-input checked/>
+  <label for="toggle" data-toggle></label>
+</div>
+
+## Usage
+
+Add the `data-toggle-input` and `data-toggle` attributes to a standard `<input type="checkbox">` and `<label>` HTML tags respectively. Done.
+
+### Code example
+
+```html
+  <input type="checkbox" name="toggle" data-toggle-input checked/>
+  <label for="toggle" data-toggle></label>
+```
+
+## Customization
+The toggle comes with the following customization options:
+- background color
+- size
+- radius
+- animation
+
+## Variables
+
+List of variables used. Customize the component's design by changing or overriding these values:
+
+```css
+   --toggle-width: 60px;
+   --toggle-height: calc(var(--toggle-width)/2);
+   --toggle-radius: 18px;
+   --toggle-background: var(--cssui-gray-light);
+   --toggle-padding: 10px;
+   --toggle-animation: ease-in-out;
+   --toggle-animation-time: .2s;
+   --toggle-switch-color: #fff;
+```
diff --git a/lib/src/toggle/toggle.html b/lib/src/toggle/toggle.html
@@ -0,0 +1,8 @@
+<body>
+<link rel="stylesheet" href="../cssui.css">
+<link rel="stylesheet" href="toggle.css">
+
+  <input type="checkbox" id="toggle" name="toggle" data-toggle-input checked/>
+  <label for="toggle" data-toggle></label>
+
+</body>
diff --git a/lib/src/toggle/toggle.scss b/lib/src/toggle/toggle.scss
@@ -0,0 +1,56 @@
+[data-toggle] {
+   --toggle-width: 60px;
+   --toggle-height: calc(var(--toggle-width)/2);
+   --toggle-radius: 18px;
+   --toggle-background: var(--cssui-gray-light);
+   --toggle-padding: 10px;
+   --toggle-animation: ease-in-out;
+   --toggle-animation-time: .2s;
+   --toggle-switch-color: #fff;
+}
+
+[data-toggle] {
+   position: relative;
+   display: block;
+   width: var(--toggle-width);
+   height: var(--toggle-height);
+   padding: var(--toggle-padding);
+   border-radius: var(--toggle-radius);
+   background: var(--toggle-background);
+   cursor: pointer;
+}
+
+[data-toggle-input],
+[data-toggle-input]:active {
+   display: none;
+}
+
+[data-toggle]:before {
+   position: absolute;
+   top: 0;
+   right: auto;
+   left: 0;
+   z-index: 1;
+   content: '';
+   display: block;
+   width: var(--toggle-height);
+   height: var(--toggle-height);
+   border-radius: 100%;
+   background: var(--toggle-switch-color);
+   line-height: 34px;
+   text-indent: var(--toggle-height);
+   transition: left var(--toggle-animation-time) var(--toggle-animation);
+}
+
+[data-toggle-input] + [data-toggle] {
+   box-shadow: inset 0 0 0 0 var(--cssui-primary), 0 0 0 2px var(--toggle-background);
+}
+
+[data-toggle-input]:checked + [data-toggle]:before {
+   left: calc(100% - var(--toggle-height));
+   box-shadow: 0 0 0 2px transparent, 0 3px 3px rgba(0, 0, 0, .3);
+}
+
+[data-toggle-input]:checked+[data-toggle] {
+   box-shadow: inset 0 0 0 18px var(--cssui-primary), 0 0 0 2px var(--cssui-primary);
+}
diff --git a/static/cssui/cssui.toggle.min.css b/static/cssui/cssui.toggle.min.css