foundation/stylus/foundation/components/split-buttons.styl

You may also want to checkout:

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

// We use these to control different shared styles for Split Buttons
$split-button-function-factor ?= 15%;
$split-button-pip-color ?= #fff;
$split-button-pip-color-alt ?= #333;
$split-button-active-bg-tint ?= rgba(0,0,0,0.1);

// We use these to control tiny split buttons
$split-button-padding-tny ?= $button-tny * 9;
$split-button-span-width-tny ?= $button-tny * 6.5;
$split-button-pip-size-tny ?= $button-tny;
$split-button-pip-top-tny ?= $button-tny * 2;
$split-button-pip-default-float-tny ?= emCalc(-5px);

// We use these to control small split buttons
$split-button-padding-sml ?= $button-sml * 7;
$split-button-span-width-sml ?= $button-sml * 5;
$split-button-pip-size-sml ?= $button-sml;
$split-button-pip-top-sml ?= $button-sml * 1.5;
$split-button-pip-default-float-sml ?= emCalc(-9px);

// We use these to control medium split buttons
$split-button-padding-med ?= $button-med * 6.4;
$split-button-span-width-med ?= $button-med * 4;
$split-button-pip-size-med ?= $button-med - emCalc(3px);
$split-button-pip-top-med ?= $button-med * 1.5;
$split-button-pip-default-float-med ?= emCalc(-9px);

// We use these to control large split buttons
$split-button-padding-lrg ?= $button-lrg * 6;
$split-button-span-width-lrg ?= $button-lrg * 3.75;
$split-button-pip-size-lrg ?= $button-lrg - emCalc(6px);
$split-button-pip-top-lrg ?= $button-lrg + emCalc(5px);
$split-button-pip-default-float-lrg ?= emCalc(-9px);


//
// Split Button Mixin
//

// We use this mixin to create split buttons that build upon the button mixins
split-button($padding=medium, $pip-color=$split-button-pip-color, $span-border=$primary-color, $base-style=true) {

  // With this, we can control whether or not the base styles come through.
  if $base-style {
    position: relative;

    // Styling for the split arrow clickable area
    span {
      display: block;
      height: 100%;
      position: absolute;
      {$opposite-direction}: 0;
      top: 0;
      border-{$default-float}: solid 1px;

      // Building the triangle pip indicator
      &:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        display: block;
        border-style: inset;

        {$default-float}: 50%;
      }

      &:active { background-color: $split-button-active-bg-tint; }
    }
  }

  // Control the border color for the span area of the split button
  if $span-border {
    span {
      border-{$default-float}-color: darken($span-border, $split-button-function-factor);
    }
  }

  // Style of the button and clickable area for tiny sizes
  if $padding == tiny {
    padding-{$opposite-direction}: $split-button-padding-tny;

    span { width: $split-button-span-width-tny;
      &:before {
        border-top-style: solid;
        border-width: $split-button-pip-size-tny;
        top: $split-button-pip-top-tny;
        margin-{$default-float}: $split-button-pip-default-float-tny;
      }
    }
  } else if $padding == small {

  // Style of the button and clickable area for small sizes
    padding-{$opposite-direction}: $split-button-padding-sml;

    span {
      width: $split-button-span-width-sml;
      &:before {
        border-top-style: solid;
        border-width: $split-button-pip-size-sml;
        top: $split-button-pip-top-sml;
        margin-{$default-float}: $split-button-pip-default-float-sml;
      }
    }
  } else if $padding == medium {

  // Style of the button and clickable area for default (medium) sizes
    padding-{$opposite-direction}: $split-button-padding-med;

    span {
      width: $split-button-span-width-med;
      &:before {
        border-top-style: solid;
        border-width: $split-button-pip-size-med;
        top: $split-button-pip-top-med;
        margin-{$default-float}: $split-button-pip-default-float-med;
      }
    }
  } else if $padding == large {

  // Style of the button and clickable area for large sizes
    padding-{$opposite-direction}: $split-button-padding-lrg;

    span {
      width: $split-button-span-width-lrg;
      &:before {
        border-top-style: solid;
        border-width: $split-button-pip-size-lrg;
        top: $split-button-pip-top-lrg;
        margin-{$default-float}: $split-button-pip-default-float-lrg;
      }
    }
  }

  // Control the color of the triangle pip
  if $pip-color {
    span:before { border-color: $pip-color transparent transparent transparent; }
  }
}


if $include-html-button-classes != false {

  /* Split Buttons */
  .split.button {
    split-button();

    &.secondary {
      split-button(false, $split-button-pip-color, $secondary-color, false);
    }
    &.alert {
      split-button(false, false, $alert-color, false);
    }
    &.success {
      split-button(false, false, $success-color, false);
    }
    &.tiny {
    	split-button(tiny, false, false, false); 
    }
    &.small {
    	split-button(small, false, false, false); 
    }
    &.large {
    	split-button(large, false, false, false); 
    }
    &.expand {
      padding-left: 2em;
    }

    &.secondary {
    	split-button(false, $split-button-pip-color-alt, false, false); 
    }

    &.radius span {
    	side-radius($opposite-direction, $global-radius); 
    }
    &.round span {
    	side-radius($opposite-direction, 1000px); 
    }
  }

}