zurb-foundation 3.2.5 → 4.0.0.rc1

data/scss/foundation/common/_base.scss

@@ -1,4 +0,0 @@
-@import "ratios";
-@import "globals";
-@import "typography";
-@import "forms";

data/scss/foundation/common/_forms.scss

@@ -1,117 +0,0 @@
-/* Requires
-   globals.css */
-
-/* Standard Forms ---------------------- */
-
-  form { margin: 0 0 ($formSpacing * $ratio); }
-
-  .row form .row { margin: 0 (-($formSpacing / 2));
-
-    .column, .columns { padding: 0 ($formSpacing / 2); }
-
-    &.collapse { margin: 0;
-      .column, .columns { padding: 0; }
-    }
-  }
-
-  label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin;
-
-    &.right { float: none; text-align: right; }
-    &.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
-  }
-
-  .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1; }
-  a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
-  span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
-
-  .prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultFloat, 2px); overflow:hidden; }
-  .postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
-
-  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { background-color: $inputBgColor; font-family: inherit; border: $inputBorderWidth $inputBorderStyle $inputBorderColor; @include border-radius($inputBorderRadius); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: $inputFontColor; display: block; font-size: $inputFontSize; margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
-
-    &.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
-
-    &:focus { background: $inputFocusBgColor; border-color: $inputFocusBorderColor; }
-    &[disabled] { background-color: #ddd; }
-  }
-
-  textarea { height: auto; }
-
-  select { width: 100%; }
-
-  /* Fieldsets */
-  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px; margin: 18px 0;
-
-    legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
-  }
-
-  /* Errors */
-  .error input, input.error, .error textarea, textarea.error, .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
-  .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { outline-color: lighten($alertColor, 30%); }
-  .error label, label.error { color: $alertColor; }
-  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, $inputBorderRadius); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
-  /* Custom Forms ---------------------- */
-
-  form.custom {
-
-    span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
-
-      &.radio { @include border-radius(100px); }
-      &.checkbox {
-        &:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: 14px; color: #fff; }
-      }
-      &.radio.checked {
-        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
-      }
-      &.checkbox.checked {
-        &:before { content: "\00d7"; color: $custCheckColor; }
-      }
-    }
-    div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
-
-      ul { overflow-y: auto; max-height: $custSelectDropHeight; }
-      a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; border: solid 1px $custSelectBorderColor; color: $custSelectCurrentFontColor; background-color: $custSelectBgColor; white-space: nowrap; }
-      a.selector { position: absolute; width: 27px; height: 28px; display: block; #{$defaultOpposite}: 0; top: 0; border: solid 1px $custSelectBorderColor;
-        &:after { content: ""; display: block; @include cssTriangle(5px, $custSelectTriangleColor, top); position: absolute; #{$defaultFloat}: 50%; top: 50%; margin-top: -2px; margin-#{$defaultFloat}: -5px;  }
-      }
-      &:hover, &.open {
-        a.selector { &:after { @include cssTriangle(5px, $custSelectTriangleColorOpen, top); } }
-      }
-
-      &.open ul { display: block; z-index: 10; }
-
-      &.small { width: 134px !important; }
-      &.medium { width: 254px !important; }
-      &.large { width: 434px !important; }
-      &.expand { width: 100% !important; }
-
-      &.open.small ul { width: 134px !important; }
-      &.open.medium ul { width: 254px !important; }
-      &.open.large ul { width: 434px !important; }
-      &.open.expand ul { width: 100% !important; }
-    }
-
-    div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: 0; top: 27px; margin: 0; padding: 0; background: $custDropdownBgColor; background: rgba($custDropdownBgColor,0.95); border: solid 1px $custDropdownBorderColor;
-
-      li { color: $custDropdownFontColor; font-size: ms(0) - 1; cursor: pointer; padding: 3px; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
-      li.selected { background: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
-        &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; }
-      }
-      li:hover { background-color: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
-        &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; color: darken($custDropdownSelectedBgColor, 10%); }
-      }
-      li.selected:hover { background: $custDropdownSelectedBgColor; cursor: default; color: $custDropdownSelectedFontColor;
-        &:after { color: $custDropdownSelectedFontColor; }
-      }
-      &.show { display: block; }
-    }
-
-    /* Custom input, disabled */
-    .custom.disabled { background-color: $custFormDisabledBgColor; }
-  }
-
-  /* Correct FF custom dropdown height */
-  @-moz-document url-prefix() {
-    form.custom div.custom.dropdown a.selector { height: 28px; }
-  }
-  .lt-ie9 form.custom div.custom.dropdown a.selector { height: 28px; }

