Menu icon Foundation
border: none; prevents me from styling my buttons with scss

I'm trying to style my own button by changing these variables in '_settings.scss':

// We use these to control button border styles.
$button-border-width: 1px;
$button-border-style: solid;

But nothing change at all. So I tried searching for the problem, and found it in line 114 and line 121 (line 6 and line 13 in the example below) of '_buttons.scss':

  // <input>'s and <button>'s take on strange padding. We added this to help fix that.
  @if $is-input == $button-lrg {
    padding-top: $is-input + rem-calc(.5);
    padding-bottom: $is-input + rem-calc(.5);
    -webkit-appearance: none;
    border: none; // <---problem
    font-weight: $button-font-weight !important;
  }
  @else if $is-input {
    padding-top: $is-input + rem-calc(1);
    padding-bottom: $is-input;
    -webkit-appearance: none;
    border: none; // <---problem
    font-weight: $button-font-weight !important;
  }

When I commented both lines, I can style the buttons normally.

What is the purpose of these lines? and why does it prevent me from styling the button?

buttonsscss

I'm trying to style my own button by changing these variables in '_settings.scss':

// We use these to control button border styles.
$button-border-width: 1px;
$button-border-style: solid;

But nothing change at all. So I tried searching for the problem, and found it in line 114 and line 121 (line 6 and line 13 in the example below) of '_buttons.scss':

  // <input>'s and <button>'s take on strange padding. We added this to help fix that.
  @if $is-input == $button-lrg {
    padding-top: $is-input + rem-calc(.5);
    padding-bottom: $is-input + rem-calc(.5);
    -webkit-appearance: none;
    border: none; // <---problem
    font-weight: $button-font-weight !important;
  }
  @else if $is-input {
    padding-top: $is-input + rem-calc(1);
    padding-bottom: $is-input;
    -webkit-appearance: none;
    border: none; // <---problem
    font-weight: $button-font-weight !important;
  }

When I commented both lines, I can style the buttons normally.

What is the purpose of these lines? and why does it prevent me from styling the button?

Gita Street Kristiansen over 5 years ago

I had the same problem. Your solution works, but I also found these worked:

  1. replacing a code snippet here:
    https://github.com/zurb/foundation/issues/4482

  2. Probably best? Replacing the entire _buttons.scss with this new one:
    https://github.com/zurb/foundation/edit/master/scss/foundation/components/_buttons.scss

Or maybe I just need to update Foundation.

K Lim almost 6 years ago

hmm... if you need to override the default styling, you are better off defining them in your own scss and if necessary use the !important tag to override the default button style.