foundation/stylus/foundation/components/buttons.styl

You may also want to checkout:

//
// Button Variables
//
$include-html-button-classes ?= $include-html-classes;

// We use these to build padding for buttons.
$button-med ?= emCalc(12px);
$button-tny ?= emCalc(7px);
$button-sml ?= emCalc(9px);
$button-lrg ?= emCalc(16px);

// We use this to control the display property.
$button-display ?= inline-block;
$button-margin-bottom ?= emCalc(20px);

// We use these to control button text styles.
$button-font-family ?= inherit;
$button-font-color ?= #fff;
$button-font-color-alt ?= #333;
$button-font-med ?= emCalc(16px);
$button-font-tny ?= emCalc(11px);
$button-font-sml ?= emCalc(13px);
$button-font-lrg ?= emCalc(20px);
$button-font-weight ?= bold;
$button-font-align ?= center;

// We use these to control various hover effects.
$button-function-factor ?= 10%;

// We use these to control button border styles.
$button-border-width ?= 1px;
$button-border-style ?= solid;
$button-border-color ?= darken($primary-color, $button-function-factor);

// We use this to set the default radius used throughout the core.
$button-radius ?= $global-radius;
$button-round ?= $global-rounded;

// We use this to set default opacity for disabled buttons.
$button-disabled-opacity ?= 0.6;


//
// Button Mixins
//

// We use this mixin to create a default button base.
button-base($style=true, $display=$button-display) {
  if $style {
    border-style: $button-border-style;
    border-width: $button-border-width;
    cursor: $cursor-pointer-value;
    font-family: $button-font-family;
    font-weight: $button-font-weight;
    line-height: 1;
    margin: 0 0 $button-margin-bottom;
    position: relative;
    text-decoration: none;
    text-align: $button-font-align;
  }
  if $display { display: $display; }
}

// We use this mixin to add button size styles
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;
    padding-{$opposite-direction}: $padding * 2;
    padding-bottom: $padding + emCalc(1px);
    padding-{$default-float}: $padding * 2;

    // We control the font-size based on mixin input.
    if $padding is $button-med {
      font-size: $button-font-med;
    } else if $padding is $button-tny {
      font-size: $button-font-tny;
    } else if $padding is $button-sml {
      font-size: $button-font-sml;
    } else if $padding is $button-lrg {
      font-size: $button-font-lrg;
    } else {
      font-size: $padding - emCalc(2px);
    }
  }

  // We can set $full-width:true to remove side padding extend width.
  if $full-width {
    // We still need to check if $padding is set.
    if $padding {
      padding-top: $padding;
      padding-bottom: $padding + emCalc(1px);
    } else if $padding == false {
      padding-top:0;
      padding-bottom:0;
    }
    padding-right: 0px;
    padding-left: 0px;
    width: 100%;
  }

  // <input>'s and <button>'s take on strange padding. We added this to help fix that.
  if $is-input is $button-lrg {
    padding-top: $is-input + emCalc(.5px);
    padding-bottom: $is-input + emCalc(.5px);
  } else if $is-input {
    padding-top: $is-input + emCalc(1px);
    padding-bottom: $is-input;
  }
}

// We use this mixin to add button color styles
button-style($bg=$primary-color, $radius=false, $disabled=false) {

  // We control which background styles are used,
  // these can be removed by setting $bg:false
  if $bg {
    // This find the lightness percentage of the background color.
    $bg-lightness= lightness($bg);

    background-color: $bg;
    border-color: darken($bg, $button-function-factor);
    &:hover,
    &:focus { background-color: darken($bg, $button-function-factor); }

    // We control the text color for you based on the background color.
    if $bg-lightness > 70% {
      color: $button-font-color-alt;
      &:hover,
      &:focus { color: $button-font-color-alt; }
    } else {
      color: $button-font-color;
      &:hover,
      &:focus { color: $button-font-color; }
    }
  }

  // We can set $disabled:true to create a disabled transparent button.
  if $disabled {
    cursor: $cursor-default-value;
    opacity: $button-disabled-opacity;
    if $experimental {
      -webkit-box-shadow: none;
    }
    box-shadow: none;
    &:hover,
    &:focus { background-color: $bg; }
  }

  // We can control how much button radius us used.
  if $radius is true {
    radius($button-radius);
  } else if $radius {
    radius($radius);
  }
}

// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
button($padding=$button-med, $bg=$primary-color, $radius=false, $full-width=false, $disabled=false, $is-input=false, $is-prefix=false) {
  button-base();
  button-size($padding, $full-width, $is-input);
  button-style($bg, $radius, $disabled);
}


//
// Button Classes
//

// Only include these classes if the variable is true, otherwise they'll be left out.
if $include-html-button-classes != false {

  // Default styles applied outside of media query
  button, .button {
    button-base();
    button-size();
    button-style();

    &.secondary { button-style($bg:$secondary-color); }
    &.success   { button-style($bg:$success-color); }
    &.alert     { button-style($bg:$alert-color); }

    &.large  { button-size($padding:$button-lrg); }
    &.small  { button-size($padding:$button-sml); }
    &.tiny   { button-size($padding:$button-tny); }
    &.expand { button-size($padding:null,$full-width:true); }

    &.left-align  { text-align: left; text-indent: emCalc(12px); }
    &.right-align { text-align: right; padding-right: emCalc(12px); }

    &.disabled, &[disabled] { button-style($bg:$primary-color, $disabled:true);
      &.secondary { button-style($bg:$secondary-color, $disabled:true); }
      &.success { button-style($bg:$success-color, $disabled:true); }
      &.alert { button-style($bg:$alert-color, $disabled:true); }
    }

  }

  button, .button {
    button-size($padding:false, $is-input:$button-med);
    &.tiny { button-size($padding:false, $is-input:$button-tny); }
    &.small { button-size($padding:false, $is-input:$button-sml); }
    &.large { button-size($padding:false, $is-input:$button-lrg); }
  }

  // Styles for any browser or device that support media queries
  @media only screen {

    button, .button {
      inset-shadow();
      single-transition(background-color);

      &.large  { button-size($padding:false, $full-width:false); }
      &.small  { button-size($padding:false, $full-width:false); }
      &.tiny   { button-size($padding:false, $full-width:false); }

      &.radius { button-style($bg:false, $radius:true); }
      &.round  { button-style($bg:false, $radius:$button-round); }
    }

  }

  // Additional styles for screens larger than 768px
  @media $small {
    button, .button {
      button-base($style:false, $display:inline-block);
      button-size($padding:false, $full-width:false);
    }
  }

}