paint-rails 0.6.7 → 0.7.24

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

@@ -2,8 +2,8 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "buttons";
+@import 'global';
+@import 'buttons';
 
 //
 // @variables
@@ -23,6 +23,7 @@ $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: #cccccc !default;
 $input-font-size: rem-calc(14) !default;
 $input-bg-color: $white !default;
 $input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
@@ -34,7 +35,7 @@ $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: true !default;
+$input-include-glowing-effect: false !default;
 
 // We use these to style the fieldset border and spacing.
 $fieldset-border-style: solid !default;
@@ -53,7 +54,7 @@ $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-overflow: visible !default;
 $input-prefix-font-color: $oil !default;
 $input-prefix-font-color-alt: $white !default;
 
@@ -67,12 +68,17 @@ $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: 0.45s !default;
+$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;
@@ -86,7 +92,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   .row { margin: 0 ((-$form-spacing) / 2);
 
     .column,
-    .columns { padding: 0 $form-spacing / 2; }
+    .columns { padding: 0 ($form-spacing / 2); }
 
     // Use this to collapse the margins of a form row
     &.collapse { margin: 0;
@@ -102,7 +108,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   input.column,
   input.columns,
   textarea.column,
-  textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
+  textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
 }
 
 // @MIXIN
@@ -110,7 +116,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to give all basic form elements their style
 @mixin form-element {
   background-color: $input-bg-color;
-  font-family: $input-font-family;
   border: {
     style: $input-border-style;
     width: $input-border-width;
@@ -119,10 +124,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   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;
-  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
   width: 100%;
   @include box-sizing(border-box);
   @if $input-include-glowing-effect {
@@ -134,7 +140,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     border-color: $input-focus-border-color;
     outline: none;
   }
-  // Disbaled Styles
+  // Disabled Styles
   &:disabled {
     background-color: $input-disabled-bg;
     cursor: $input-disabled-cursor;
@@ -159,10 +165,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
   // Control whether or not the base styles come through.
   @if $base-style {
-    font-size: $form-label-font-size;
     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;
@@ -181,19 +187,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
 // We use this mixin to create postfix/prefix form Labels
 @mixin prefix-postfix-base {
-  display: block;
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  width: 100%;
-  padding-top: 0;
-  padding-bottom: 0;
   border-style: $input-prefix-border-type;
   border-width: $input-prefix-border-size;
-  overflow: $input-prefix-overflow;
+  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
@@ -219,13 +225,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   }
 
   @if $is-button {
+    border: none;
     padding-#{$default-float}: 0;
     padding-#{$opposite-direction}: 0;
-    padding-top: 0;
     padding-bottom: 0;
+    padding-top: 0;
     text-align: center;
-    line-height: rem-calc(34);
-    border: none;
   }
 
 }
@@ -235,12 +240,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // 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:$input-prefix-border-color, $is-button:false) {
+@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-#{$default-float}: none;
+    @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; }
@@ -252,13 +259,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   }
 
   @if $is-button {
+    border: none;
     padding-#{$default-float}: 0;
     padding-#{$opposite-direction}: 0;
-    padding-top: 0;
     padding-bottom: 0;
+    padding-top: 0;
     text-align: center;
-    line-height: rem-calc(34);
-    border: none;
   }
 
 }
@@ -266,16 +272,16 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to style fieldsets
 @mixin fieldset {
   border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
-  padding: $fieldset-padding;
   margin: $fieldset-margin;
+  padding: $fieldset-padding;
 
   // and legend styles
   legend {
-    font-weight: $legend-font-weight;
     background: $legend-bg;
-    padding: $legend-padding;
-    margin: 0;
+    font-weight: $legend-font-weight;
     margin-#{$default-float}: rem-calc(-3);
+    margin: 0;
+    padding: $legend-padding;
   }
 }
 
@@ -284,8 +290,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // 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;
-  background-color: rgba($color, 0.1);
 
   // Go back to normal on focus
   &:focus {
@@ -304,14 +310,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 //
 // We use this mixin to create error message styles
 // $bg - Default: $alert-color (Found in settings file)
-@mixin form-error-message($bg:$alert-color) {
+@mixin form-error-message($bg:$input-error-message-bg-color) {
   display: block;
-  padding: $input-error-message-padding;
-  margin-top: $input-error-message-top;
-  margin-bottom: $form-spacing;
   font-size: $input-error-message-font-size;
-  font-weight: $input-error-message-font-weight;
   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);
@@ -323,15 +329,16 @@ $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;
+  -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 have some fake horizontal padding so we can align it
+  // 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+);
 
@@ -344,11 +351,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     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;
+  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); }
   &:hover {
@@ -384,8 +391,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     /* Label Styles */
     label { @include form-label;
-      &.right { @include form-label(right,false); }
-      &.inline { @include form-label(inline,false); }
+      &.right { @include form-label(right, false); }
+      &.inline { @include form-label(inline, false); }
       /* Styles for required inputs */
       small {
         text-transform: $form-label-small-transform;
@@ -398,8 +405,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     .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, true); }
-    .prefix.button { @include button-size(false,false); @include prefix(false, false, true); }
+    .postfix.button { @include button-size(false, false); @include postfix(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); }
@@ -407,30 +414,21 @@ $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(); }
-    span.postfix,label.postfix { @include postfix(); }
+    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"],
-    input[type="password"],
-    input[type="date"],
-    input[type="datetime"],
-    input[type="datetime-local"],
-    input[type="month"],
-    input[type="week"],
-    input[type="email"],
-    input[type="number"],
-    input[type="search"],
-    input[type="tel"],
-    input[type="time"],
-    input[type="url"],
-    input[type="color"],
-    textarea {
+    #{text-inputs(all, 'input')} {
       -webkit-appearance: none;
-      -webkit-border-radius: 0px;
+      -moz-appearance: none;
+      border-radius: 0;
       @include form-element;
       @if $input-include-glowing-effect == false {
-          @include single-transition(all, 0.15s, linear);
+        -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);
@@ -442,25 +440,29 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
         .prefix-radius.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+          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 { @include radius(0); @include side-radius($default-float, $button-radius); }
+          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 { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+          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 { @include radius(0); @include side-radius($default-float, $button-round); }
+          select,
+          button { @include radius(0); @include side-radius($default-float, $button-round); }
           .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
         }
       }
@@ -468,7 +470,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     input[type="submit"] {
       -webkit-appearance: none;
-      -webkit-border-radius: 0px;
+      -moz-appearance: none;
+      border-radius: 0;
     }
 
     /* Respect enforced amount of rows for textarea */
@@ -476,15 +479,36 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       height: auto;
     }
 
-	/* Not allow resize out of parent */
-	textarea {
-		max-width: 100%;
-	}
+	  /* 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 */
@@ -559,14 +583,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
       > label {
         > small {
-          color: scale-color($form-label-font-color, $lightness: 15%);
           background: transparent;
-          padding: 0;
-          text-transform: $form-label-small-transform;
-          font-style: normal;
+          color: scale-color($form-label-font-color, $lightness: 15%);
+          display: inline;
           font-size: 60%;
+          font-style: normal;
           margin: 0;
-          display: inline;
+          padding: 0;
+          text-transform: $form-label-small-transform;
         }
       }