Use calc in button group with singel child

Without calc the singel button in a button group would overlap the grid because of set negative margin. This becomes noticeable when the spacing is set to, for example, the grid gutter.

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index bb88bb212661df584ad3685987f56e6f14412e0d..8ef10d76246f80d6294feb1fc03ebbb4013378b8 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -100,7 +100,7 @@ $buttongroup-radius-on-each: true !default;
     @else {
       // One child
       &:first-child:last-child {
-        width: 100%;
+        width: calc(100% - #{$spacing});
       }
 
       // Two or more childreen