From 1ee6027ff8f0bc0d842d8e32e8a8d87af75207fb Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 9 Sep 2013 20:43:40 -0500 Subject: [PATCH] text input updates --- dist/ionic.css | 83 ++++++--------- example/input-text.html | 172 ++++++++++++++++++++----------- scss/ionic/_theme-variables.scss | 2 +- scss/ionic/structure/_form.scss | 76 ++++++-------- 4 files changed, 180 insertions(+), 153 deletions(-) diff --git a/dist/ionic.css b/dist/ionic.css index 0effcc7940..bf67ba3c76 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -638,62 +638,48 @@ select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } +.form-group { + background-color: white; + overflow: hidden; } + +.content-padded > .form-group, +.form-group.inset { + border-left: 1px solid #bbbbbb; + border-right: 1px solid #bbbbbb; } + +.form-group .input-wrapper + .input-wrapper { + border-top: 0; } + +.form-group + .form-group { + margin-top: 10px; } + .input-wrapper { display: block; - border-top: 1px solid #999999; - border-bottom: 1px solid #999999; - padding: 4px 7px 3px; } + border-top: 1px solid #bbbbbb; + border-bottom: 1px solid #bbbbbb; + padding: 6px 8px 5px; + overflow: hidden; } .input-wrapper input { + background-color: transparent; margin: 0; - -webkit-appearance: none; } + -webkit-appearance: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; } .input-wrapper .input-label { font-weight: bold; line-height: 34px; } -.content-padded > .input-wrapper, -.input-wrapper.inset { - border-left: 1px solid #999999; - border-right: 1px solid #999999; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; } - -.input-wrapper.row-fluid { - width: auto; } - -.stacked-label { - padding: 0; } - .stacked-label input { - border: 1px solid #999999; } - -.stacked-label { +.form-group.stacked-label, +.form-group.stacked-label .input-wrapper { + background-color: transparent; border: 0; } - .stacked-label input { - border: 1px solid #999999 !important; - padding: 20px 10px !important; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; } - .stacked-label span { - font-weight: bold; - line-height: 20px; } -.content > .input-wrapper.stacked-label input { - border-left: 0 !important; - border-right: 0 !important; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; } - -.content-padded > .input-wrapper.stacked-label, -.content > .input-wrapper.stacked-label.inset { - border: 0 !important; } - -.content > .input-wrapper.stacked-label.inset input { - border: 1px solid #999999 !important; } - -.input-wrapper + .input-wrapper { - border-top: 0 !important; } +.form-group.stacked-label input { + border: 1px solid #bbbbbb; + background-color: white; + padding: 4px 8px 3px; + overflow: hidden; } select, textarea, @@ -743,7 +729,6 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - background-color: white; border: 0; } textarea:focus, input[type="text"]:focus, @@ -789,7 +774,7 @@ input[type="file"] { select { width: 220px; - border: 1px solid #999999; + border: 1px solid #bbbbbb; background-color: white; } select[multiple], @@ -808,7 +793,7 @@ input[type="checkbox"]:focus { .uneditable-textarea { color: #999999; background-color: #fcfcfc; - border-color: #999999; + border-color: #bbbbbb; cursor: not-allowed; } .uneditable-input { diff --git a/example/input-text.html b/example/input-text.html index 0ca1418707..ddd40d7beb 100644 --- a/example/input-text.html +++ b/example/input-text.html @@ -24,32 +24,58 @@

Default Text Input, Not Inset, No Content Padding

- - - +
+ + + +

Default Text Input, Is Inset, No Content Padding

- +
+ + + +

Default Text Input, Not Inset, With Content Padding

- +
+ + +
+ +
+ +

Default Text Input, Is Inset, With Content Padding

- +
+ + +
@@ -57,38 +83,46 @@

Inline Label On Top Of Text Input, Not Inset, No Content Padding

- - - +
+ + + +

Inline Label On Top Of Text Input, Is Inset, No Content Padding

- - -
- -

Inline Label On Top Of Text Input, Not Inset, With Content Padding

+
+
+ +
+ +

Inline Label On Top Of Text Input, Not Inset, With Content Padding

+
+ +

Inline Label On Top Of Text Input, Is Inset, With Content Padding

- +
+ +
@@ -96,30 +130,52 @@

Stacked Label On Top Of Text Input, Not Inset, No Content Padding

- +
+ + + +
+
+ +

Stacked Label On Top Of Text Input, Is Inset, No Content Padding

- +
+ +

Stacked Label On Top Of Text Input, Not Inset, With Content Padding

- +
+ +

Stacked Label On Top Of Text Input, Is Inset, With Content Padding

- +
+ +
diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss index 81b33e3f1f..c0caf11e9c 100644 --- a/scss/ionic/_theme-variables.scss +++ b/scss/ionic/_theme-variables.scss @@ -48,7 +48,7 @@ $textColor: $grayDark !default; // Forms // ------------------------------- $inputBackground: $white !default; -$inputBorder: $grayLight !default; +$inputBorder: #bbb !default; $inputBorderRadius: 4px !default; $inputDisabledBackground: $grayLighter !default; $formActionsBackground: $grayLighter !default; diff --git a/scss/ionic/structure/_form.scss b/scss/ionic/structure/_form.scss index dda82f9253..9e6d1f7854 100644 --- a/scss/ionic/structure/_form.scss +++ b/scss/ionic/structure/_form.scss @@ -47,68 +47,55 @@ textarea { font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element) } +.form-group { + background-color: $inputBackground; + overflow: hidden; +} +.content-padded > .form-group, +.form-group.inset { + border-left: 1px solid $inputBorder; + border-right: 1px solid $inputBorder; +} + +.form-group .input-wrapper + .input-wrapper { + border-top: 0; +} + +.form-group + .form-group { + margin-top: $contentPadding; +} + .input-wrapper { display: block; border-top: 1px solid $inputBorder; border-bottom: 1px solid $inputBorder; - padding: 4px 7px 3px; + padding: 6px 8px 5px; + overflow: hidden; input { + background-color: transparent; margin: 0; -webkit-appearance: none; + @include border-radius(0); } .input-label { font-weight: bold; line-height: $baseLineHeightComputed + $baseFontSize; } - } -.content-padded > .input-wrapper, -.input-wrapper.inset -{ - border-left: 1px solid $inputBorder; - border-right: 1px solid $inputBorder; - @include border-radius($textInputBorderRadius); -} -.input-wrapper.row-fluid { - width: auto; -} - -.stacked-label { - padding: 0; - input { - border: 1px solid $inputBorder; - } -} -.stacked-label { +.form-group.stacked-label, +.form-group.stacked-label .input-wrapper { + background-color: transparent; border: 0; - input { - border: 1px solid $inputBorder !important; - padding: $baseLineHeightComputed $baseLineHeightComputed/2 !important; - @include border-radius($textInputBorderRadius); - } - span { - font-weight: bold; - line-height: $baseLineHeightComputed; - } } -.content > .input-wrapper.stacked-label input { - border-left: 0 !important; - border-right: 0 !important; - @include border-radius(0); -} -.content-padded > .input-wrapper.stacked-label, -.content > .input-wrapper.stacked-label.inset -{ - border: 0 !important; -} -.content > .input-wrapper.stacked-label.inset input { - border: 1px solid $inputBorder !important; -} -.input-wrapper + .input-wrapper { - border-top: 0 !important; + +.form-group.stacked-label input { + border: 1px solid $inputBorder; + background-color: $inputBackground; + padding: 4px 8px 3px; + overflow: hidden; } @@ -169,7 +156,6 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - background-color: $inputBackground; border: 0; // Focus state