fix margin-bottom on buttons (don't use border)

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index b945099ede5e18d8415dbee97a5b7a304eb3d4b0..12e9911beff7032a63c97dd07975dad78374a0c8 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -41,14 +41,16 @@ $buttongroup-expand-max: 6 !default;
 
   #{$child-selector} {
     margin: 0;
+    margin-#{$global-right}: $buttongroup-spacing;
+    margin-bottom: $buttongroup-spacing;
     font-size: map-get($button-sizes, default);
 
     @if $global-flexbox {
       flex: 0 0 auto;
     }
 
-    &:not(:last-child) {
-      margin-right: $buttongroup-spacing;
+    &:last-child {
+      margin-#{$global-right}: 0;
     }
   }
 }
@@ -60,7 +62,7 @@ $buttongroup-expand-max: 6 !default;
   $count: null
 ) {
   @if not $global-flexbox {
-    margin-right: -$buttongroup-spacing;
+    margin-#{$global-right}: -$buttongroup-spacing;
 
     &::before,
     &::after {
@@ -83,7 +85,7 @@ $buttongroup-expand-max: 6 !default;
             } @else {
               width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing});
             }
-            margin-right: $buttongroup-spacing;
+            margin-#{$global-right}: $buttongroup-spacing;
           }
         }
       }
@@ -103,20 +105,12 @@ $buttongroup-expand-max: 6 !default;
   #{$selector} {
     @if $global-flexbox {
       flex: 0 0 100%;
-      margin-#{$global-right}: 0; 
     }
     @else {
       width: 100%;
-      border-#{$global-right}: $buttongroup-spacing solid transparent;
     }
-    
-    &:not(:last-child) {
-      @if $global-flexbox {
-        margin-bottom: $buttongroup-spacing;
-      }
-      @else {
-        border-bottom: $buttongroup-spacing solid $body-background;
-      }
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 }
@@ -134,10 +128,7 @@ $buttongroup-expand-max: 6 !default;
     @else {
       width: auto;
     }
-
-    &:not(:last-child) {
-      margin-#{$global-right}: $buttongroup-spacing;
-    }
+    margin-bottom: 0;
   }
 }
 
@@ -195,7 +186,7 @@ $buttongroup-expand-max: 6 !default;
 
         #{$buttongroup-child-selector} {
           display: block;
-          margin-right: 0;
+          margin-#{$global-right}: 0;
         }
       }
     }