renalware-core 2.0.151 → 2.0.157

data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss

@@ -0,0 +1,130 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to set the color of the pip in dropdown buttons
+$dropdown-button-pip-color: $white !default;
+$dropdown-button-pip-color-alt: $oil !default;
+
+// We use these to set the size of the pip in dropdown buttons
+$button-pip-tny: rem-calc(6) !default;
+$button-pip-sml: rem-calc(7) !default;
+$button-pip-med: rem-calc(9) !default;
+$button-pip-lrg: rem-calc(11) !default;
+
+// We use these to style tiny dropdown buttons
+$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
+$dropdown-button-pip-size-tny: $button-pip-tny !default;
+$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
+$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
+
+// We use these to style small dropdown buttons
+$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
+$dropdown-button-pip-size-sml: $button-pip-sml !default;
+$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
+$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
+
+// We use these to style medium dropdown buttons
+$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
+$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
+$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
+$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
+
+// We use these to style large dropdown buttons
+$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
+$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
+$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
+$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
+
+// @mixins
+//
+// Dropdown Button Mixin
+//
+// We use this mixin to build off of the button mixin and add dropdown button styles
+//
+// $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
+// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
+// $base-style - Add in base-styles. This can be set to false. Default:true
+
+@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) {
+
+  // We add in base styles, but they can be negated by setting to 'false'.
+  @if $base-style {
+    position: relative;
+
+    // This creates the base styles for the triangle pip
+    &::after {
+      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      border-style: solid;
+      content: "";
+      display: block;
+      height: 0;
+      position: absolute;
+      top: 50%;
+      width: 0;
+    }
+  }
+
+  // If we're dealing with tiny buttons, use these styles
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
+    &:after {
+      border-width: $dropdown-button-pip-size-tny;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
+      margin-top: $dropdown-button-pip-top-tny;
+    }
+  }
+
+  // If we're dealing with small buttons, use these styles
+  @if $padding == small {
+    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
+    &::after {
+      border-width: $dropdown-button-pip-size-sml;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
+      margin-top: $dropdown-button-pip-top-sml;
+    }
+  }
+
+  // If we're dealing with default (medium) buttons, use these styles
+  @if $padding == medium {
+    padding-#{$opposite-direction}: $dropdown-button-padding-med;
+    &::after {
+      border-width: $dropdown-button-pip-size-med;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
+      margin-top: $dropdown-button-pip-top-med;
+    }
+  }
+
+  // If we're dealing with large buttons, use these styles
+  @if $padding == large {
+    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
+    &::after {
+      border-width: $dropdown-button-pip-size-lrg;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
+      margin-top: $dropdown-button-pip-top-lrg;
+    }
+  }
+
+  // We can control the pip color. We didn't use logic in this case, just set it and forget it.
+  @if $pip-color {
+    &::after { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+@include exports("dropdown-button") {
+  @if $include-html-button-classes {
+    .dropdown.button, button.dropdown { @include dropdown-button;
+      &.tiny { @include dropdown-button(tiny, $base-style:false); }
+      &.small { @include dropdown-button(small, $base-style:false); }
+      &.large { @include dropdown-button(large, $base-style:false); }
+      &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+    }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_dropdown.scss

@@ -0,0 +1,269 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+
+//
+// @variables
+//
+$include-html-dropdown-classes: $include-html-classes !default;
+
+// We use these to controls height and width styles.
+$f-dropdown-max-width: 200px !default;
+$f-dropdown-height: auto !default;
+$f-dropdown-max-height: none !default;
+
+// Used for bottom position
+$f-dropdown-margin-top: 2px !default;
+
+// Used for right position
+$f-dropdown-margin-left: $f-dropdown-margin-top !default;
+
+// Used for left position
+$f-dropdown-margin-right: $f-dropdown-margin-top !default;
+
+// Used for top position
+$f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
+
+// We use this to control the background color
+$f-dropdown-bg: $white !default;
+
+// We use this to set the border styles for dropdowns.
+$f-dropdown-border-style: solid !default;
+$f-dropdown-border-width: 1px !default;
+$f-dropdown-border-color: scale-color($white, $lightness: -20%) !default;
+
+// We use these to style the triangle pip.
+$f-dropdown-triangle-size: 6px !default;
+$f-dropdown-triangle-color: $white !default;
+$f-dropdown-triangle-side-offset: 10px !default;
+
+// We use these to control styles for the list elements.
+$f-dropdown-list-style: none !default;
+$f-dropdown-font-color: $charcoal !default;
+$f-dropdown-font-size: rem-calc(14) !default;
+$f-dropdown-list-padding: rem-calc(5, 10) !default;
+$f-dropdown-line-height: rem-calc(18) !default;
+$f-dropdown-list-hover-bg: $smoke !default;
+$dropdown-mobile-default-float: 0 !default;
+
+// We use this to control the styles for when the dropdown has custom content.
+$f-dropdown-content-padding: rem-calc(20) !default;
+
+// Default radius for dropdown.
+$f-dropdown-radius: $global-radius !default;
+
+//
+// @mixins
+//
+//
+// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
+// We use this to style the dropdown container element.
+// $content-list - Sets list-style. Default: list. Options: [list, content]
+// $triangle - Sets if dropdown has triangle. Default:true.
+// $max-width - Default: $f-dropdown-max-width || 200px.
+@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
+  display: none;
+  left: -9999px;
+  list-style: $f-dropdown-list-style;
+  margin-#{$default-float}: 0;
+  position: absolute;
+
+  &.open {
+    display: block;
+  }
+
+  > *:first-child { margin-top: 0; }
+  > *:last-child { margin-bottom: 0; }
+
+  @if $content == list {
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $f-dropdown-font-size;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    width: 100%;
+    z-index: 89;
+  }
+  @else if $content == content {
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $f-dropdown-font-size;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    padding: $f-dropdown-content-padding;
+    width: 100%;
+    z-index: 89;
+  }
+
+  @if $triangle == bottom {
+    margin-top: $f-dropdown-margin-top;
+
+    @if $f-dropdown-triangle-size != 0px {
+
+      &:before {
+        @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
+        position: absolute;
+        top: -($f-dropdown-triangle-size * 2);
+        #{$default-float}: $f-dropdown-triangle-side-offset;
+        z-index: 89;
+      }
+      &:after {
+        @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
+        position: absolute;
+        top: -(($f-dropdown-triangle-size + 1) * 2);
+        #{$default-float}: $f-dropdown-triangle-side-offset - 1;
+        z-index: 88;
+      }
+
+      &.right:before {
+        #{$default-float}: auto;
+        #{$opposite-direction}: $f-dropdown-triangle-side-offset;
+      }
+      &.right:after {
+        #{$default-float}: auto;
+        #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
+      }
+    }
+  }
+
+  @if $triangle == $default-float {
+    margin-top: 0;
+    margin-#{$default-float}: $f-dropdown-margin-right;
+
+    &:before {
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
+      position: absolute;
+      top: $f-dropdown-triangle-side-offset;
+      #{$default-float}: -($f-dropdown-triangle-size * 2);
+      z-index: 89;
+    }
+    &:after {
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
+      position: absolute;
+      top: $f-dropdown-triangle-side-offset - 1;
+      #{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
+      z-index: 88;
+    }
+
+  }
+
+  @if $triangle == $opposite-direction {
+    margin-top: 0;
+    margin-#{$default-float}: -$f-dropdown-margin-right;
+
+    &:before {
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
+      position: absolute;
+      top: $f-dropdown-triangle-side-offset;
+      #{$opposite-direction}: -($f-dropdown-triangle-size * 2);
+      #{$default-float}: auto;
+      z-index: 89;
+    }
+    &:after {
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
+      position: absolute;
+      top: $f-dropdown-triangle-side-offset - 1;
+      #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
+      #{$default-float}: auto;
+      z-index: 88;
+    }
+
+  }
+
+  @if $triangle == top {
+    margin-left: 0;
+    margin-top: -$f-dropdown-margin-bottom;
+
+    &:before {
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
+      bottom: -($f-dropdown-triangle-size * 2);
+      position: absolute;
+      top: auto;
+      #{$default-float}: $f-dropdown-triangle-side-offset;
+      #{$opposite-direction}: auto;
+      z-index: 89;
+    }
+    &:after {
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
+      bottom: -($f-dropdown-triangle-size * 2) - 2;
+      position: absolute;
+      top: auto;
+      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
+      #{$opposite-direction}: auto;
+      z-index: 88;
+    }
+
+  }
+
+  @if $max-width { max-width: $max-width; }
+  @else { max-width: $f-dropdown-max-width; }
+
+}
+
+// @MIXIN
+//
+// We use this to style the list elements or content inside the dropdown.
+
+@mixin dropdown-style {
+  cursor: $cursor-pointer-value;
+  font-size: $f-dropdown-font-size;
+  line-height: $f-dropdown-line-height;
+  margin: 0;
+
+  &:hover,
+  &:focus { background: $f-dropdown-list-hover-bg; }
+
+  a {
+    display: block;
+    padding: $f-dropdown-list-padding;
+    color: $f-dropdown-font-color;
+  }
+}
+
+@include exports("dropdown") {
+  @if $include-html-dropdown-classes {
+
+    /* Foundation Dropdowns */
+    .f-dropdown {
+      @include dropdown-container(list, bottom);
+
+      &.drop-#{$opposite-direction} {
+        @include dropdown-container(list, #{$default-float});
+      }
+
+      &.drop-#{$default-float} {
+        @include dropdown-container(list, #{$opposite-direction});
+      }
+
+      &.drop-top {
+        @include dropdown-container(list, top);
+      }
+      // max-width: none;
+
+      li { @include dropdown-style; }
+
+      // You can also put custom content in these dropdowns
+      &.content { @include dropdown-container(content, $triangle:false); }
+
+      // Radius of Dropdown
+      &.radius { @include radius($f-dropdown-radius); }
+
+      // Sizes
+      &.tiny    { max-width: 200px; }
+      &.small   { max-width: 300px; }
+      &.medium  { max-width: 500px; }
+      &.large   { max-width: 800px; }
+      &.mega    {
+        width:100%!important;
+        max-width:100%!important;
+
+        &.open{
+          left:0!important;
+        }
+      }
+    }
+
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_forms.scss

@@ -0,0 +1,601 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import 'global';
+@import 'buttons';
+
+//
+// @variables
+//
+$include-html-form-classes: $include-html-classes !default;
+
+// We use this to set the base for lots of form spacing and positioning styles
+$form-spacing: rem-calc(16) !default;
+
+// We use these to style the labels in different ways
+$form-label-pointer: pointer !default;
+$form-label-font-size: rem-calc(14) !default;
+$form-label-font-weight: $font-weight-normal !default;
+$form-label-line-height: 1.5 !default;
+$form-label-font-color: scale-color($black, $lightness: 30%) !default;
+$form-label-small-transform: capitalize !default;
+$form-label-bottom-margin: 0 !default;
+$input-font-family: inherit !default;
+$input-font-color: rgba(0,0,0,0.75) !default;
+$input-placeholder-font-color: $steel !default;
+$input-font-size: rem-calc(14) !default;
+$input-bg-color: $white !default;
+$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
+$input-border-color: scale-color($white, $lightness: -20%) !default;
+$input-focus-border-color: scale-color($white, $lightness: -40%) !default;
+$input-border-style: solid !default;
+$input-border-width: 1px !default;
+$input-border-radius: $global-radius !default;
+$input-disabled-bg: $gainsboro !default;
+$input-disabled-cursor: $cursor-default-value !default;
+$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
+$input-include-glowing-effect: false !default;
+
+// We use these to style the fieldset border and spacing.
+$fieldset-border-style: solid !default;
+$fieldset-border-width: 1px !default;
+$fieldset-border-color: $gainsboro !default;
+$fieldset-padding: rem-calc(20) !default;
+$fieldset-margin: rem-calc(18 0) !default;
+
+// We use these to style the legends when you use them
+$legend-font-weight: $font-weight-bold !default;
+$legend-padding: rem-calc(0 3) !default;
+
+// We use these to style the prefix and postfix input elements
+$input-prefix-bg: scale-color($white, $lightness: -5%) !default;
+$input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
+$input-prefix-border-size: 1px !default;
+$input-prefix-border-type: solid !default;
+$input-prefix-overflow: visible !default;
+$input-prefix-font-color: $oil !default;
+$input-prefix-font-color-alt: $white !default;
+
+// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
+$input-number-spinners: true !default;
+
+// We use these to style the error states for inputs and labels
+$input-error-message-padding: rem-calc(6 9 9) !default;
+$input-error-message-top: -1px !default;
+$input-error-message-font-size: rem-calc(12) !default;
+$input-error-message-font-weight: $font-weight-normal !default;
+$input-error-message-font-style: italic !default;
+$input-error-message-font-color: $white !default;
+$input-error-message-bg-color: $alert-color !default;
+$input-error-message-font-color-alt: $oil !default;
+
+// We use this to style the glowing effect of inputs when focused
+$glowing-effect-fade-time: .45s !default;
+$glowing-effect-color: $input-focus-border-color !default;
+
+// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
+$input-transition-fade-time: 0.15s !default;
+$input-transition-fade-timing-function: linear !default;
+
+// Select variables
+$select-bg-color: $ghost !default;
+$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
+
+//
+// @MIXINS
+//
+
+// We use this mixin to give us form styles for rows inside of forms
+@mixin form-row-base {
+  .row { margin: 0 ((-$form-spacing) / 2);
+
+    .column,
+    .columns { padding: 0 ($form-spacing / 2); }
+
+    // Use this to collapse the margins of a form row
+    &.collapse { margin: 0;
+
+      .column,
+      .columns { padding: 0; }
+      input {
+        @include side-radius($opposite-direction, 0);
+      }
+
+    }
+  }
+  input.column,
+  input.columns,
+  textarea.column,
+  textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
+}
+
+// @MIXIN
+//
+// We use this mixin to give all basic form elements their style
+@mixin form-element {
+  background-color: $input-bg-color;
+  border: {
+    style: $input-border-style;
+    width: $input-border-width;
+    color: $input-border-color;
+  }
+  box-shadow: $input-box-shadow;
+  color: $input-font-color;
+  display: block;
+  font-family: $input-font-family;
+  font-size: $input-font-size;
+  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  margin: 0 0 $form-spacing 0;
+  padding: $form-spacing / 2;
+  width: 100%;
+  @include box-sizing(border-box);
+  @if $input-include-glowing-effect {
+    @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
+  }
+  // Basic focus styles
+  &:focus {
+    background: $input-focus-bg-color;
+    border-color: $input-focus-border-color;
+    outline: none;
+  }
+  // Disabled Styles
+  &:disabled {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
+
+  // Disabled background input background color
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
+}
+
+// @MIXIN
+//
+// We use this mixin to create form labels
+//
+// $alignment - Alignment options. Default: false. Options: [right, inline, false]
+// $base-style - Control whether or not the base styles come through. Default: true.
+@mixin form-label($alignment:false, $base-style:true) {
+
+  // Control whether or not the base styles come through.
+  @if $base-style {
+    color: $form-label-font-color;
+    cursor: $form-label-pointer;
+    display: block;
+    font-size: $form-label-font-size;
+    font-weight: $form-label-font-weight;
+    line-height: $form-label-line-height;
+    margin-bottom: $form-label-bottom-margin;
+  }
+
+  // Alignment options
+  @if $alignment == right {
+    float: none !important;
+    text-align: right;
+  }
+  @else if $alignment == inline {
+    margin: 0 0 $form-spacing 0;
+    padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
+  }
+}
+
+// We use this mixin to create postfix/prefix form Labels
+@mixin prefix-postfix-base {
+  border-style: $input-prefix-border-type;
+  border-width: $input-prefix-border-size;
+  display: block;
+  font-size: $form-label-font-size;
+  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  overflow: $input-prefix-overflow;
+  padding-bottom: 0;
+  padding-top: 0;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  z-index: 2;
+}
+
+// @MIXIN
+//
+// We use this mixin to create prefix label styles
+// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
+// $is-button - Toggle position settings if prefix is a button. Default:false
+//
+@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+    background: $bg;
+    border-#{$opposite-direction}: none;
+
+    // Control the font color based on background brightness
+    @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
+    @else { color: $input-prefix-font-color-alt; }
+  }
+
+  @if $border {
+    border-color: $border;
+  }
+
+  @if $is-button {
+    border: none;
+    padding-#{$default-float}: 0;
+    padding-#{$opposite-direction}: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+    text-align: center;
+  }
+
+}
+
+// @MIXIN
+//
+// We use this mixin to create postfix label styles
+// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
+// $is-button - Toggle position settings if prefix is a button. Default: false
+@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:true, $border:$input-prefix-border-color, $is-button:false) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+    background: $bg;
+    @if $border-left-hidden {
+      border-#{$default-float}: none;
+    }
+
+    // Control the font color based on background brightness
+    @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
+    @else { color: $input-prefix-font-color-alt; }
+  }
+
+  @if $border {
+    border-color: $border;
+  }
+
+  @if $is-button {
+    border: none;
+    padding-#{$default-float}: 0;
+    padding-#{$opposite-direction}: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+    text-align: center;
+  }
+
+}
+
+// We use this mixin to style fieldsets
+@mixin fieldset {
+  border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
+  margin: $fieldset-margin;
+  padding: $fieldset-padding;
+
+  // and legend styles
+  legend {
+    font-weight: $legend-font-weight;
+    margin: 0;
+    margin-#{$default-float}: rem-calc(-3);
+    padding: $legend-padding;
+  }
+}
+
+// @MIXIN
+//
+// We use this mixin to control border and background color of error inputs
+// $color - Default: $alert-color (found in settings file)
+@mixin form-error-color($color:$alert-color) {
+  background-color: rgba($color, .1);
+  border-color: $color;
+
+  // Go back to normal on focus
+  &:focus {
+    background: $input-focus-bg-color;
+    border-color: $input-focus-border-color;
+  }
+}
+
+// @MIXIN
+//
+// We use this simple mixin to style labels for error inputs
+// $color - Default:$alert-color. Found in settings file
+@mixin form-label-error-color($color:$alert-color) { color: $color; }
+
+// @MIXIN
+//
+// We use this mixin to create error message styles
+// $bg - Default: $alert-color (Found in settings file)
+@mixin form-error-message($bg:$input-error-message-bg-color) {
+  display: block;
+  font-size: $input-error-message-font-size;
+  font-style: $input-error-message-font-style;
+  font-weight: $input-error-message-font-weight;
+  margin-bottom: $form-spacing;
+  margin-top: $input-error-message-top;
+  padding: $input-error-message-padding;
+
+  // We can control the text color based on the brightness of the background.
+  $bg-lightness: lightness($bg);
+  background: $bg;
+  @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
+  @else { color: $input-error-message-font-color-alt; }
+}
+
+// We use this mixin to style select elements
+@mixin form-select  {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  background-color: $select-bg-color;
+  border-radius: 0;
+
+  // Hide the dropdown arrow shown in newer IE versions
+  &::-ms-expand {
+    display: none;
+  }
+
+  // The custom arrow has some fake horizontal padding so we can align it
+  // from the right side of the element without relying on CSS3
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+');
+
+  // We can safely use leftmost and rightmost now
+  background-position: if($text-direction == 'rtl', 0%, 100%) center;
+
+  background-repeat: no-repeat;
+  border: {
+    style: $input-border-style;
+    width: $input-border-width;
+    color: $input-border-color;
+  }
+  color: $input-font-color;
+  font-family: $input-font-family;
+  font-size: $input-font-size;
+  line-height: normal;
+  padding: ($form-spacing / 2);
+  @include radius(0);
+  &.radius { @include radius($global-radius); }
+  &:focus {
+    background-color: $select-hover-bg-color;
+    border-color: $input-focus-border-color;
+  }
+  // Disabled Styles
+  &:disabled {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
+}
+
+// We use this mixin to turn on/off HTML5 number spinners
+@mixin html5number($browser, $on: true) {
+  @if $on == false {
+      @if $browser == webkit {
+        -webkit-appearance: none;
+        margin: 0;
+      } @else if $browser == moz {
+        -moz-appearance: textfield;
+      }
+  }
+}
+
+@include exports("form") {
+  @if $include-html-form-classes {
+    /* Standard Forms */
+    form { margin: 0 0 $form-spacing; }
+
+    /* Using forms within rows, we need to set some defaults */
+    form .row { @include form-row-base; }
+
+    /* Label Styles */
+    label { @include form-label;
+      &.right { @include form-label(right, false); }
+      &.inline { @include form-label(inline, false); }
+      /* Styles for required inputs */
+      small {
+        text-transform: $form-label-small-transform;
+        color: scale-color($form-label-font-color, $lightness: 15%);
+      }
+    }
+
+    /* Attach elements to the beginning or end of an input */
+    .prefix,
+    .postfix { @include prefix-postfix-base; }
+
+    /* Adjust padding, alignment and radius if pre/post element is a button */
+    .postfix.button { @include button-size(false, false); @include postfix(false, false, false, true); }
+    .prefix.button { @include button-size(false, false); @include prefix(false, false, true); }
+
+    .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
+    .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+    .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
+    .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+
+    /* Separate prefix and postfix styles when on span or label so buttons keep their own */
+    span.prefix, label.prefix { @include prefix(); }
+    span.postfix, label.postfix { @include postfix(); }
+
+    /* We use this to get basic styling on all basic form elements */
+    input:not([type]), #{text-inputs(all, 'input')} {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      border-radius: 0;
+      @include form-element;
+      @if $input-include-glowing-effect == false {
+        -webkit-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        -moz-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        -ms-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        -o-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+      }
+      &.radius {
+        @include radius($input-border-radius);
+      }
+    }
+
+    form {
+      .row {
+        .prefix-radius.row.collapse {
+          input,
+          textarea,
+          select,
+          button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+          .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
+        }
+        .postfix-radius.row.collapse {
+          input,
+          textarea,
+          select,
+          button { @include radius(0); @include side-radius($default-float, $button-radius); }
+          .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+        }
+        .prefix-round.row.collapse {
+          input,
+          textarea,
+          select,
+          button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+          .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
+        }
+        .postfix-round.row.collapse {
+          input,
+          textarea,
+          select,
+          button { @include radius(0); @include side-radius($default-float, $button-round); }
+          .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+        }
+      }
+    }
+
+    input[type="submit"] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      border-radius: 0;
+    }
+
+    /* Respect enforced amount of rows for textarea */
+    textarea[rows] {
+      height: auto;
+    }
+
+    /* Not allow resize out of parent */
+    textarea {
+      max-width: 100%;
+    }
+
+    // style placeholder text cross browser
+    ::-webkit-input-placeholder {
+      color: $input-placeholder-font-color;
+    }
+
+    :-moz-placeholder { /* Firefox 18- */
+       color: $input-placeholder-font-color;
+    }
+
+    ::-moz-placeholder {  /* Firefox 19+ */
+       color: $input-placeholder-font-color;
+    }
+
+    :-ms-input-placeholder {
+       color: $input-placeholder-font-color;
+    }
+
+
+    /* Add height value for select elements to match text input height */
+    select {
+      @include form-select;
+      height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+      &[multiple] {
+        height: auto;
+      }
+    }
+
+    /* Adjust margin for form elements below */
+    input[type="file"],
+    input[type="checkbox"],
+    input[type="radio"],
+    select {
+      margin: 0 0 $form-spacing 0;
+    }
+
+    input[type="checkbox"] + label,
+    input[type="radio"] + label {
+      display: inline-block;
+      margin-#{$default-float}: $form-spacing * .5;
+      margin-#{$opposite-direction}: $form-spacing;
+      margin-bottom: 0;
+      vertical-align: baseline;
+    }
+
+    /* Normalize file input width */
+    input[type="file"] {
+      width:100%;
+    }
+
+    /* HTML5 Number spinners settings */
+    input[type=number] {
+      @include html5number(moz, $input-number-spinners)
+    }
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+      @include html5number(webkit, $input-number-spinners);
+    }
+
+    /* We add basic fieldset styling */
+    fieldset {
+      @include fieldset;
+    }
+
+    /* Error Handling */
+
+
+    span.error, small.error {
+      @include form-error-message;
+    }
+
+    .error {
+      input,
+      textarea,
+      select {
+        margin-bottom: 0;
+      }
+
+      input[type="checkbox"],
+      input[type="radio"] {
+        margin-bottom: $form-spacing
+      }
+
+      label,
+      label.error {
+        @include form-label-error-color;
+      }
+
+      small.error {
+        @include form-error-message;
+      }
+
+      > label {
+        > small {
+          background: transparent;
+          color: scale-color($form-label-font-color, $lightness: 15%);
+          display: inline;
+          font-size: 60%;
+          font-style: normal;
+          margin: 0;
+          padding: 0;
+          text-transform: $form-label-small-transform;
+        }
+      }
+
+      span.error-message {
+        display: block;
+      }
+    }
+
+    input.error,
+    textarea.error,
+    select.error {
+      margin-bottom: 0;
+    }
+    label.error { @include form-label-error-color; }
+  }
+}