1 files changed, 63 insertions, 0 deletions
diff --git a/assets/sass/components/_switch.scss b/assets/sass/components/_switch.scss
new file mode 100644
index 0000000..c8e196a
--- /dev/null
+++ b/assets/sass/components/_switch.scss
@@ -0,0 +1,63 @@
+/* The switch - the box around the slider */
+.switch {
+  position: absolute;
+  right: -2rem;
+  top: 1.75rem;
+  display: inline-block;
+  width: 30px;
+  height: 16px;
+  z-index: z('gtt');
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  -webkit-transition: .2s;
+  transition: .2s;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 13px;
+    left: 2px;
+    bottom: 2px;
+    -webkit-transition: .2s;
+    transition: .2s;
+  }
+
+  &__icon {
+    padding: 0.5rem;
+  }
+}
+
+// input:checked + .slider {
+//   @include themify($themes) {
+//     background-color: transparent;
+//   }
+// }
+
+// input:focus + .slider {
+//   @include themify($themes) {
+//     background-color: transparent;
+//   }
+// }
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+\ No newline at end of file