data/scss/foundation/common/_globals.scss

@@ -1,35 +0,0 @@
-/* Requires: normalize.css */
-
-/* Global Reset & Standards ---------------------- */
-
-  *, *:before, *:after { @include box-sizing(border-box); }
-  html { font-size: 62.5%; }
-  body { background: $white; font-family: $bodyFontFamily; font-weight: $bodyFontWeight; font-style: $bodyFontStyle; font-size: ms(0); line-height: 1; color: $bodyFontColor; position: relative; -webkit-font-smoothing: $fontSmoothing; }
-
-/* Links ---------------------- */
-
-  a img { border:none; }
-  a { color: $mainColor; text-decoration: none; line-height: inherit; }
-  a:hover { color: darken($mainColor, 5%); }
-  a:focus { color: darken($mainColor, 5%); }
-  p a, p a:visited { line-height: inherit; }
-
-/* Misc ---------------------- */
-
-  .left        { float: left; }
-  .right       { float: right; }
-  .text-left   { text-align: left; }
-  .text-right  { text-align: right; }
-  .text-center { text-align: center; }
-  .hide        { display: none; }
-  .hide-override { display: none !important; }
-  .highlight   { background: $highlightColor; }
-
-  #googlemap img, object, embed { max-width: none; }
-
-  #map_canvas embed { max-width: none; }
-  #map_canvas img { max-width: none; }
-  #map_canvas object { max-width: none; }
-
-  /* Reset for strange margins by default on <figure> elements */
-  figure { margin: 0; }

data/scss/foundation/common/_ratios.scss

@@ -1,19 +0,0 @@
-// Ratios
-$golden: golden();
-$gold: $golden;
-$double-octave: double_octave();
-$major-twelfth: major_twelfth();
-$major-eleventh: major_eleventh();
-$major-tenth: major_tenth();
-$octave: octave();
-$major-seventh: major_seventh();
-$minor-seventh: minor_seventh();
-$major-sixth: major_sixth();
-$minor-sixth: minor_sixth();
-$fifth: fifth();
-$augfourth: augmented_forth();
-$fourth: fourth();
-$major-third: major_third();
-$minor-third: minor_third();
-$major-second: major_second();
-$minor-second: minor_second();

data/scss/foundation/common/_typography.scss

