Search code examples
sasszurb-foundationmixins

Setting padding on Zurb Foundation's Button mixin

I'm trying to use Foundation's Button Mixin. The format example from the docs is this:

// Using the available options
.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

So I'm using it like so:

@include button(rem-calc(10 5), $colour-main-orange, em-calc(5 0), false, false, false);

But passing rem-calc(10 5) as the padding is failing. Compass fails to compile the SCSS with error: Undefined operation: "0.625rem 0.3125rem times 2"

If I pass just rem-calc(10) it works. In most other areas around Foundation, multiple values can be passed in this way. For example see the way I'm passing radius values of top-left and bottom-right = 5 and top-right and bottom-left = 0.

Can anyone think of a way around this? It might be a mixin bug, but before I try and work out how to fix it I want to make sure it's not just me being stupid!

Solution

  • As @Parhum says you can't use a list as a $padding argument for this mixin so I have modified one of my mixins to add lists support to button mixin. Button mixin imports button-size mixin to deal with button padding so you need to edit button-size mixin to add support to use lists as arguments for $padding.

    Here is my mixin

    How it works
    With this mixin you can set $padding as a value, a list with a single value or a list with 2, 3 or 4 values, this list follows the css rule for padding shorthand:

    • One single value applies to all 4 sides
    • Two values apply to 1. top and bottom and 2. to the left and right side
    • Three values apply to 1. top, 2. right and left and 3. to the bottom side
    • Four values apply to 1. top, 2. right, 3. bottom and 4. to the left side

    So @include button-size($padding: value) returns:

    padding-top: value
padding-right: value * 2
padding-bottom: value + rem-calc(1)
padding-left: value * 2

    @include button-size($padding: value1 value2) returns:

    padding-top: value1
padding-right: value2 * 2
padding-bottom: value1 + rem-calc(1)
padding-left: value2 * 2

    @include button-size($padding: value1 value2 value3) returns:

    padding-top: value1
padding-right: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value2 * 2

    @include button-size($padding: value1 value2 value3) returns:

    padding-top: value1
padding-rigth: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value4 * 2

    Proportion
    I've added another argument to box-size mixin called $proportion, it's set to true by default and if you set it to a true value it removes padding operations.

    So @include button-size($padding: value1 value2 value3 value4, $proportion: ) returns:

    padding-top: value1
padding-rigth: value2
padding-bottom: value3
padding-left: value4

    instead of:

    padding-top: value1
padding-right: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value4 * 2

    How to include this mixin in foundation

    1. Open fundation/components/_buttons.scss with your favourite editor and replace @mixin button-size by this mixin

    2. Add $proportion:false into @mixin button arguments and into @include button-size arguments