From 36a11b2c0a11e660ec456b93c6408bde59fd8ef9 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Wed, 16 Dec 2015 14:38:44 -0600
Subject: [PATCH] checkpoint on button refactoring - need to continue at
 btn-fab

---
 docs/material-design/buttons.md        |  22 +--
 scss/_buttons.scss                     | 144 ++++++------------
 scss/_checkboxes.scss                  |   2 +-
 scss/_lists.scss                       | 200 ++++++++++++-------------
 scss/_mixins.scss                      |   2 +
 scss/_variables.scss                   |  29 ++--
 scss/mixins/_buttons.scss              | 120 +++++++++++++++
 scss/mixins/_forms.scss                |   5 +-
 scss/mixins/_hover.scss                |   9 ++
 scss/mixins/_variations.scss           |  41 +----
 scss/variables/bootstrap/_buttons.scss |  20 +--
 11 files changed, 330 insertions(+), 264 deletions(-)
 create mode 100644 scss/mixins/_buttons.scss
 create mode 100644 scss/mixins/_hover.scss

diff --git a/docs/material-design/buttons.md b/docs/material-design/buttons.md
index 3bd59293..439669e6 100644
--- a/docs/material-design/buttons.md
+++ b/docs/material-design/buttons.md
@@ -14,8 +14,8 @@ group: material-design
 {% example html %}
 <button type="button" class="btn"><code>btn</code> only</button>
 <button type="button" class="btn active"><code>.active</code></button>
-<button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
@@ -28,8 +28,8 @@ group: material-design
 {% example html %}
 <fieldset disabled>
   <button type="button" class="btn"><code>btn</code> only</button>
-  <button type="button" class="btn btn-default">Default</button>
   <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-info">Info</button>
   <button type="button" class="btn btn-warning">Warning</button>
@@ -42,8 +42,8 @@ group: material-design
 
 {% example html %}
 <button type="button" class="btn btn-raised active"><code>.active</code></button>
-<button type="button" class="btn btn-raised btn-default">Default</button>
 <button type="button" class="btn btn-raised btn-primary">Primary</button>
+<button type="button" class="btn btn-raised btn-secondary">Secondary</button>
 <button type="button" class="btn btn-raised btn-success">Success</button>
 <button type="button" class="btn btn-raised btn-info">Info</button>
 <button type="button" class="btn btn-raised btn-warning">Warning</button>
@@ -54,9 +54,9 @@ group: material-design
 ### Disabled
 {% example html %}
 <fieldset disabled>
-  <button type="button" class="btn btn-raised btn-default">Default</button>
-  <button type="button" class="btn btn-raised btn-primary">Primary</button>
+  <button type="button" class="btn btn-raised btn-secondary">Secondary</button>
   <button type="button" class="btn btn-raised btn-success">Success</button>
+  <button type="button" class="btn btn-raised btn-primary">Primary</button>
   <button type="button" class="btn btn-raised btn-info">Info</button>
   <button type="button" class="btn btn-raised btn-warning">Warning</button>
   <button type="button" class="btn btn-raised btn-danger">Danger</button>
@@ -67,10 +67,10 @@ group: material-design
 ## Floating Action
 
 {% example html %}
-<button type="button" class="btn btn-default btn-fab">
+<button type="button" class="btn btn-primary btn-fab">
   <i class="material-icons">grade</i>
 </button>
-<button type="button" class="btn btn-primary btn-fab">
+<button type="button" class="btn btn-secondary btn-fab">
   <i class="material-icons">grade</i>
 </button>
 <button type="button" class="btn btn-success btn-fab">
@@ -90,10 +90,10 @@ group: material-design
 ### Disabled
 {% example html %}
 <fieldset disabled>
-  <button type="button" class="btn btn-default btn-fab">
+  <button type="button" class="btn btn-primary btn-fab">
     <i class="material-icons">grade</i>
   </button>
-  <button type="button" class="btn btn-primary btn-fab">
+  <button type="button" class="btn btn-secondary btn-fab">
     <i class="material-icons">grade</i>
   </button>
   <button type="button" class="btn btn-success btn-fab">
@@ -114,10 +114,10 @@ group: material-design
 ### Mini
 {% example html %}
 <fieldset class="btn-group-sm">
-  <button type="button" class="btn btn-default btn-fab">
+  <button type="button" class="btn btn-primary btn-fab">
     <i class="material-icons">grade</i>
   </button>
