Padding of a hollow button should be corrected by the border-width

[MiguelMike]

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.

[rafibomb]

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?

[soumak77]

@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);
    ...
}

[soumak77]

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)

[soumak77]

@MiguelMike @rafibomb fixed!