first implementation of fun stats site

1 files changed, 83 insertions, 0 deletions

diff --git a/templates/assets/bootstrap-material-design/scss/_switches.scss b/templates/assets/bootstrap-material-design/scss/_switches.scss
new file mode 100644
index 0000000..b06444d
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/_switches.scss
@@ -0,0 +1,83 @@
+// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
+.switch {
+  label {
+    position: relative;
+    padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size
+
+    .bmd-switch-track {
+      position: absolute;
+      top: calc-top($line-height-base, $font-size-base, $bmd-switch-height);
+      left: 0;
+      display: inline-block;
+      width: $bmd-switch-width;
+      height: $bmd-switch-height;
+      cursor: pointer;
+      background-image: linear-gradient(
+          to right,
+          $bmd-switch-unchecked-bg 0%,
+          $bmd-switch-unchecked-bg 50%,
+          $bmd-switch-checked-bg 50%,
+          $bmd-switch-checked-bg 100%
+      );
+      background-position: 0%;
+      background-size: $bmd-switch-width * 2 $bmd-switch-height;
+      border-radius: $bmd-switch-width;
+      transition: background-position 0.2s ease-in;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        display: block;
+        align-self: center;
+        width: $bmd-switch-handle-size;
+        height: $bmd-switch-handle-size;
+        content: "";
+        background: $bmd-switch-handle-unchecked-bg;
+        border-radius: 100%;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+        transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
+        transform: translateY(-50%);
+      }
+
+      // Jelly effect on click
+      &:active::after {
+        transform: translateY(-50%) scale3d(1.15, 0.85, 1);
+      }
+    }
+
+    input {
+      // Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      opacity: 0;
+
+      &:checked {
+        + .bmd-switch-track {
+          background-position: -100%;
+          &::after {
+            left: unquote("calc(100% - #{$bmd-switch-handle-size})"); //calc(100% - $bmd-switch-handle-size);
+            background-color: $bmd-switch-handle-checked-bg;
+          }
+        }
+      }
+
+      &:disabled {
+        // No jelly effect on disabled switchs
+        + .bmd-switch-track:active::after {
+          transform: translateY(-50%);
+        }
+
+        + .bmd-switch-track {
+          cursor: default;
+          background: $bmd-switch-disabled-bg;
+          &::after {
+            background: $bmd-switch-handle-disabled-bg;
+          }
+        }
+      }
+    }
+  }
+}