Issue 6514 - IOToggle Custom Element

css/io-toggle.scss

Index: css/io-toggle.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/css/io-toggle.scss
@@ -0,0 +1,74 @@
+io-toggle {
+  --width: 30px;
+  --height: 8px;
+  --translateY: -4px;
+  --translateX: 14px;
+  display: inline-block;
+  width: var(--width);
+  height: var(--height);
+  border-radius: 4px;
+  background-color: #9b9b9b;
+  transition: background .2s ease-out;
+  will-change: background;
+  cursor: pointer;
+}
+
+io-toggle[checked] {
+  background-color: #92d3ea;
+}
+
+io-toggle[disabled] {
+  opacity: 0.5;
+  cursor: default;
+}
+
+io-toggle button {
+  width: calc(var(--height) * 2);
+  height: calc(var(--height) * 2);
+  padding: 0;
+  border: 2px solid #e1e0e1;
+  border-radius: var(--height);
+  transition: border .2s ease-out, box-shadow .2s ease-out,
+              transform .2s ease-out, width .2s ease-out;
+  will-change: border, box-shadow, transform, width;
+  transform: translateY(var(--translateY));
+  outline: none;
+  cursor: pointer;
+}
+
+io-toggle button[aria-checked="false"]
+{
+  background-color: #f1f1f1;
+  box-shadow: 0 1px 2px 0 #e5d1d1;
+}
+
+io-toggle button[aria-checked="false"]:hover
+{
+  box-shadow: 0 2px 4px 0 #d3b0b0;
+}
+
+io-toggle button[aria-checked="true"]
+{
+  background-color: #059cd0;
+  border: 2px solid #059cd0;
+  box-shadow: 0 1px 2px 0 #a6cede;
+  transform: translateY(var(--translateY)) translateX(var(--translateX));
+}
+
+io-toggle button[aria-checked="true"]:hover
+{
+  box-shadow: 0 2px 4px 0 #a6cede;
+}
+
+io-toggle button:focus,
+io-toggle button[aria-checked="true"]:focus
+{
+  border: 2px solid #87bffe;
+}
+
+/* in case we will need to switch active/disabled direction
+body[dir="rtl"] io-toggle button[aria-checked="true"]
+{
+  transform: translateY(var(--translateY)) translateX(calc(var(--translateX) * -1));
+}
+//*/