1 files changed, 218 insertions, 0 deletions
diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss b/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss
new file mode 100644
index 0000000..9d849f1
--- /dev/null
+++ b/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss
@@ -0,0 +1,218 @@
+// from bs mixins/buttons button-variant
+@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  @include hover {
+    color: $color;
+    background-color: $focus-background;
+    border-color: $focus-border;
+  }
+
+  &:focus,
+  &.focus {
+    color: $color;
+    background-color: $focus-background;
+    border-color: $focus-border;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: $focus-background;
+    border-color: $focus-border;
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $color;
+      background-color: $active-background;
+      border-color: $active-border;
+    }
+  }
+
+  // when it is an icon, kill the active bg on open dropdown, but stabilize on hover
+  .open > &.dropdown-toggle.bmd-btn-icon {
+    color: inherit;
+    background-color: $background;
+
+    // leave hover on with the lighter focus color
+    &:hover {
+      background-color: $focus-background;
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    &:focus,
+    &.focus {
+      background-color: $background;
+      border-color: $border;
+    }
+    @include hover {
+      background-color: $background;
+      border-color: $border;
+    }
+  }
+}
+
+@mixin bmd-flat-button-variant(
+  $color,
+  $border: $bmd-btn-border,
+  $focus-border: $bmd-btn-focus-bg,
+  $active-border: $bmd-btn-active-bg
+) {
+
+  $background: $bmd-btn-bg;
+  $focus-background: $bmd-btn-focus-bg;
+  $active-background: $bmd-btn-active-bg;
+
+  @include bmd-button-variant($color,
+    $background,
+    $focus-background,
+    $active-background,
+    $border,
+    $focus-border,
+    $active-border);
+
+  // inverse color scheme
+  .bg-inverse & {
+    $focus-background: $bmd-inverse-btn-focus-bg;
+    $focus-border: $bmd-inverse-btn-focus-bg;
+
+    $active-background: $bmd-inverse-btn-active-bg;
+    $active-border: $bmd-inverse-btn-active-bg;
+
+    @include bmd-button-variant($color,
+      $background,
+      $focus-background,
+      $active-background,
+      $border,
+      $focus-border,
+      $active-border);
+  }
+
+  // reverse the above for links
+  &.btn-link {
+    background-color: transparent;
+  }
+}
+
+@mixin bmd-flat-button-color() {
+
+  @include bmd-flat-button-variant($bmd-btn-color);
+
+  // flat bg with text color variations
+  &.btn-primary {
+    @include bmd-flat-button-variant($btn-primary-bg);
+  }
+  &.btn-secondary {
+    @include bmd-flat-button-variant($btn-secondary-color);
+  }
+  &.btn-info {
+    @include bmd-flat-button-variant($btn-info-bg);
+  }
+  &.btn-success {
+    @include bmd-flat-button-variant($btn-success-bg);
+  }
+  &.btn-warning {
+    @include bmd-flat-button-variant($btn-warning-bg);
+  }
+  &.btn-danger {
+    @include bmd-flat-button-variant($btn-danger-bg);
+  }
+}
+
+@mixin bmd-outline-button-color() {
+  &.btn-outline,
+  &.btn-outline-primary,
+  &.btn-outline-secondary,
+  &.btn-outline-info,
+  &.btn-outline-success,
+  &.btn-outline-warning,
+  &.btn-outline-danger {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  // flat bg with text and border color variations
+  &.btn-outline {
+    @include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color);
+  }
+  &.btn-outline-primary {
+    @include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg);
+  }
+  &.btn-outline-secondary {
+    @include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color);
+  }
+  &.btn-outline-info {
+    @include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg);
+  }
+  &.btn-outline-success {
+    @include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg);
+  }
+  &.btn-outline-warning {
+    @include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg);
+  }
+  &.btn-outline-danger {
+    @include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg);
+  }
+}
+
+@mixin bmd-raised-button-variant($color, $background, $border) {
+
+  // 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?
+  $focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%));
+  //$focus-background: darken($background, 10%);  // default bootstrap
+  $focus-border: darken($border, 12%);
+
+  $active-background: $focus-background;
+  //$active-background: darken($background, 17%);
+  $active-border: darken($border, 25%);
+
+  @include bmd-button-variant($color,
+    $background,
+    $focus-background,
+    $active-background,
+    $border,
+    $focus-border,
+    $active-border);
+}
+
+@mixin bmd-raised-button-color() {
+
+  &.btn-primary {
+    @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+  }
+  &.btn-secondary {
+    @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+  }
+  &.btn-info {
+    @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+  }
+  &.btn-success {
+    @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+  }
+  &.btn-warning {
+    @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+  }
+  &.btn-danger {
+    @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+  }
+}
+
+@mixin undo-bs-tab-focus() {
+  // clear out the tab-focus() from BS
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      //@include tab-focus();
+      outline: 0;
+    }
+  }
+}