locomotivecms_wagon 1.5.1 → 1.5.2

data/generators/foundation5/public/stylesheets/foundation/components/_dropdown-buttons.scss

@@ -10,8 +10,8 @@
 $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: #fff !default;
-$dropdown-button-pip-color-alt: #333 !default;
+$dropdown-button-pip-color: $white !default;
+$dropdown-button-pip-color-alt: $oil !default;
 
 $button-pip-tny: rem-calc(6) !default;
 $button-pip-sml: rem-calc(7) !default;
@@ -49,17 +49,18 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 // 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: #fff.
+// $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:#fff, $base-style:true) {
+@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
 
   // We add in base styles, but they can be negated by setting to 'false'.
   @if $base-style {
     position: relative;
+    outline: none;
 
     // This creates the base styles for the triangle pip
-    &:after {
+    &::after {
       position: absolute;
       content: "";
       width: 0;
@@ -74,7 +75,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with tiny buttons, use these styles
   @if $padding == tiny {
     padding-#{$opposite-direction}: $dropdown-button-padding-tny;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-tny;
       #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
       margin-top: $dropdown-button-pip-top-tny;
@@ -84,7 +85,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with small buttons, use these styles
   @if $padding == small {
     padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-sml;
       #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
       margin-top: $dropdown-button-pip-top-sml;
@@ -94,7 +95,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with default (medium) buttons, use these styles
   @if $padding == medium {
     padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-med;
       #{$opposite-direction}: $dropdown-button-pip-opposite-med;
       margin-top: $dropdown-button-pip-top-med;
@@ -104,7 +105,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with large buttons, use these styles
   @if $padding == large {
     padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-lrg;
       #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
       margin-top: $dropdown-button-pip-top-lrg;
@@ -113,7 +114,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 
   // 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; }
+    &::after { border-color: $pip-color transparent transparent transparent; }
   }
 }
 

data/generators/foundation5/public/stylesheets/foundation/components/_dropdown.scss

@@ -27,30 +27,33 @@ $f-dropdown-margin-right: $f-dropdown-margin-top !default;
 $f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
 
 // We use this to control the background color
-$f-dropdown-bg: #fff !default;
+$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(#fff, $lightness: -20%) !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: #fff !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: #555 !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: #eeeeee !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
 //
@@ -65,6 +68,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
   left: -9999px;
   list-style: $f-dropdown-list-style;
   margin-#{$default-float}: 0;
+  outline: none;
 
   > *:first-child { margin-top: 0; }
   > *:last-child { margin-bottom: 0; }
@@ -76,7 +80,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     background: $f-dropdown-bg;
     border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
     font-size: $f-dropdown-font-size;
-    z-index: 99;
+    z-index: 89;
   }
   @else if $content == content {
     padding: $f-dropdown-content-padding;
@@ -86,7 +90,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     background: $f-dropdown-bg;
     border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
     font-size: $f-dropdown-font-size;
-    z-index: 99;
+    z-index: 89;
   }
 
   @if $triangle == bottom {
@@ -97,66 +101,66 @@ $f-dropdown-content-padding: rem-calc(20) !default;
       position: absolute;
       top: -($f-dropdown-triangle-size * 2);
       #{$default-float}: $f-dropdown-triangle-side-offset;
-      z-index: 99;
+      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: 98;
+      z-index: 88;
     }
 
     &.right:before {
-      left: auto;
-      right: $f-dropdown-triangle-side-offset;
+      #{$default-float}: auto;
+      #{$opposite-direction}: $f-dropdown-triangle-side-offset;
     }
     &.right:after {
-      left: auto;
-      right: $f-dropdown-triangle-side-offset - 1;
+      #{$default-float}: auto;
+      #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
     }
   }
 
-  @if $triangle == left {
+  @if $triangle == $default-float {
     margin-top: 0;
-    margin-left: $f-dropdown-margin-right;
+    margin-#{$default-float}: $f-dropdown-margin-right;
 
     &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, right);
+      @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: 99;
+      z-index: 89;
     }
     &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, right);
+      @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: 98;
+      z-index: 88;
     }
 
   }
 
-  @if $triangle == right {
+  @if $triangle == $opposite-direction {
     margin-top: 0;
-    margin-left: -$f-dropdown-margin-right;
+    margin-#{$default-float}: -$f-dropdown-margin-right;
 
     &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, left);
+      @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);
-      left: auto;
-      z-index: 99;
+      #{$default-float}: auto;
+      z-index: 89;
     }
     &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, left);
+      @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;
-      left: auto;
-      z-index: 98;
+      #{$default-float}: auto;
+      z-index: 88;
     }
 
   }
@@ -171,8 +175,8 @@ $f-dropdown-content-padding: rem-calc(20) !default;
       top: auto;
       bottom: -($f-dropdown-triangle-size * 2);
       #{$default-float}: $f-dropdown-triangle-side-offset;
-      right: auto;
-      z-index: 99;
+      #{$opposite-direction}: auto;
+      z-index: 89;
     }
     &:after {
       @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
@@ -180,8 +184,8 @@ $f-dropdown-content-padding: rem-calc(20) !default;
       top: auto;
       bottom: -($f-dropdown-triangle-size * 2) - 2;
       #{$default-float}: $f-dropdown-triangle-side-offset - 1;
-      right: auto;
-      z-index: 98;
+      #{$opposite-direction}: auto;
+      z-index: 88;
     }
 
   }
@@ -205,6 +209,8 @@ $f-dropdown-content-padding: rem-calc(20) !default;
   &:hover,
   &:focus { background: $f-dropdown-list-hover-bg; }
 
