First commit

resources/sass/components/toggle.scss

@@ -0,0 +1,63 @@
+/**
+ * Source: w3schools https://www.w3schools.com/howto/howto_css_switch.asp
+ */
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 1em;
+}
+
+/* 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: #ccc;
+    transition: translate .4s;
+}
+
+.slider::before {
+    position: absolute;
+    content: "";
+    height: .8em;
+    width: .8em;
+    left: .1em;
+    bottom: .1em;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: $text-primary-color;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider::before {
+    transform: translateX(1em);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 1em;
+}
+
+.slider.round::before {
+    border-radius: 50%;
+}