fix(sass): made variables for button-default-border and button-default-active-border

made variables for button-default-border and button-default-active-bordermade variables

#5576

Author: danbucholtz

Diff for: scss/_button.scss

@@ -72,55 +72,55 @@
   }
 
   &.button-light {
-    @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
+    @include button-style($button-light-bg, $button-default-border, $button-light-active-bg, $button-default-active-border, $button-light-text);
     @include button-clear($button-light-border);
     @include button-outline($button-light-border);
   }
 
   &.button-stable {
-    @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
+    @include button-style($button-stable-bg, $button-default-border, $button-stable-active-bg, $button-default-active-border, $button-stable-text);
     @include button-clear($button-stable-border);
     @include button-outline($button-stable-border);
   }
 
   &.button-positive {
-    @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
+    @include button-style($button-positive-bg, $button-default-border, $button-positive-active-bg, $button-default-active-border, $button-positive-text);
     @include button-clear($button-positive-bg);
     @include button-outline($button-positive-bg);
   }
 
   &.button-calm {
-    @include button-style($button-calm-bg, $button-calm-border, $button-calm-active-bg, $button-calm-active-border, $button-calm-text);
+    @include button-style($button-calm-bg, $button-default-border, $button-calm-active-bg, $button-default-active-border, $button-calm-text);
     @include button-clear($button-calm-bg);
     @include button-outline($button-calm-bg);
   }
 
   &.button-assertive {
-    @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
+    @include button-style($button-assertive-bg, $button-default-border, $button-assertive-active-bg, $button-default-active-border, $button-assertive-text);
     @include button-clear($button-assertive-bg);
     @include button-outline($button-assertive-bg);
   }
 
   &.button-balanced {
-    @include button-style($button-balanced-bg, $button-balanced-border, $button-balanced-active-bg, $button-balanced-active-border, $button-balanced-text);
+    @include button-style($button-balanced-bg, $button-default-border, $button-balanced-active-bg, $button-default-active-border, $button-balanced-text);
     @include button-clear($button-balanced-bg);
     @include button-outline($button-balanced-bg);
   }
 
   &.button-energized {
-    @include button-style($button-energized-bg, $button-energized-border, $button-energized-active-bg, $button-energized-active-border, $button-energized-text);
+    @include button-style($button-energized-bg, $button-default-border, $button-energized-active-bg, $button-default-active-border, $button-energized-text);
     @include button-clear($button-energized-bg);
     @include button-outline($button-energized-bg);
   }
 
   &.button-royal {
-    @include button-style($button-royal-bg, $button-royal-border, $button-royal-active-bg, $button-royal-active-border, $button-royal-text);
+    @include button-style($button-royal-bg, $button-default-border, $button-royal-active-bg, $button-default-active-border, $button-royal-text);
     @include button-clear($button-royal-bg);
     @include button-outline($button-royal-bg);
   }
 
   &.button-dark {
-    @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
+    @include button-style($button-dark-bg, $button-default-border, $button-dark-active-bg, $button-default-active-border, $button-dark-text);
     @include button-clear($button-dark-bg);
     @include button-outline($button-dark-bg);
   }

Diff for: scss/_mixins.scss

@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 @mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
-  border-color: transparent;//$border-color;
+  border-color: $border-color;
   background-color: $bg-color;
   color: $color;
 
@@ -14,7 +14,9 @@
   }
   &.active,
   &.activated {
-    //border-color: transparent;//$active-border-color;
+    @if $active-border-color != ""{
+      border-color: $active-border-color;
+    }
     background-color: $active-bg-color;
     //box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
   }

Diff for: scss/_variables.scss

@@ -93,6 +93,9 @@ $button-bar-button-height:        32px !default;
 $button-bar-button-padding:       8px !default;
 $button-bar-button-icon-size:     20px !default;
 
+$button-default-border:       transparent;
+$button-default-active-border:null;
+
 $button-light-bg:                 $light !default;
 $button-light-text:               #444 !default;
 $button-light-border:             #ddd !default;