+  &.radius { @include radius($f-dropdown-radius); }
+
   a {
     display: block;
     padding: $f-dropdown-list-padding;
@@ -219,12 +225,12 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     .f-dropdown {
       @include dropdown-container(list, bottom);
 
-      &.drop-right {
-        @include dropdown-container(list, left);
+      &.drop-#{$opposite-direction} {
+        @include dropdown-container(list, #{$default-float});
       }
 
-      &.drop-left {
-        @include dropdown-container(list, right);
+      &.drop-#{$default-float} {
+        @include dropdown-container(list, #{$opposite-direction});
       }
 
       &.drop-top {
@@ -242,6 +248,14 @@ $f-dropdown-content-padding: rem-calc(20) !default;
       &.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/generators/foundation5/public/stylesheets/foundation/components/_forms.scss

@@ -18,43 +18,47 @@ $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(#000, $lightness: 30%) !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-font-size: rem-calc(14) !default;
-$input-bg-color: #fff !default;
-$input-focus-bg-color: scale-color(#fff, $lightness: -2%) !default;
-$input-border-color: scale-color(#fff, $lightness: -20%) !default;
-$input-focus-border-color: scale-color(#fff, $lightness: -40%) !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: #ddd !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: true !default;
 
 // We use these to style the fieldset border and spacing.
 $fieldset-border-style: solid !default;
 $fieldset-border-width: 1px !default;
-$fieldset-border-color: #ddd !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-bg: #fff !default;
+$legend-bg: $white !default;
 $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(#fff, $lightness: -5%) !default;
-$input-prefix-border-color: scale-color(#fff, $lightness: -20%) !default;
+$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: hidden !default;
-$input-prefix-font-color: #333 !default;
-$input-prefix-font-color-alt: #fff !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;
@@ -62,15 +66,15 @@ $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: #fff !default;
-$input-error-message-font-color-alt: #333 !default;
+$input-error-message-font-color: $white !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: 0.45s !default;
 $glowing-effect-color: $input-focus-border-color !default;
 
 // Select variables
-$select-bg-color: #fafafa !default;
+$select-bg-color: $ghost !default;
 $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
 //
@@ -107,7 +111,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 @mixin form-element {
   background-color: $input-bg-color;
   font-family: $input-font-family;
-  border: $input-border-width $input-border-style $input-border-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;
@@ -126,9 +134,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     border-color: $input-focus-border-color;
     outline: none;
   }
+  // Disbaled Styles
+  &:disabled {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
 
   // Disabled background input background color
-  &[disabled], fieldset[disabled] & { background-color: $input-disabled-bg; }
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
 }
 
 // @MIXIN
@@ -181,7 +199,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // @MIXIN
 //
 // We use this mixin to create prefix label styles
-// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
+// $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) {
@@ -215,7 +233,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // @MIXIN
 //
 // We use this mixin to create postfix label styles
-// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
+// $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:$input-prefix-border-color, $is-button:false) {
 
@@ -305,13 +323,30 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to style select elements
 @mixin form-select  {
   -webkit-appearance: none !important;
+  -webkit-border-radius: 0px;
   background-color: $select-bg-color;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
+
+  // Hide the dropdown arrow shown in newer IE versions
+  &::-ms-expand {
+    display: none;
+  }
+
+  // The custom arrow have 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;
-  background-position: if($text-direction == 'rtl', 3%, 97%) center;
-  border: $input-border-width $input-border-style $input-border-color;
+  border: {
+    style: $input-border-style;
+    width: $input-border-width;
+    color: $input-border-color;
+  }
   padding: $form-spacing / 2;
   font-size: $input-font-size;
+  font-family: $body-font-family;
   color: $input-font-color;
   line-height: normal;
   @include radius(0);
@@ -320,6 +355,23 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     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") {
@@ -341,14 +393,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       }
     }
 
-    select::-ms-expand {
-      display:none;
-    }
-
-    @-moz-document url-prefix() {
-      select { background: $select-bg-color; }
-      select:hover { background: $select-hover-bg-color }
-    }
     /* Attach elements to the beginning or end of an input */
     .prefix,
     .postfix { @include prefix-postfix-base; }
@@ -363,12 +407,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     .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();
-      &.radius { @include radius(0); @include side-radius($default-float, $global-radius); }
-    }
-    span.postfix,label.postfix { @include postfix();
-      &.radius { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
-    }
+    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[type="text"],
@@ -384,8 +424,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     input[type="tel"],
     input[type="time"],
     input[type="url"],
+    input[type="color"],
     textarea {
       -webkit-appearance: none;
+      -webkit-border-radius: 0px;
       @include form-element;
       @if $input-include-glowing-effect == false {
           @include single-transition(all, 0.15s, linear);
@@ -395,8 +437,38 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       }
     }
 
+    form {
+      .row {
+        .prefix-radius.row.collapse {
+          input,
+          textarea,
+          select { @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 { @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 { @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 { @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;
+      -webkit-border-radius: 0px;
     }
 
     /* Respect enforced amount of rows for textarea */
@@ -404,6 +476,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       height: auto;
     }
 
+	/* Not allow resize out of parent */
+	textarea {
+		max-width: 100%;
+	}
+
     /* Add height value for select elements to match text input height */
     select {
       @include form-select;
@@ -432,6 +509,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       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;
@@ -440,7 +526,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     /* Error Handling */
 
     #{data('abide')} {
-      .error small.error, span.error, small.error {
+      .error small.error, .error span.error, span.error, small.error {
         @include form-error-message;
       }
       span.error, small.error { display: none; }
@@ -490,7 +576,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     }
 
     input.error,
-    textarea.error {
+    textarea.error,
+    select.error {
       margin-bottom: 0;
     }
     label.error { @include form-label-error-color; }