diff --git a/dist/css/ionic.css b/dist/css/ionic.css index d83f68b1ff..c06000b9b0 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3979,8 +3979,7 @@ legend { margin-bottom: 1.42857; padding: 0; width: 100%; - border: 0; - border-bottom: 1px solid #e5e5e5; + border: 1px solid #dddddd; 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], diff --git a/scss/_form.scss b/scss/_form.scss index 2bd16fb392..51ba44a1ce 100644 --- a/scss/_form.scss +++ b/scss/_form.scss @@ -14,13 +14,11 @@ legend { margin-bottom: $line-height-base; padding: 0; width: 100%; - border: 0; - border-bottom: 1px solid #e5e5e5; + border: $input-border-width solid $input-border; 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; } - diff --git a/scss/_variables.scss b/scss/_variables.scss index 83176650d8..8213193f20 100644 --- a/scss/_variables.scss +++ b/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 // -------------------------------