Rework Button Group to not use borders

[andycochran]

This PR implements margin for the space between buttons, instead of faking it with borders. It also nixes the use of table display & floats, instead using inline-block.

Let me know if you have feedback.

Woot!
-Andy

Related issues: #7665, #7844

[andycochran]

Also makes button group spacing look good on backgrounds not matching $body-background.

[andycochran]

Remedies these border-radius isses:

[gakimball]

Does font-size: 0 get around the extra whitespace created by display: inline-block?

[andycochran]

Exactly. The buttons have a space character's width between them. If the font size is zero, that space disappears.

[gakimball]

One piece of feedback, the sizing classes shouldn't print inside the button-group() mixin—they should stay in the CSS output. Otherwise you're tightly coupled to those sizing class names (and class chaining) when using the mixin.

[andycochran]

D'oh! I'll work on that. Thanks, @gakimball.

[andycochran]

@gakimball Take a look. You'll notice I redid the button group sizes like this:

@each $size, $value in $button-sizes {
  &.#{$size} #{$buttongroup-child-selector} { font-size: $value; }
}

This allows user-defined button sizes.

A similar method could be used for all button sizing. For instance, lines 197–199 in _button.scss could be… 

@each $size, $value in $button-sizes {
  &.#{$size} { font-size: $value; }
}

instead of… 

&.tiny     { font-size: map-get($button-sizes, tiny); }
&.small    { font-size: map-get($button-sizes, small); }
&.large    { font-size: map-get($button-sizes, large); }

Caveat: It adds a .default button size class.
Thoughts?

[gakimball]

Definitely interested in that. You can remove default from the map on the fly using map-remove().

@each $size, $value in map-remove($button-sizes, default) {
}

[andycochran]

@gakimball Done. This'll close #7665, #7844, and #7972.

[gakimball]

@andycochran Solid, thanks so much for putting it together!

[slavanga]

The font-size: 0 trick doesn't work in the android browser pre Jellybean.
http://codepen.io/stowball/pen/LsICH

[andycochran]

@slavanga We decided in #7665 (comment) that this was acceptable fallout in oder to fix a few other bugs in all browsers.

[slavanga]

@andycochran Alright, that sounds reasonable.