checkpoint on switches prior to new prototype

js/src/switch.js

@@ -13,7 +13,7 @@ const Switch = (($) => {
   const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
 
   const Default = {
-    template: `<span class='switch-decorator'></span>`
+    template: `<span class='mdb-switch-track'></span>`
   }
 
   /**

scss/_checkboxes.scss

@@ -44,8 +44,9 @@ label.checkbox-inline {
       height: $mdb-checkbox-size;
       overflow: hidden;
       border: $border-radius solid $mdb-checkbox-border-color;
-    }
-    .check::before {
+
+      // checkbox outline
+      &::before {
         position: absolute;
         display: block;
         width: 0;
@@ -64,6 +65,7 @@ label.checkbox-inline {
         animation: checkbox-off $mdb-checkbox-animation-check forwards;
       }
     }
+  }
 
   input[type=checkbox] {
 

scss/_switches.scss

@@ -1,8 +1,10 @@
+// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
+
 .switch {
   &,
   label,
   input,
-  .switch-decorator {
+  .mdb-switch-track {
     user-select: none;
   }
 
@@ -16,40 +18,36 @@
       opacity: 0;
 
       // Handle disabled
-      &[disabled] {
-        + .switch-decorator::after,
-        &:checked + .switch-decorator::after {
-          background-color: $mdb-label-color;
+      &[disabled],
+      fieldset[disabled] & {
+        + .mdb-switch-track::after,
+        &:checked + .mdb-switch-track::after {
+          //background-color: $mdb-label-color;
         }
       }
 
-      //+ .switch-decorator:active::after,
-      //&[disabled] + .switch-decorator:active::after {
-      //  box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
-      //}
+      + .mdb-switch-track:active::after {
+        //box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
+        @include shadow-4dp();
+      }
 
       // Ripple off and disabled
-      &:checked + .switch-decorator::after {
+      &:checked + .mdb-switch-track::after {
         left: 15px;
       }
     }
 
-    .switch-decorator {
-      text-align: left; // Issue #737 horizontal form
-
-      // Switch bg off and disabled
-      &,
-      input[type=checkbox][disabled] + & {
+    .mdb-switch-track {
       display: inline-block;
       width: 30px;
       height: 15px;
       margin-right: 15px;
+      text-align: left; // Issue #737 horizontal form
       vertical-align: middle;
       content: "";
-        background-color: rgba(80, 80, 80, 0.7);
+      background-color: $mdb-mdb-switch-track-color;
       border-radius: 15px;
       transition: background 0.3s ease;
-      }
 
       // Thumb
       &::after {
@@ -70,7 +68,7 @@
 
     // set bg when checked
     input[type=checkbox]:checked {
-      + .switch-decorator {
+      + .mdb-switch-track {
         background-color: rgba($mdb-switch-color-checked, (50 / 100)); // Switch bg on
 
         &::after {

scss/_variables.scss

@@ -79,14 +79,16 @@ $text-disabled: #a8a8a8 !default;
 $background-disabled: #eaeaea !default;
 
 // Checkboxes
-$mdb-checkbox-size: 20px !default;
+$mdb-checkbox-size: 1.25rem !default;
 $mdb-checkbox-animation-ripple: 500ms !default;
 $mdb-checkbox-animation-check: 0.3s !default;
-$mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default;
+$mdb-checkbox-checked-color: $brand-primary !default;
 $mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
 
 // Switches
 $mdb-switch-color-checked: $brand-primary;
+$mdb-mdb-switch-track-color: $gray-light;
+//$mdb-switch-color-disabled: $gray-light;
 
 // Popovers and Popups
 $mdb-popover-background: rgba(101, 101, 101, 0.9) !default;