Menu icon Foundation
Foundation Email SASS overriding button style?

Hi All,

I've just started with Foundation for email - the SASS version. I'm not new to building emails, just Foundation.

There are a few things I'm struggling with but the main one is that I just want to override the primary button style for one button which will have a transparent background and a 2 pixel border.

This is my button:

<button class="button small outline" href="#">Login</button>

As you can see, I've given the button a class of 'outline' and in my _template.scss I'm just putting:

table.button {
    &.outline{ @include button-style($background:transparent); }
}

However I'm getting an error saying that the mixin button-style cannot be found:

I've checked in my src folder and I don't have 'foundation-emails' which is in app.scss, not sure it that's the issue??

Any help greatly apprecited!

Kevin

 

 

 

 

Foundationemailbuttonstyle

Hi All,

I've just started with Foundation for email - the SASS version. I'm not new to building emails, just Foundation.

There are a few things I'm struggling with but the main one is that I just want to override the primary button style for one button which will have a transparent background and a 2 pixel border.

This is my button:

<button class="button small outline" href="#">Login</button>

As you can see, I've given the button a class of 'outline' and in my _template.scss I'm just putting:

table.button {
    &.outline{ @include button-style($background:transparent); }
}

However I'm getting an error saying that the mixin button-style cannot be found:

I've checked in my src folder and I don't have 'foundation-emails' which is in app.scss, not sure it that's the issue??

Any help greatly apprecited!

Kevin

 

 

 

 

Wally Glenn over 2 years ago

The default I have for background is $button-background. You have $background

Could that be it?

table.button {
    &.outline{ @include button-style($background:transparent); }
}


The other defaults and my modified button code:

$button-background: $white;
$button-color: $global-radius;
$button-font-weight: normal;
$button-margin: 0 0 $global-margin 0;
$button-Margin: 0 190px 0 190px;
$button-border: none;
$button-rounded: $global-rounded;
$border-radius: $global-radius;
$button-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 16px 8px 16px,
  large: 10px 20px 10px 20px,
);
$button-font-size: (
  tiny: 10px,
  small: 12px,
  default: 14px,
  large: 20px,
);