-  <button type="button" class="btn btn-primary btn-fab">
+  <button type="button" class="btn btn-secondary btn-fab">
     <i class="material-icons">grade</i>
   </button>
   <button type="button" class="btn btn-success btn-fab">
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index bebafe2a..4ab3c9f7 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -1,64 +1,33 @@
 // specification: https://www.google.com/design/spec/components/buttons.html
 
-@mixin typo-button($color-contrast: false) {
-  font-size: $mdb-btn-font-size-base;
-  font-weight: 500;
-  text-transform: uppercase;
-  //line-height: 1;
-  letter-spacing: 0;
-
-  @if ($color-contrast) {
-    opacity: 0.87;
-  }
-}
-
 // mdb default buttons are flat by default
-.btn,
-.input-group-btn .btn {
+.btn {
   position: relative;
-  padding: 8px 30px;
-  margin: 10px 1px;
+  font-size: $mdb-btn-font-size;
   text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0;
   cursor: pointer;
-  background: transparent;
+  background-color: transparent;
   border: 0;
-  border-radius: $border-radius;
   outline: none;
+  box-shadow: none;
   transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, background-color 0.2s $mdb-animation-curve-default, color 0.2s $mdb-animation-curve-default;
   will-change: box-shadow, transform;
 
-  @include typo-button();
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  //---
-  // btn-flat
-  &:not(.btn-raised) {
-    @include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary);
-    box-shadow: none;
-
-    &:not(.btn-link) {
-      &:hover,
-      &:focus {
-        // spec: flat/light bg Hover: 20% #999999
-        background-color: rgba(#999, (20 / 100));
-
-        .theme-dark & {
-          // spec: dark bg Hover: 15% #CCCCCC
-          background-color: rgba(#ccc, (15 / 100));
-        }
-      }
-    }
-  }
+  @include undo-tab-focus(); // clear out the tab-focus() from BS
 
   //--
-  // color variations
-  &.btn-raised,
+  // Colors
+
+  // flat removes bg, add color variations to text
+  @include mdb-button-color();
+
+  // fab and raised are colored, add their text and bg
   &.btn-fab,
+  &.btn-raised,
   .btn-group-raised & {
-    @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
+    @include mdb-button-colored();
   }
 
   //---
@@ -68,44 +37,24 @@
     &:not(.btn-link) {
       @include shadow-2dp();
 
-      // 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 button-variations(unquote(".btn"), "", $mdb-btn-background-color);
-
-        // Spec:
-        //  - Raised Light/Light theme no hover.
-        //  - Raised Dark/Dark theme Hover color: 600
-        .theme-dark & {
-          //
-        }
+      // contrast bg colors on hover, focus, active
+      @include mdb-hover-focus-active() {
+        @include mdb-button-colored-bg(true);
+        //border: 1px solid $red;
       }
 
-      // shadow on active
-      &.active,
-      &:active {
-        &,
-        &:hover {
-          @include shadow-4dp();
-        }
+      // enlarged shadow on hover, focus
+      @include hover-focus() {
+        //border: 1px solid $blue;
+        @include shadow-4dp();
       }
 
-      // shadow on focus
-      //   Focus should take precedence over active, so specificity is needed
-      &:focus {
-        &,
-        &.active,
-        &:active {
-          &,
-          &:hover {
-            @include focus-shadow();
-          }
-        }
+      // :active - momentary press: big shadow, release and it is gone
+      // .active - persistent big shadow
+      &.active,
+      &:active {
+        @include focus-shadow();
+        //border: 1px solid $green;
       }
     }
   }
@@ -177,26 +126,28 @@
   &.disabled,
   &:disabled,
   &[disabled][disabled] {
-    // spec: light theme: Disabled text: 26% $black
-    color: rgba($black, (26 / 100));
+    color: $mdb-btn-disabled;
     .theme-dark & {
-      // spec: dark theme: Disabled text: 30% $white
-      color: rgba($white, (30 / 100));
+      color: $mdb-btn-disabled-dark;
     }
 
-    // flat buttons lose transparency
-    background: transparent;
+    // flat buttons shouldn't lose transparency on disabled hover/focus
+    &,
+    &:hover,
+    &:focus {
+      background: transparent;
+    }
 
     // no box-shadow on raised - need specificity
-    &.btn-raised,
-    &.btn-group-raised {
-      &,
-      &.active,
-      &:active,
-      &:focus:not(:active) {
-        box-shadow: none;
-      }
-    }
+    //&.btn-raised,
+    //&.btn-group-raised {
+    //  &,
+    //  &.active,
+    //  &:active,
+    //  &:focus:not(:active) {
+    //    box-shadow: none;
+    //  }
+    //}
   }
 }
 
@@ -205,7 +156,6 @@
 .btn-group-vertical {
 
   position: relative;
-  //border-radius: 2px;
   margin: 10px 1px;
 
   // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
@@ -215,7 +165,7 @@
     }
 
     > .dropdown-toggle.btn {
-      @include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
+      @include mdb-button-colored-bg();
     }
   }
 
diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss
index d0e6b605..208e168c 100644
--- a/scss/_checkboxes.scss
+++ b/scss/_checkboxes.scss
@@ -115,7 +115,7 @@ label.checkbox-inline {
     fieldset[disabled] & {
       + .checkbox-decorator .check::after,
       .check::after {
-        background-color: $mdb-text-color-primary;
+        background-color: $gray-dark;
         transform: rotate(-45deg);
       }
       + .checkbox-decorator .check,
diff --git a/scss/_lists.scss b/scss/_lists.scss
index 5bebce0e..756d5853 100644
--- a/scss/_lists.scss
+++ b/scss/_lists.scss
@@ -1,100 +1,100 @@
-.list-group {
-  border-radius: 0;
-  .list-group-item {
-    padding: 0 16px;
-    overflow: hidden;
-    background-color: transparent;
-    border: 0;
-    border-radius: 0;
-    &.baseline {
-      border-bottom: 1px solid #cecece;
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-    .row-picture, .row-action-primary {
-      //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
-      display: inline-block;
-      padding-right: 16px;
-      img, i, label {
-        display: block;
-        width: 56px;
-        height: 56px;
-      }
-      img {
-        padding: 1px;
-        background: rgba($black, 0.1);
-        &.mdb-radio-outer-circle {
-          border-radius: 100%;
-        }
-      }
-      i {
-        font-size: 20px;
-        line-height: 56px;
-        color: $white;
-        text-align: center;
-        background: rgba($black, 0.25);
-        border-radius: 100%;
-      }
-      label {
-        margin: 5px -7px -5px 7px;
-        .checkbox-decorator {
-          left: -10px;
-        }
-      }
-    }
-    .row-content {
-      display: inline-block;
-      width: unquote("calc(100% - 92px)");
-      min-height: 66px;
-      .action-secondary {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        i {
-          font-size: 20px;
-          color: rgba($black, 0.25);
-          cursor: pointer;
-        }
-      }
-      .action-secondary ~ * {
-        max-width: unquote("calc(100% - 30px)");
-      }
-      .least-content {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        font-size: 14px;
-        color: rgba($black, 0.54);
-      }
-    }
-    .list-group-item-heading {
-      font-size: 20px;
-      line-height: 29px;
-      color: rgba($black, 0.77);
-    }
-  }
-
-  .list-group-item.active {
-    &:hover, &:focus {
-      background: rgba($black, .15);
-      outline: 10px solid rgba($black, .15);
-    }
-    .list-group-item-heading, .list-group-item-text {
-      color: $mdb-text-color-primary;
-    }
-  }
-
-  .list-group-separator {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    overflow: hidden;
-    clear: both;
-    &::before {
-      float: right;
-      width: unquote("calc(100% - 90px)");
-      content: "";
-      border-bottom: 1px solid rgba($black, 0.1);
-    }
-  }
-}
+//.list-group {
+//  border-radius: 0;
+//  .list-group-item {
+//    padding: 0 16px;
+//    overflow: hidden;
+//    background-color: transparent;
+//    border: 0;
+//    border-radius: 0;
+//    &.baseline {
+//      border-bottom: 1px solid #cecece;
+//      &:last-child {
+//        border-bottom: 0;
+//      }
+//    }
+//    .row-picture, .row-action-primary {
+//      //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
+//      display: inline-block;
+//      padding-right: 16px;
+//      img, i, label {
+//        display: block;
+//        width: 56px;
+//        height: 56px;
+//      }
+//      img {
+//        padding: 1px;
+//        background: rgba($black, 0.1);
+//        &.mdb-radio-outer-circle {
+//          border-radius: 100%;
+//        }
+//      }
+//      i {
+//        font-size: 20px;
+//        line-height: 56px;
+//        color: $white;
+//        text-align: center;
+//        background: rgba($black, 0.25);
+//        border-radius: 100%;
+//      }
+//      label {
+//        margin: 5px -7px -5px 7px;
+//        .checkbox-decorator {
+//          left: -10px;
+//        }
+//      }
+//    }
+//    .row-content {
+//      display: inline-block;
+//      width: unquote("calc(100% - 92px)");
+//      min-height: 66px;
+//      .action-secondary {
+//        position: absolute;
+//        top: 16px;
+//        right: 16px;
+//        i {
+//          font-size: 20px;
+//          color: rgba($black, 0.25);
+//          cursor: pointer;
+//        }
+//      }
+//      .action-secondary ~ * {
+//        max-width: unquote("calc(100% - 30px)");
+//      }
+//      .least-content {
+//        position: absolute;
+//        top: 0;
+//        right: 16px;
+//        font-size: 14px;
+//        color: rgba($black, 0.54);
+//      }
+//    }
+//    .list-group-item-heading {
+//      font-size: 20px;
+//      line-height: 29px;
+//      color: rgba($black, 0.77);
+//    }
+//  }
+//
+//  .list-group-item.active {
+//    &:hover, &:focus {
+//      background: rgba($black, .15);
+//      outline: 10px solid rgba($black, .15);
+//    }
+//    .list-group-item-heading, .list-group-item-text {
+//      color: $gray-dark;
+//    }
+//  }
+//
+//  .list-group-separator {
+//    margin-top: 10px;
+//    margin-bottom: 10px;
+//    overflow: hidden;
+//    clear: both;
+//    &::before {
+//      float: right;
+//      width: unquote("calc(100% - 90px)");
+//      content: "";
+//      border-bottom: 1px solid rgba($black, 0.1);
+//    }
+//  }
+//}
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 6f7590ac..6c5ad229 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,3 +2,5 @@
 @import "mixins/shadows";
 @import "mixins/variations";
 @import "mixins/forms";
+@import "mixins/buttons";
+@import "mixins/hover";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index dc207400..1630b358 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -8,7 +8,6 @@ $gray-dark: rgba($black, 0.87) !default;
 
 // wondering if any of these could still be refactored out, but are definitely in use.
 $mdb-text-color-light: rgba($white, 0.84) !default;
-$mdb-text-color-primary: $gray-dark !default;
 $mdb-label-color: $gray-light !default;
 $mdb-label-color-focus: $brand-primary !default;
 $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
@@ -72,7 +71,7 @@ $mdb-form-line-height-sm:  1 !default; // set as 1x font-size so that paddings a
 $mdb-label-top-margin-sm: .75rem !default; // 12px
 
 // Card
-$mdb-card-body-text: $mdb-text-color-primary !default;
+$mdb-card-body-text: $gray-dark !default;
 $mdb-card-body-background: #fff !default;
 $mdb-card-image-headline: #fff !default;
 
@@ -119,16 +118,26 @@ $mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000,
 $mdb-radio-color-disabled-dark:  rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
 
 // Buttons:
-$mdb-btn-font-size-base: 14px !default;       // FIXME
-$mdb-btn-font-size-lg: 16px !default;
-$mdb-btn-font-size-sm: 12px !default;
-$mdb-btn-font-size-xs: 10px !default;
+$mdb-btn-font-size: .875rem !default; // 14px
+$mdb-btn-font-size-lg: 1rem !default;
+$mdb-btn-font-size-sm: .75rem !default; // 12px
+$mdl-btn-border-radius: 2px !default;
 
-$mdb-btn-background-color: $body-bg !default; // transparent
-$mdb-btn-background-color-text: $mdb-text-color-primary !default;
+// btn with no other designation
+$mdb-btn-color:            $gray-dark !default;
+$mdb-btn-bg:               $body-bg !default; // #fff
+$mdb-btn-border:           #ccc !default;
+
+
+//$mdb-btn-colored-bg: $body-bg !default; // transparent
+$mdb-btn-colored-bg-text: $gray-dark !default;
+
+$mdb-btn-hover-bg: rgba(#999, .20) !default; // spec: flat/light bg Hover: 20% #999999
+$mdb-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
+
+$mdb-btn-hover-bg-dark: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
+$mdb-btn-disabled-dark: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
 
-$mdl-btn-border-radus: 2px !default;
-//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
 
 $mdb-btn-fab-size: 56px !default;
 $mdb-btn-fab-size-mini: 40px !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
new file mode 100644
index 00000000..56313c8a
--- /dev/null
+++ b/scss/mixins/_buttons.scss
@@ -0,0 +1,120 @@
+@mixin mdb-button-variant($color: null, $bg-color: null, $border-color: null) {
+  @if ($color) {
+    color: $color;
+  }
+
+  @if ($bg-color) {
+    background-color: $bg-color;
+  }
+
+  @if ($border-color) {
+    border-color: $border-color;
+  }
+}
+
+@mixin mdb-button-color() {
+
+  @include hover-focus {
+    background-color: $mdb-btn-hover-bg;
+
+    .theme-dark & {
+      background-color: $mdb-btn-hover-bg-dark;
+    }
+
+    // reverse the above for links
+    &.btn-link {
+      background-color: transparent;
+    }
+  }
+
+  // default
+  //@include mdb-button-variant($mdb-btn-color, $mdb-btn-bg, $mdb-btn-border);
+
+  // flat bg with text color variations
+  &.btn-primary {
+    @include mdb-button-variant($btn-primary-bg);
+  }
+  &.btn-secondary {
+    @include mdb-button-variant($btn-secondary-color);
+  }
+  &.btn-info {
+    @include mdb-button-variant($btn-info-bg);
+  }
+  &.btn-success {
+    @include mdb-button-variant($btn-success-bg);
+  }
+  &.btn-warning {
+    @include mdb-button-variant($btn-warning-bg);
+  }
+  &.btn-danger {
+    @include mdb-button-variant($btn-danger-bg);
+  }
+}
+
+@mixin mdb-button-colored() {
+
+  &.btn-primary {
+    @include mdb-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  }
+  &.btn-secondary {
+    @include mdb-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+  }
+  &.btn-info {
+    @include mdb-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+  }
+  &.btn-success {
+    @include mdb-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+  }
+  &.btn-warning {
+    @include mdb-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+  }
+  &.btn-danger {
+    @include mdb-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+  }
+}
+
+@mixin mdb-button-bg($color, $contrast: false) {
+  @if ($contrast) { // contrast for focus indication
+    // 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?
+    background-color: contrast-color($color, darken($color, 4%), lighten($color, 4%));
+  } @else {
+    background-color: $color;
+  }
+}
+
+@mixin mdb-button-colored-bg($contrast: false) {
+  // default
+  @include mdb-button-bg($mdb-btn-bg, $contrast);
+
+  &.btn-primary {
+    @include mdb-button-bg($btn-primary-bg, $contrast);
+  }
+  &.btn-secondary {
+    @include mdb-button-bg($btn-secondary-bg, $contrast);
+  }
+  &.btn-info {
+    @include mdb-button-bg($btn-info-bg, $contrast);
+  }
+  &.btn-success {
+    @include mdb-button-bg($btn-success-bg, $contrast);
+  }
+  &.btn-warning {
+    @include mdb-button-bg($btn-warning-bg, $contrast);
+  }
+  &.btn-danger {
+    @include mdb-button-bg($btn-danger-bg, $contrast);
+  }
+}
+
+@mixin undo-tab-focus() {
+  // clear out the tab-focus() from BS
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      //@include tab-focus();
+      outline: 0;
+    }
+  }
+}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index cea826eb..f8c31959 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -14,8 +14,9 @@
       color: $mdb-label-color;
 
       // on focus just darken the specific labels, do not turn them to the brand-primary
-      &:hover,
-      &:focus {
+      @include hover-focus-active() {
+        //&:hover,
+        //&:focus {
         color: $mdb-label-color-inner-focus;
       }
 
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
new file mode 100644
index 00000000..c04ea527
--- /dev/null
+++ b/scss/mixins/_hover.scss
@@ -0,0 +1,9 @@
+@mixin mdb-hover-focus-active {
+  // add the .active to the whole mix of hover-focus-active
+  &.active {
+    @content
+  }
+  @include hover-focus-active() {
+    @content;
+  }
+}
diff --git a/scss/mixins/_variations.scss b/scss/mixins/_variations.scss
index 1b92168e..b8127e0f 100644
--- a/scss/mixins/_variations.scss
+++ b/scss/mixins/_variations.scss
@@ -10,31 +10,6 @@
   #{map-get($args, material-param-1)}: map-get($args, variation-color);
 }
 
-@mixin background-variations($component, $selector-suffix, $color-default) {
-  @include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null);
-}
-
-@mixin background-variations-content($args) {
-  background-color: map-get($args, variation-color);
-  @if (map-get($args, variation-color) == $mdb-btn-background-color) {
-    color: $mdb-text-color-primary;
-  } @else {
-    color: map-get($args, variation-color-text);
-  }
-}
-
-@mixin button-variations($component, $selector-suffix, $color-default) {
-  @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", null);
-}
-
-@mixin button-variations-content($args) {
-  //@debug "#{inspect($args)}";
-  $variation-color: map-get($args, variation-color);
-  background-color: contrast-color($variation-color,
-    darken($variation-color, 4%),
-    lighten($variation-color, 4%));
-}
-
 // 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);
@@ -121,7 +96,7 @@
   );
 
   // bootstrap styles
-  &#{$component}-default#{$selector-suffix} {
+  &#{$component}-secondary#{$selector-suffix} {
 
     $args-extra: map-merge($args, (
             variation-color: $color-default,
@@ -129,13 +104,13 @@
     ));
     @include call-variations-content-mixin($args-extra);
   }
-  &#{$component}-inverse#{$selector-suffix} {
-    $args-inverse: map-merge($args, (
-            variation-color: $mdb-brand-inverse,
-            variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary, $mdb-text-color-light)
-    ));
-    @include call-variations-content-mixin($args-inverse);
-  }
+  //&#{$component}-inverse#{$selector-suffix} {
+  //  $args-inverse: map-merge($args, (
+  //          variation-color: $mdb-brand-inverse,
+  //          variation-color-text: contrast-color($mdb-brand-inverse, $gray-dark, $mdb-text-color-light)
+  //  ));
+  //  @include call-variations-content-mixin($args-inverse);
+  //}
   &#{$component}-primary#{$selector-suffix} {
     $args-primary: map-merge($args, (
             variation-color: $brand-primary,
diff --git a/scss/variables/bootstrap/_buttons.scss b/scss/variables/bootstrap/_buttons.scss
index 7840dd79..35a4bd9d 100644
--- a/scss/variables/bootstrap/_buttons.scss
+++ b/scss/variables/bootstrap/_buttons.scss
@@ -2,31 +2,31 @@
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-//$btn-padding-x:                  1rem !default;
-//$btn-padding-y:                  .375rem !default;
-//$btn-font-weight:                normal !default;
+$btn-padding-x:                  1.875rem !default; // 1rem
+$btn-padding-y:                  .5rem !default; // .375rem
+$btn-font-weight:                500 !default; // normal
 //
-//$btn-primary-color:              #fff !default;
+$btn-primary-color:              $mdb-text-color-light !default; // #fff
 //$btn-primary-bg:                 $brand-primary !default;
 //$btn-primary-border:             $btn-primary-bg !default;
 //
-//$btn-secondary-color:            $gray-dark !default;
-//$btn-secondary-bg:               #fff !default;
+$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-bg:               $body-bg !default; // #fff
 //$btn-secondary-border:           #ccc !default;
 //
-//$btn-info-color:                 #fff !default;
+$btn-info-color:                 $mdb-text-color-light !default; // #fff
 //$btn-info-bg:                    $brand-info !default;
 //$btn-info-border:                $btn-info-bg !default;
 //
-//$btn-success-color:              #fff !default;
+$btn-success-color:              $mdb-text-color-light !default; // #fff
 //$btn-success-bg:                 $brand-success !default;
 //$btn-success-border:             $btn-success-bg !default;
 //
-//$btn-warning-color:              #fff !default;
+$btn-warning-color:              $mdb-text-color-light !default; // #fff
 //$btn-warning-bg:                 $brand-warning !default;
 //$btn-warning-border:             $btn-warning-bg !default;
 //
-//$btn-danger-color:               #fff !default;
+$btn-danger-color:               $mdb-text-color-light !default; // #fff
 //$btn-danger-bg:                  $brand-danger !default;
 //$btn-danger-border:              $btn-danger-bg !default;
 //