0.5.4 fixes synchronized

scss/_buttons.scss

@@ -57,34 +57,55 @@
   //--
   // color variations
   &.btn-raised,
-  &.btn-fab {
+  &.btn-fab,
+  .btn-group-raised & {
     @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
   }
 
   //---
   // btn-raised
-  &.btn-raised {
+  &.btn-raised,
+  .btn-group-raised & {
     &:not(.btn-link) {
       @include shadow-2dp();
 
-      &:hover {
+      // colors on hover, focus, active
+      &:hover,
+      &:focus,
+      &.active,
+      &:active {
+
+        // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
+        // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
+        @include alert-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
 
         // Spec:
         //  - Raised Light/Light theme no hover.
         //  - Raised Dark/Dark theme Hover color: 600
         .theme-dark & {
-          //// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
-          //@include alert-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
         }
       }
 
+      // shadow on active
       &.active,
       &:active {
-        @include shadow-4dp();
+        &,
+        &:hover {
+          @include shadow-4dp();
+        }
       }
 
-      &:focus:not(:active) {
-        @include focus-shadow();
+      // shadow on focus
+      //   Focus should take precedence over active, so specificity is needed
+      &:focus {
+        &,
+        &.active,
+        &:active {
+          &,
+          &:hover {
+            @include focus-shadow();
+          }
+        }
       }
     }
   }

scss/_switch.scss

@@ -13,6 +13,10 @@
       height: 0;
       opacity: 0;
     }
+    .switch-decorator {
+      text-align: left; // Issue #737 horizontal form
+    }
+
     // Switch bg off and disabled
     .switch-decorator,
     input[type=checkbox][disabled] + .switch-decorator {
@@ -60,7 +64,8 @@
       }
     }
 
-    label input[type=checkbox]:checked {
+    // set bg when checked
+    input[type=checkbox]:checked {
       + .switch-decorator {
         background-color: rgba($brand-primary, (50 / 100)); // Switch bg on
       }

scss/_variables.scss

@@ -101,7 +101,7 @@ $mdb-btn-font-size-lg: 16px !default;
 $mdb-btn-font-size-sm: 12px !default;
 $mdb-btn-font-size-xs: 10px !default;
 
-$mdb-btn-background-color: transparent !default;
+$mdb-btn-background-color: $body-bg !default; // transparent
 $mdb-btn-background-color-text: $mdb-text-color-primary !default;
 
 $mdl-btn-border-radus: 2px !default;

scss/mixins/_variations.scss

@@ -23,6 +23,19 @@
   }
 }
 
+@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
+  @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1);
+}
+
+@mixin button-variations-content($args) {
+  //@debug "#{inspect($args)}";
+  $variation-color: map-get($args, variation-color);
+  $mdb-param-1: map-get($args, material-param-1);
+  background-color: contrast-color($variation-color,
+    darken($variation-color, $mdb-param-1),
+    lighten($variation-color, $mdb-param-1));
+}
+
 // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
 //@mixin navbar-variations($component, $selector-suffix, $color-default) {
 //  @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);