@@ -1,104 +0,0 @@
-  /* Base Type Styles Using Modular Scale ---------------------- */
-
-  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td {
-    margin:0;
-    padding:0;
-    font-size: ms(0);
-    direction: $textDirection;
-  }
-
-  p { font-family: inherit; font-weight: $bodyFontWeight; font-size: ms(0); line-height: 1.6; margin-bottom: ms(1);
-    &.lead { font-size: ms(0) * 1.25; line-height: 1.6; margin-bottom: ms(1); }
-  }
-  aside p { font-size: ms(0) - 1; line-height: 1.35; font-style: italic; }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-family: $headerFontFamily;
-    font-weight: $headerFontWeight;
-    font-style: $headerFontStyle;
-    color: $headerFontColor;
-    text-rendering: optimizeLegibility;
-    line-height: 1.1;
-    margin-bottom: ms(0);
-    margin-top: ms(0);
-    small { font-size: 60%; color: lighten($headerFontColor, 30%); line-height: 0; }
-  }
-
-  h1 { font-size: ms(5); }
-  h2 { font-size: ms(4); }
-  h3 { font-size: ms(3); }
-  h4 { font-size: ms(2); }
-  h5 { font-size: ms(1); }
-  h6 { font-size: ms(0); }
-
-  hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 22px 0 21px; height: 0; }
-
-  .subheader { line-height: 1.3; color: lighten($headerFontColor, 30%); font-weight: 300; margin-bottom: ms(1); }
-
-  em, i { font-style: italic; line-height: inherit; }
-  strong, b { font-weight: bold; line-height: inherit; }
-  small { font-size: 60%; line-height: inherit; }
-  code { font-weight: bold; background: $highlightColor; }
-
-  /* Lists ---------------------- */
-  ul, ol, dl { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: outside; }
-  ul {
-    li {
-      ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
-    }
-    &.square, &.circle, &.disc { margin-#{$defaultFloat}: ms(1); }
-    &.square { list-style-type: square;
-      li ul { list-style: inherit; }
-    }
-    &.circle { list-style-type: circle;
-      li ul { list-style: inherit; }
-    }
-    &.disc { list-style-type: disc;
-      li ul { list-style: inherit; }
-    }
-    &.no-bullet { list-style: none; }
-    &.large li { line-height: 21px; }
-  }
-  ol { margin-#{$defaultFloat}: 20px;
-    li {
-      ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
-    }
-  }
-
-  /* Blockquotes ---------------------- */
-  blockquote, blockquote p { line-height: 1.5; color: lighten($headerFontColor, 30%); }
-  blockquote { margin: 0 0 ms(1); padding: 9px 20px 0 19px; border-#{$defaultFloat}: 1px solid #ddd;
-    cite { display: block; font-size: ms(0) - 1; color: lighten($headerFontColor, 20%);
-      &:before { content: "\2014 \0020"; }
-      a, a:visited { color: lighten($headerFontColor, 20%); }
-    }
-  }
-
-  abbr, acronym { text-transform: uppercase; font-size: 90%; color: $headerFontColor; border-bottom: 1px solid #ddd; cursor: help; }
-  abbr { text-transform: none; }
-
-  /*
-   * Print styles.
-   *
-   * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
-   * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
-  */
-  .print-only { display: none !important; }
-  @media print {
-    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
-    a, a:visited { text-decoration: underline; }
-    a[href]:after { content: " (" attr(href) ")"; }
-    abbr[title]:after { content: " (" attr(title) ")"; }
-    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
-    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-    thead { display: table-header-group; } /* h5bp.com/t */
-    tr, img { page-break-inside: avoid; }
-    img { max-width: 100% !important; }
-    @page { margin: 0.5cm; }
-    p, h2, h3 { orphans: 3; widows: 3; }
-    h2, h3 { page-break-after: avoid; }
-    .hide-on-print { display: none !important; }
-    .print-only { display: block !important; }
-    .hide-for-print { display: none !important; }
-    .show-for-print { display: inherit !important; }
-  }

data/scss/foundation/components/modules/_all.scss

@@ -1,10 +0,0 @@
-@import "buttons";
-@import "navbar";
-@import "topbar";
-// @import "offcanvas";
-@import "orbit";
-@import "reveal";
-@import "joyride";
-@import "clearing";
-@import "tabs";
-@import "ui";

data/scss/foundation/components/modules/_buttons.scss

@@ -1,178 +0,0 @@
-/* Normal Buttons ---------------------- */
-
-  .button { width: auto; background: $mainColor; border: 1px solid darken(($mainColor), 15%); @include box-shadow(0 1px 0 $shinyEdge inset); color: $white; cursor: pointer; display: inline-block; font-family: inherit; font-size: ms(0); font-weight: bold; line-height: 1; margin: 0; padding: $btnBase ($btnBase * 2) ($btnBase + 1); position: relative; text-align: center; text-decoration: none; @include single-transition(background-color, .15s, ease-in-out);
-
-    /* Hovers */
-    &:hover, &:focus { color: $white; background-color: darken(($mainColor), 10%); }
-    &:active  { @include box-shadow(0 1px 0 $darkEdge inset); }
-
-    /* Sizes */
-    &.large     { font-size: ms(1); padding: ($largeBtnBase) ($largeBtnBase * 2) ($largeBtnBase + 1); }
-    &.medium    { font-size: ms(0); }
-    &.small     { font-size: ms(0) - 3; padding: ($smallBtnBase) ($smallBtnBase * 2) ($smallBtnBase + 1); }
-    &.tiny      { font-size: ms(0) - 4; padding: ($tinyBtnBase) ($tinyBtnBase * 2) ($tinyBtnBase + 1); }
-    &.expand    { width: 100%; text-align: center; }
-
-    /* Colors */
-    &.primary { background-color: $mainColor; border: 1px solid darken(($mainColor), 15%);
-      &:hover, &:focus { background-color: darken(($mainColor), 10%); }
-    }
-    &.success { background-color: $successColor; border: 1px solid darken(($successColor), 15%);
-      &:hover, &:focus { background-color: darken(($successColor), 10%); }
-    }
-    &.alert { background-color: $alertColor; border: 1px solid darken(($alertColor), 15%);
-      &:hover, &:focus { background-color: darken(($alertColor), 10%); }
-    }
-    &.secondary { background-color: $secondaryColor; color: darken(($secondaryColor), 80%); border: 1px solid darken(($secondaryColor), 15%);
-      &:hover, &:focus { background-color: darken(($secondaryColor), 10%); }
-    }
-
-    /* Radii */
-    &.radius { @include border-radius($buttonRadius); }
-    &.round { @include border-radius(1000px); }
-
-    /* Layout */
-    &.full-width { width: 100%; text-align: center; padding-#{$defaultFloat}: 0px !important; padding-#{$defaultOpposite}: 0px !important; }
-    &.left-align { text-align: left; text-indent: 12px; }
-
-		/* Disabled ---------- */
-    &.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none);
-      &:hover { background: $mainColor; }
-
-      &.success { background-color: $successColor;
-        &:hover, &:focus { background-color: $successColor; outline: none; }
-      }
-      &.alert { background-color: $alertColor;
-        &:hover, &:focus { background-color: $alertColor; outline: none; }
-      }
-      &.secondary { background-color: $secondaryColor;
-        &:hover, &:focus { background-color: $secondaryColor; outline: none; }
-      }
-    }
-	}
-
-  /* Don't use native buttons on iOS */
-	input[type=submit].button, button.button { -webkit-appearance: none; }
-
-  /* Correct FF button padding */
-  @-moz-document url-prefix() {
-    button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding: 0;  }
-    input[type="submit"].tiny.button		{ padding: ($tinyBtnBase - 2) ($tinyBtnBase * 2) ($tinyBtnBase - 1); }
-    input[type="submit"].small.button		{ padding: ($smallBtnBase - 2) ($smallBtnBase * 2) ($smallBtnBase - 1); }
-    input[type="submit"].button, input[type=submit].medium.button	{ padding: ($btnBase - 2) ($btnBase * 2) ($btnBase - 1) }
-    input[type="submit"].large.button		{ padding: ($largeBtnBase - 2) ($largeBtnBase * 2) ($largeBtnBase - 1); }
-  }
-
-/* Buttons with Dropdowns ---------------------- */
-
-  .button.dropdown { position: relative; padding-#{$defaultOpposite}: (($btnBase + 12) * 2);
-
-    /* Sizes */
-    &.large { padding-#{$defaultOpposite}: ($largeBtnBase * 2) * 2; }
-    &.small { padding-#{$defaultOpposite}: ($smallBtnBase * 2) * 2; }
-    &.tiny { padding-#{$defaultOpposite}: ($tinyBtnBase * 2) * 2; }
-
-    /* Triangles */
-    &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultOpposite}: $btnBase * 2; margin-top: -2px; }
-    &.large:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; #{$defaultOpposite}: $largeBtnBase * 2; }
-    &.small:after { @include cssTriangle(5px, #fff, top); margin-top: -2px; #{$defaultOpposite}: $smallBtnBase * 2; }
-    &.tiny:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; #{$defaultOpposite}: $tinyBtnBase * 2; }
-
-    /* Flyout List */
-    &>ul { @include box-sizing(content-box); display: none; position: absolute; #{$defaultFloat}: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;
-
-      li { width: 100%; cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
-        a, button { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: $defaultFloat; }
-        button { width: 100%; border: inherit; background: inherit; font-family: inherit; margin: inherit; -webkit-font-smoothing: $fontSmoothing; }
-        &:hover, &:focus { background-color: lighten($mainColor, 45%); color: #222; }
-        &.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
-      }
-    }
-
-    &.up>ul { border-top: 1px solid darken($white, 20%); border-bottom: none; }
-
-    ul.no-hover.show-dropdown { display: block !important; }
-    &:hover {
-      &>ul.no-hover {
-        display: none;
-      }
-    }
-
-    /* Split Dropdown Buttons */
-    &.split { padding: 0; position: relative;
-
-      &:after { display: none; }
-      &:hover, &:focus { background-color: $mainColor; }
-      &.alert:hover, &.alert:focus { background-color: $alertColor; }
-      &.success:hover, &.success:focus { background-color: $successColor; }
-      &.secondary:hover, &.secondary:focus { background-color: $secondaryColor; }
-
-      /* Sizes */
-      &>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); padding-#{$defaultFloat}: $btnBase * 2; padding-#{$defaultOpposite}: ($btnBase * 2.5) * 2; @include single-transition(background-color, .15s, ease-in-out);
-        &:hover, &:focus { background-color: darken($mainColor, 10%); @include box-shadow(0 1px 0 $shinyEdge inset); }
-      }
-      &.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); padding-#{$defaultFloat}: $largeBtnBase * 2; padding-#{$defaultOpposite}: ($largeBtnBase * 2.5) * 2; }
-      &.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); padding-#{$defaultFloat}: $smallBtnBase * 2; padding-#{$defaultOpposite}: ($smallBtnBase * 2.5) * 2; }
-      &.tiny>a { padding: $tinyBtnBase (($tinyBtnBase * 2.5) * 2) ($tinyBtnBase + 1) ($tinyBtnBase * 2); padding-#{$defaultFloat}: $tinyBtnBase * 2; padding-#{$defaultOpposite}: ($tinyBtnBase * 2.5) * 2; }
-
-      /* Triangle Spans */
-      &>span { background-color: $mainColor; position: absolute; #{$defaultOpposite}: 0; top: 0; height: 100%; width: $btnBase * 3; border-#{$defaultFloat}: 1px solid darken($mainColor, 15%); @include box-shadow(1px 1px 0 $shinyEdge inset); @include single-transition(background-color, .15s, ease-in-out);
-        &:hover, &:focus { background-color: darken($mainColor, 10%); }
-        &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -6px; margin-top: -2px; }
-      }
-      &.secondary>span:after { @include cssTriangle(6px, darken(($secondaryColor), 80%), top); }
-
-      &.large span { width: $largeBtnBase * 3; }
-      &.small span { width: $smallBtnBase * 3; }
-      &.tiny span { width: $tinyBtnBase * 3; }
-
-      &.large span:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; margin-#{$defaultFloat}: -7px; }
-      &.small span:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; margin-#{$defaultFloat}: -4px; }
-      &.tiny span:after { @include cssTriangle(3px, #fff, top); margin-top: -1px; margin-#{$defaultFloat}: -3px; }
-
-      /* Colors */
-      &.alert>span { background-color: $alertColor; border-#{$defaultFloat}-color: darken($alertColor, 15%); }
-      &.success>span { background-color: $successColor; border-#{$defaultFloat}-color: darken($successColor, 15%); }
-      &.secondary>span { background-color: $secondaryColor; border-#{$defaultFloat}-color: darken($secondaryColor, 15%); }
-      &.secondary>a { color: darken(($secondaryColor), 80%); }
-
-      &.alert>a:hover, &.alert>span:hover, &.alert>a:focus, &.alert>span:focus { background-color: darken($alertColor, 10%); }
-      &.success>a:hover, &.success>span:hover, &.success>a:focus, &.success>span:focus { background-color: darken($successColor, 10%); }
-      &.secondary>a:hover, &.secondary>span:hover, &.secondary>a:focus, &.secondary>span:focus { background-color: darken($secondaryColor, 10%); }
-    }
-  }
-
-  /* Button Groups ---------------------- */
-
-  ul.button-group { list-style: none; padding: 0; margin: 0 0 12px; @include clearfix();
-
-    li { padding: 0; margin: 0 0 0 -1px; float: $defaultFloat;
-      &:first-child { margin-#{$defaultFloat}: 0; }
-    }
-
-    &.radius li {
-      .button, .button.radius, .button-rounded { @include border-radius(0px); }
-      &:first-child {
-        .button, .button.radius { @include border-corner-radius(top, $defaultFloat, $buttonRadius); @include border-corner-radius(bottom, $defaultFloat, $buttonRadius); }
-        .button.rounded { @include border-corner-radius(top, $defaultFloat, 1000px); @include border-corner-radius(bottom, $defaultFloat, 1000px); }
-      }
-      &:last-child {
-        .button, .button.radius { @include border-corner-radius(top, $defaultOpposite, $buttonRadius); @include border-corner-radius(bottom, $defaultOpposite, $buttonRadius); }
-        .button.rounded { @include border-corner-radius(top, $defaultOpposite, 1000px); @include border-corner-radius(bottom, $defaultOpposite, 1000px); }
-      }
-    }
-
-    &.even {
-      .button { width: 100%; }
-      &.two-up li { width: 50%; }
-      &.three-up li { width: 33.3%; }
-      &.three-up li:first-child { width: 33.4%; }
-      &.four-up li { width: 25%; }
-      &.five-up li { width: 20%; }
-    }
-  }
-
-  div.button-bar { overflow: hidden;
-    ul.button-group { float: $defaultFloat; margin-#{$defaultOpposite}: 8px; }
-    ul.button-group:last-child { margin-#{$defaultFloat}: 0; }
-  }