fix form variables

dist/css/ionic.css

@@ -3979,8 +3979,7 @@ legend {
   margin-bottom: 1.42857;
   padding: 0;
   width: 100%;
-  border: 0;
+  border: 1px solid #dddddd;
-  border-bottom: 1px solid #e5e5e5;
   color: #444444;
   font-size: 21px;
   line-height: 2.85714; }
@@ -4100,7 +4099,7 @@ input[type="tel"],
 input[type="color"] {
   display: inline-block;
   height: 34px;
-  color: #dfdfdf;
+  color: #444444;
   vertical-align: middle;
   font-size: 14px;
   line-height: 20px; }
@@ -4148,7 +4147,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #dddddd;
   background-color: white; }
 
 select[multiple],
@@ -4157,13 +4156,13 @@ select[size] {
 
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-  color: #dfdfdf; }
+  color: #aaaaaa; }
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: #dfdfdf; }
+  color: #aaaaaa; }
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-  color: #dfdfdf; }
+  color: #aaaaaa; }
 
 input[disabled],
 select[disabled],

scss/_form.scss

@@ -14,13 +14,11 @@ legend {
   margin-bottom: $line-height-base;
   padding: 0;
   width: 100%;
-  border: 0;
+  border: $input-border-width solid $input-border;
-  border-bottom: 1px solid #e5e5e5;
   color: $dark;
   font-size: $font-size-base * 1.5;
   line-height: $line-height-base * 2;
 
-  // Small
   small {
     color: $stable;
     font-size: $line-height-base * .75;
@@ -104,7 +102,7 @@ textarea {
   padding: 4px 8px 3px;
   border: none;
   background-color: $input-bg;
-  box-shadow: inset 0 0 $item-border-width $item-default-border;
+  box-shadow: inset 0 0 $input-border-width $input-border;
 }
 .item-stacked-label input {
   height: $line-height-computed + $font-size-base + 12px;
@@ -133,7 +131,7 @@ input[type="tel"],
 input[type="color"] {
   display: inline-block;
   height: $line-height-computed + $font-size-base;
-  color: darken($stable, 10%);
+  color: $input-color;
   vertical-align: middle;
   font-size: $font-size-base;
   line-height: $line-height-computed;
@@ -194,7 +192,7 @@ input[type="file"] {
 
 // Make select elements obey height by applying a border
 select {
-  border: 1px solid #ccc;
+  border: $input-border-width solid $input-border;
   background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
 }
 
@@ -233,4 +231,3 @@ input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
   background-color: transparent;
 }
-

scss/_variables.scss

@@ -29,6 +29,8 @@ $font-size-small:                11px !default;
 
 $line-height-base:               1.428571429 !default; // 20/14
 $line-height-computed:           floor($font-size-base * $line-height-base) !default; // ~20px
+$line-height-large:              1.33 !default;
+$line-height-small:              1.5 !default;
 
 $headings-font-family:           $font-family-base !default;
 $headings-font-weight:           500 !default;
@@ -42,10 +44,6 @@ $link-hover-color:               darken($link-color, 15%) !default;
 
 $content-padding:                10px !default;
 
-
-// Components
-// -------------------------------
-
 $padding-base-vertical:          6px !default;
 $padding-base-horizontal:        12px !default;
 
@@ -55,83 +53,10 @@ $padding-large-horizontal:       16px !default;
 $padding-small-vertical:         5px !default;
 $padding-small-horizontal:       10px !default;
 
-$line-height-large:              1.33 !default;
-$line-height-small:              1.5 !default;
-
 $border-radius-base:             4px !default;
 $border-radius-large:            6px !default;
 $border-radius-small:            3px !default;
 
-$caret-width-base:               4px !default;
-$caret-width-large:              5px !default;
-
-
-// Forms
-// -------------------------------
-
-$input-height-base:               ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
-$input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
-$input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
-
-$input-bg:                        $light;
-$input-bg-disabled:               $stable;
-
-$input-color:                     $dark;
-$input-label-color:               $dark;
-$input-color-placeholder:         darken($stable, 10%);
-
-
-// Toggle
-// -------------------------------
-
-$toggle-width:                    54px;
-$toggle-height:                   32px;
-$toggle-border-width:             2px;
-$toggle-border-radius:            20px;
-
-$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2);
-$toggle-handle-height:            $toggle-handle-width;
-$toggle-handle-radius:            50%;
-
-$toggle-off-bg-color:             #E5E5E5;
-$toggle-off-border-color:         #E5E5E5;
-
-$toggle-on-bg-color:              #4A87EE;
-$toggle-on-border-color:          $toggle-on-bg-color;
-
-$toggle-handle-off-bg-color:      $light;
-$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
-
-$toggle-transition-duration:      .1s;
-
-
-// Checkbox
-// -------------------------------
-
-$checkbox-width:                  28px;
-$checkbox-height:                 28px;
-$checkbox-border-radius:          50%;
-$checkbox-border-width:           1px;
-
-$checkbox-off-bg-color:           #fff;
-$checkbox-off-border-color:       #4A87EE;
-
-$checkbox-on-bg-color:            #4A87EE;
-$checkbox-on-border-color:        #4A87EE;
-
-$checkbox-check-width:            3px;
-$checkbox-check-color:            #fff;
-
-
-// Range
-// -------------------------------
-
-$range-track-height:           4px;
-$range-track-color:            #ccc;
-$range-slider-width:           20px;
-$range-slider-height:          20px;
-$range-slider-border-radius:   10px;
-
 
 // Buttons
 // -------------------------------
@@ -453,6 +378,75 @@ $card-border-radius:        2px !default;
 $icon-fill-border-radius:     6px !default;
 
 
+// Forms
+// -------------------------------
+
+$input-height-base:               ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+$input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+$input-bg:                        $light;
+$input-bg-disabled:               $stable;
+
+$input-color:                     $dark;
+$input-border:                    $item-default-border;
+$input-border-width:              $item-border-width;
+$input-label-color:               $dark;
+$input-color-placeholder:         lighten($dark, 40%);
+
+
+// Toggle
+// -------------------------------
+
+$toggle-width:                    54px;
+$toggle-height:                   32px;
+$toggle-border-width:             2px;
+$toggle-border-radius:            20px;
+
+$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2);
+$toggle-handle-height:            $toggle-handle-width;
+$toggle-handle-radius:            50%;
+
+$toggle-off-bg-color:             #E5E5E5;
+$toggle-off-border-color:         #E5E5E5;
+
+$toggle-on-bg-color:              #4A87EE;
+$toggle-on-border-color:          $toggle-on-bg-color;
+
+$toggle-handle-off-bg-color:      $light;
+$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
+
+$toggle-transition-duration:      .1s;
+
+
+// Checkbox
+// -------------------------------
+
+$checkbox-width:                  28px;
+$checkbox-height:                 28px;
+$checkbox-border-radius:          50%;
+$checkbox-border-width:           1px;
+
+$checkbox-off-bg-color:           #fff;
+$checkbox-off-border-color:       #4A87EE;
+
+$checkbox-on-bg-color:            #4A87EE;
+$checkbox-on-border-color:        #4A87EE;
+
+$checkbox-check-width:            3px;
+$checkbox-check-color:            #fff;
+
+
+// Range
+// -------------------------------
+
+$range-track-height:           4px;
+$range-track-color:            #ccc;
+$range-slider-width:           20px;
+$range-slider-height:          20px;
+$range-slider-border-radius:   10px;
+
+
 // Menus
 // -------------------------------