zurb-foundation-5/doc/includes/split_button/examples_split_button_variables.html

Foundation 5 for npm (no code modification from original repo)

{{#markdown}}
```scss
$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: rem-calc(-5);

/* 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: rem-calc(-9);

/* 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 - rem-calc(3);
$split-button-pip-top-med: $button-med * 1.5;
$split-button-pip-default-float-med: rem-calc(-9);

/* 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 - rem-calc(6);
$split-button-pip-top-lrg: $button-lrg + rem-calc(5);
$split-button-pip-default-float-lrg: rem-calc(-9);
```
{{/markdown}}