Menu icon Foundation
Button padding

i am trying to adjust the button text and padding sizes, but in proportion. i am no expert with mixins, though most of it "makes sense" except the darn rem-calc() in certain circumstances. i wish there was a good walk through of the "syntax".
i understand the button font sizes and have adjusted them

$button-font-tny: rem-calc(10) !default;
$button-font-sml: rem-calc(12) !default;
$button-font-med: rem-calc(14) !default;
$button-font-lrg: rem-calc(16) !default;
            

         

but the padding is throwing me off. when i see the top and bottom padding set to 1Rem, and i change it, but it does not seem to change the buttons, i am trying to get a padding around 5px top and bottom with 10px for the smaller buttons, and 8px top and bottom with 15px for the larger buttons.

i have changed the padding rem-calc number many times and it never seems to effect the top and bottom padding.

i would appreciate any info to help understand this "system"

@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {

  // We control which padding styles come through,
  // these can be turned off by setting $padding:false
  @if $padding {
    padding-top: $padding + rem-calc(.5);
    padding-#{$opposite-direction}: $padding * 1.2;
    padding-bottom: $padding + rem-calc(.5);
    padding-#{$default-float}: $padding * 1.2;

            

         

buttonsrem-calcpadding

i am trying to adjust the button text and padding sizes, but in proportion. i am no expert with mixins, though most of it "makes sense" except the darn rem-calc() in certain circumstances. i wish there was a good walk through of the "syntax".
i understand the button font sizes and have adjusted them

$button-font-tny: rem-calc(10) !default;
$button-font-sml: rem-calc(12) !default;
$button-font-med: rem-calc(14) !default;
$button-font-lrg: rem-calc(16) !default;
            

         

but the padding is throwing me off. when i see the top and bottom padding set to 1Rem, and i change it, but it does not seem to change the buttons, i am trying to get a padding around 5px top and bottom with 10px for the smaller buttons, and 8px top and bottom with 15px for the larger buttons.

i have changed the padding rem-calc number many times and it never seems to effect the top and bottom padding.

i would appreciate any info to help understand this "system"

@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {

  // We control which padding styles come through,
  // these can be turned off by setting $padding:false
  @if $padding {
    padding-top: $padding + rem-calc(.5);
    padding-#{$opposite-direction}: $padding * 1.2;
    padding-bottom: $padding + rem-calc(.5);
    padding-#{$default-float}: $padding * 1.2;

            

         
Mark Calkins about 5 years ago

One option is to add an id to your buttons.

Default padding (on larger screen) is

padding: 1rem 2rem 1.0625rem;

You could create a new id for your buttons:

resize {

padding: .8rem 1.5rem .8625rem;

}

You could also make it responsive by changing the values at different @media ranges.

Brett Peary about 5 years ago

I am having the same problem.

Mark, in your example that makes only one set of padding which will affect all the sizes of the buttons.

I think what we want to understand is how to use the mixin to make sure the padding is relative on all buttons.

Krill about 5 years ago

Hi.

I also have the same problem. Want to have different paddings fo top/bottom and left/right.

I've did it with paddings for button id, but I think it is not the right way to do.

Arjan Oosthoek almost 5 years ago

I'm having an issue with this as well.
In _settings.scss I've enabled and set the following:

$button-sml: rem-calc(10);
$button-font-sml: rem-calc(20);

This makes me assume the padding-top to be 0.625rem and the font-size to be 1.25rem, but after compiling, the font-size is still 0.625rem.

Is that because of this line in _buttons.scss?

else if $padding == $button-sml { font-size: $button-font-sml; }

$padding defaults to rem-calc(12) and since I have set $button-sml to rem-calc(10) the if returns false and the font-size isn't set to $button-font-sml?