From 11e80666b026d205f1a72dbf3970013b09c1248b Mon Sep 17 00:00:00 2001
From: FezVrasta <federico.zivolo@gmail.com>
Date: Wed, 3 Aug 2016 18:49:32 +0200
Subject: [PATCH] added support for btn-outline

---
 scss/_buttons.scss        |  4 ++++
 scss/mixins/_buttons.scss | 49 ++++++++++++++++++++++++++++++++++-----
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index ac994f9e..ee3defcf 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -70,6 +70,10 @@
     }
   }
 
+  //---
+  // btn-outline
+  @include bmd-outline-button-color();
+
   // https://www.google.com/design/spec/components/buttons-floating-action-button.html
   &.bmd-btn-fab,
   &.bmd-btn-icon {
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 51ac0403..9d849f19 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -58,16 +58,16 @@
   }
 }
 
-@mixin bmd-flat-button-variant($color) {
+@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;
-  $border: $bmd-btn-border;
-
   $focus-background: $bmd-btn-focus-bg;
-  $focus-border: $bmd-btn-focus-bg;
-
   $active-background: $bmd-btn-active-bg;
-  $active-border: $bmd-btn-active-bg;
 
   @include bmd-button-variant($color,
     $background,
@@ -125,6 +125,43 @@
   }
 }
 
+@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?