diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss index f954a142fb..eabad42a8c 100644 --- a/ionic/components/app/normalize.scss +++ b/ionic/components/app/normalize.scss @@ -60,8 +60,7 @@ strong { // ========================================================================== // Remove border when inside `a` element in IE 8/9/10. -ion-app img, -.ion-app img { +img { border: 0; } @@ -163,12 +162,6 @@ input::-moz-focus-inner { padding: 0; } -// Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. -input { - line-height: normal; -} - // Firefox's implementation doesn't respect box-sizing, padding, or width. // 1. Address box sizing set to `content-box` in IE 8/9/10. // 2. Remove excess padding in IE 8/9/10. diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss index 95a2d51d1d..a0f1f0b6ae 100644 --- a/ionic/components/form/form.scss +++ b/ionic/components/form/form.scss @@ -2,191 +2,58 @@ // Forms // -------------------------------------------------- -$input-label-color: get-color(dark, base); -$input-color: $input-label-color; -$input-bg: get-color(light, base); -$input-bg-disabled: darken(get-color(stable, base), 10%); -$input-color-placeholder: darken(get-color(stable, base), 20%); -$input-height-base: 5rem; -$input-height-large: $input-height-base + 0.3rem; -$input-height-small: 1.2rem; - - -// Make all forms have space below them form { - margin: 0 0 $line-height-base; + margin: 0 0 2.4rem; } -// Set font for forms label, input, select, textarea { - // @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here + line-height: normal; + font-family: inherit; } -input, -select, -textarea { - font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element) -} - - -// Input List -// ------------------------------- - -.item-input { - display: flex; - align-items: center; - position: relative; - overflow: hidden; - padding: 6px 0 5px 16px; - - input { - border-radius: 0; - flex: 1 220px; - @include appearance(none); - margin: 0; - padding-right: 24px; - background-color: transparent; - } - - .button .icon { - flex: 0 0 24px; - position: static; - display: inline-block; - height: auto; - text-align: center; - font-size: 16px; - } - - .button-bar { - border-radius: 0; - flex: 1 0 220px; - @include appearance(none); - } - - .icon { - min-width: 14px; - } -} - -.item-input-inset { - display: flex; - align-items: center; - position: relative; - overflow: hidden; - //padding: ($item-padding / 3) * 2; -} - -.item-input-wrapper { - display: flex; - flex: 1 0; - align-items: center; - border-radius: 4px; - padding-right: 8px; - padding-left: 8px; - background: #eee; -} - -.item-input-inset .item-input-wrapper input { - padding-left: 4px; - height: 29px; - background: transparent; - line-height: 18px; -} - -.item-input-wrapper ~ .button { - //margin-left: ($item-padding / 3) * 2; -} - // Form Controls // ------------------------------- -// Shared size and type resets -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"] { - display: block; - //padding-top: 2px; - padding-left: 0; - height: 3.8rem;//$line-height-computed + $font-size-base; - color: $input-color; - vertical-align: middle; - font-size: 1.6rem;//$font-size-base; - line-height: $font-size-base + 2; +textarea { + height: auto; + padding: 0; } -.mode-ios, -.mode-android { +.item-input { + + // text inputs + textarea, + input[type="text"], + input[type="password"], + input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], - input[type="week"] { - padding-top: 8px; - } -} - -.item-input { - input, - textarea { + input[type="week"], + input[type="number"], + input[type="email"], + input[type="url"], + input[type="search"], + input[type="tel"], + input[type="color"] { + display: block; + background: transparent; + border: 0; width: 100%; } -} -textarea { - padding-left: 0; - @include placeholder($input-color-placeholder, -3px); -} + // tap inputs + input[type="radio"], + input[type="checkbox"] { + margin: 0; + } -// Reset height since textareas have rows -textarea { - height: auto; -} - -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"] { - border: 0; -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 0; - line-height: normal; -} - -// Reset width of input images, buttons, radios, checkboxes -.item-input { input[type="file"], input[type="image"], input[type="submit"], @@ -194,24 +61,10 @@ input[type="checkbox"] { input[type="button"], input[type="radio"], input[type="checkbox"] { - width: auto; // Override of generic input selector + width: auto; } } -// Set the height of file to match text inputs -input[type="file"] { - line-height: $input-height-base; -} - -// Text input classes to hide text caret during scroll -.previous-input-focus, -.cloned-text-input + input, -.cloned-text-input + textarea { - position: absolute !important; - left: -9999px; - width: 200px; -} - // Placeholder // ------------------------------- @@ -228,10 +81,7 @@ textarea { input[disabled], select[disabled], textarea[disabled], -input[readonly]:not(.cloned-text-input), -textarea[readonly]:not(.cloned-text-input), select[readonly] { - background-color: $input-bg-disabled; cursor: not-allowed; } // Explicitly reset the colors here @@ -241,3 +91,10 @@ input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: transparent; } + +.platform-ios, +.platform-android { + textarea { + resize: none; + } +} diff --git a/ionic/components/form/input.scss b/ionic/components/form/input.scss index be478065bf..abba7fa8d2 100644 --- a/ionic/components/form/input.scss +++ b/ionic/components/form/input.scss @@ -16,6 +16,19 @@ focus-holder input { padding-bottom: 1000px; } +.item.input { + align-items: flex-start; +} + +.item.input input, +.item.input textarea { + flex: 1; +} + +.item.input textarea { + padding-top: 9px; +} + /*ion-input { display: block; diff --git a/ionic/components/form/label.scss b/ionic/components/form/label.scss index b2c3cac5f8..2fb4b44b74 100644 --- a/ionic/components/form/label.scss +++ b/ionic/components/form/label.scss @@ -1,53 +1,32 @@ // Label -// ------------------------------- +// -------------------------------------------------- -$input-label-color: #000 !default; +$input-label-color: #444 !default; .input-label { - display: table; - padding: 9px 10px 7px 0px; + display: block; max-width: 200px; width: 30%; min-width: 100px; color: $input-label-color; - font-size: 1.6rem; + font-size: inherit; white-space: nowrap; } -.placeholder-icon { - color: #aaa; - &:first-child { - padding-right: 6px; - } - &:last-child { - padding-left: 6px; - } -} - .item-stacked-label { - display: block; - background-color: transparent; - box-shadow: none; + flex-direction: column; + align-items: flex-start; - .input-label, .icon { - display: inline-block; - padding: 4px 0 0 0px; - vertical-align: middle; + .input-label { + width: auto; + max-width: 100%; } -} -.item-stacked-label input, -.item-stacked-label textarea { - border-radius: 2px; - padding: 4px 8px 3px 0; - border: none; - background-color: $input-bg; -} -.item-stacked-label input { - overflow: hidden; - height: $line-height-computed + $font-size-base + 0.5rem; + .input-label + .input { + margin-top: 0; + } } .item-floating-label { diff --git a/ionic/components/form/tap-input.ts b/ionic/components/form/tap-input.ts index c3b8476fdf..8e80f7ec92 100644 --- a/ionic/components/form/tap-input.ts +++ b/ionic/components/form/tap-input.ts @@ -15,7 +15,8 @@ import {RadioButton} from '../radio/radio'; '[checked]': 'checked', '[value]': 'value', '[attr.name]': 'name', - '(change)': 'onChangeEvent($event)' + '(change)': 'onChangeEvent($event)', + 'class': 'tap-input input' } }) export class TapInput extends IonInput { diff --git a/ionic/components/form/test/input/main.html b/ionic/components/form/test/input/main.html deleted file mode 100644 index 56e3767592..0000000000 --- a/ionic/components/form/test/input/main.html +++ /dev/null @@ -1,106 +0,0 @@ - -Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Footer - - - - diff --git a/ionic/components/form/test/input/e2e.ts b/ionic/components/form/test/labelled-text-input/e2e.ts similarity index 100% rename from ionic/components/form/test/input/e2e.ts rename to ionic/components/form/test/labelled-text-input/e2e.ts diff --git a/ionic/components/form/test/input/index.ts b/ionic/components/form/test/labelled-text-input/index.ts similarity index 100% rename from ionic/components/form/test/input/index.ts rename to ionic/components/form/test/labelled-text-input/index.ts diff --git a/ionic/components/form/test/labelled-text-input/main.html b/ionic/components/form/test/labelled-text-input/main.html new file mode 100644 index 0000000000..ea34b30982 --- /dev/null +++ b/ionic/components/form/test/labelled-text-input/main.html @@ -0,0 +1,84 @@ + +Labelled Text Input + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +Footer diff --git a/ionic/components/form/test/placeholder-text-input/e2e.ts b/ionic/components/form/test/placeholder-text-input/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/form/test/placeholder-text-input/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/form/test/placeholder-text-input/index.ts b/ionic/components/form/test/placeholder-text-input/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/form/test/placeholder-text-input/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/form/test/placeholder-text-input/main.html b/ionic/components/form/test/placeholder-text-input/main.html new file mode 100644 index 0000000000..d801700e66 --- /dev/null +++ b/ionic/components/form/test/placeholder-text-input/main.html @@ -0,0 +1,27 @@ + +Placeholder Text Input + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ionic/components/form/test/stacked-labelled-text-input/e2e.ts b/ionic/components/form/test/stacked-labelled-text-input/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/form/test/stacked-labelled-text-input/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/form/test/stacked-labelled-text-input/index.ts b/ionic/components/form/test/stacked-labelled-text-input/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/form/test/stacked-labelled-text-input/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/form/test/stacked-labelled-text-input/main.html b/ionic/components/form/test/stacked-labelled-text-input/main.html new file mode 100644 index 0000000000..9ad38957a8 --- /dev/null +++ b/ionic/components/form/test/stacked-labelled-text-input/main.html @@ -0,0 +1,64 @@ + +Stack Labelled Text Input + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +Footer diff --git a/ionic/components/form/text-input.ts b/ionic/components/form/text-input.ts index e3ef3cacfe..8c95eaa29f 100644 --- a/ionic/components/form/text-input.ts +++ b/ionic/components/form/text-input.ts @@ -11,7 +11,11 @@ import {Platform} from '../../platform/platform'; @IonicDirective({ - selector: 'ion-input' + selector: 'ion-input', + classId: 'item-input', + host: { + 'class': 'item' + } }) export class Input extends IonInputItem { @@ -38,7 +42,8 @@ export class Input extends IonInputItem { '(touchend)': 'pointerEnd($event)', '(mousedown)': 'pointerStart($event)', '(mouseup)': 'pointerEnd($event)', - '[attr.id]': 'id' + '[attr.id]': 'id', + 'class': 'text-input input' } }) export class TextInput extends IonInput { diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss index 44fd8f1650..06ad065c23 100644 --- a/ionic/components/item/extensions/ios.scss +++ b/ionic/components/item/extensions/ios.scss @@ -43,6 +43,8 @@ $item-ios-thumbnail-size: 8rem; } } + .text-input, + .input-label, .item-media, .item-content, .item-note { @@ -94,6 +96,13 @@ $item-ios-thumbnail-size: 8rem; } } + .item-input { + &:before, + &:after { + left: 0; + } + } + } diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html index 40d76f2772..f8abd79bf9 100644 --- a/ionic/components/item/test/buttons/main.html +++ b/ionic/components/item/test/buttons/main.html @@ -30,21 +30,21 @@ -
+
div.item left button[primary]
-
+
div.item right button[outline][secondary]
-
+
div.item icon only button
@@ -53,7 +53,7 @@
-
+
div.item right icon/text button
@@ -63,7 +63,7 @@
-
+
-
+
div.item right clear button
@@ -82,7 +82,7 @@
-
+
This is multiline text that has a long description of about how the text is really long. diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss index cf85a6dec1..d7268ed620 100644 --- a/ionic/util/mixins.scss +++ b/ionic/util/mixins.scss @@ -38,7 +38,7 @@ // Input Placeholder // -------------------------------------------------- -@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) { +@mixin placeholder($color: #aaaaaa, $text-indent: 0) { &::-moz-placeholder { // Firefox 19+ color: $color; }