Open MiguelMike opened 8 years ago
We've seen this - though it's a tough one unless you add a border to the regular button. Because border-box puts the border on the outside this happens.
Can you think of a better way to do it?
@rafibomb I was thinking you could adjust the padding to account for the 1 px border, however, this is a bit complicated by how foundation uses the button padding
$button-padding: 0.85em 1em !default;
%button {
padding: $button-padding;
...
}
The $button-padding
variable allows css shorthand format to be used, thus the value must be parsed to figure out exactly what padding the user has configured for each side. I found an example of how css shorthand can be parsed in SASS: https://gist.github.com/pixelwhip/8428447
Once the individual padding values are known for each side, the calc()
method can be used to adjust the padding by 1px.
@mixin button-style(...) {
@if $style == hollow {
border: 1px solid $background;
padding-top: calc(#{$button-padding-top} - 1px);
padding-right: calc(#{$button-padding-right} - 1px);
padding-bottom: calc(#{$button-padding-bottom} - 1px);
padding-left: calc(#{$button-padding-left} - 1px);
...
}
Perhaps I should have just scrolled a bit lower in the file before writing my comment. Seems there already exists a method for getting the value for a specific side get-side($padding, right)
@MiguelMike @rafibomb fixed!
Two buttons next to each other won't have the same height if one of them is hollow.
Hollow button receives a 1px border, but because the padding is not corrected by the border's width the button is two pixels higher than solid button.