diff --git a/ionic/components.js b/ionic/components.js
index d8dbd96b22..214d8af960 100644
--- a/ionic/components.js
+++ b/ionic/components.js
@@ -8,7 +8,8 @@ export * from 'ionic/components/content/content'
// export * from 'ionic/components/icon/icon'
export * from 'ionic/components/item/item'
export * from 'ionic/components/form/form'
-export * from 'ionic/components/input/input'
+export * from 'ionic/components/form/input/input'
+export * from 'ionic/components/form/label/label'
// export * from 'ionic/components/layout/layout'
export * from 'ionic/components/list/list'
export * from 'ionic/components/nav/nav'
diff --git a/ionic/components/form/form.scss b/ionic/components/form/form.scss
index cc5e3c83cb..29b42aa601 100644
--- a/ionic/components/form/form.scss
+++ b/ionic/components/form/form.scss
@@ -187,12 +187,12 @@ input[type="search"],
input[type="tel"],
input[type="color"] {
display: block;
- padding-top: 2px;
+ //padding-top: 2px;
padding-left: 0;
- height: $line-height-computed + $font-size-base;
+ height: 3.8rem;//$line-height-computed + $font-size-base;
color: $input-color;
vertical-align: middle;
- font-size: $font-size-base;
+ font-size: 1.6rem;//$font-size-base;
line-height: $font-size-base + 2;
}
@@ -306,4 +306,3 @@ input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}
-
diff --git a/ionic/components/input/input.js b/ionic/components/form/input/input.js
similarity index 100%
rename from ionic/components/input/input.js
rename to ionic/components/form/input/input.js
diff --git a/ionic/components/form/input/input.scss b/ionic/components/form/input/input.scss
new file mode 100644
index 0000000000..02c1bfc958
--- /dev/null
+++ b/ionic/components/form/input/input.scss
@@ -0,0 +1,30 @@
+$item-input-padding: 6px 0 5px 0px;
+
+ion-input {
+ display: block;
+
+
+ position: relative;
+ overflow: hidden;
+
+ @include flex-display();
+ @include flex-align-items(center);
+
+ .item-label {
+ padding: $item-input-padding;
+ }
+
+ input, textarea {
+ width: 100%;
+ //font-size: 1.6rem;
+
+ border-radius: 0;
+
+ @include flex(1, 220px);
+ @include appearance(none);
+
+ margin: 0;
+ padding-right: 24px;
+ background-color: transparent;
+ }
+}
diff --git a/ionic/components/form/label/label.js b/ionic/components/form/label/label.js
new file mode 100644
index 0000000000..f3149743bf
--- /dev/null
+++ b/ionic/components/form/label/label.js
@@ -0,0 +1,15 @@
+import {NgElement, Decorator} from 'angular2/angular2'
+import {IonicComponent} from 'ionic/config/component'
+
+@Decorator({
+ selector: 'ion-label'
+})
+export class Label {
+ constructor(
+ @NgElement() ngElement:NgElement
+ ) {
+ this.domElement = ngElement.domElement
+ }
+}
+new IonicComponent(Label, {
+})
diff --git a/ionic/components/form/label/label.scss b/ionic/components/form/label/label.scss
new file mode 100644
index 0000000000..488b4b2891
--- /dev/null
+++ b/ionic/components/form/label/label.scss
@@ -0,0 +1,11 @@
+$input-label-color: #000;
+
+ion-label {
+ display: table;
+ padding: 9px 10px 7px 0px;
+ max-width: 200px;
+ width: 35%;
+ color: $input-label-color;
+ font-size: 1.6rem;
+ white-space: nowrap;
+}
diff --git a/ionic/components/form/test/basic/main.html b/ionic/components/form/test/basic/main.html
index 6abc4d519d..549e1ec090 100644
--- a/ionic/components/form/test/basic/main.html
+++ b/ionic/components/form/test/basic/main.html
@@ -1,11 +1,24 @@
-
diff --git a/ionic/components/form/test/basic/main.js b/ionic/components/form/test/basic/main.js
index b9b4b2840c..f50819c1b3 100644
--- a/ionic/components/form/test/basic/main.js
+++ b/ionic/components/form/test/basic/main.js
@@ -1,11 +1,11 @@
import {Component, View, bootstrap} from 'angular2/angular2'
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Button, Form, Item, Input, Content} from 'ionic/ionic';
+import {Button, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
@Component({ selector: '[ion-app]' })
@View({
templateUrl: 'main.html',
- directives: [FormDirectives, Item, Button, Input, Content]
+ directives: [FormDirectives, List, Label, Item, Button, Input, Content]
})
class IonicApp {
constructor() {
@@ -13,6 +13,8 @@ class IonicApp {
this.form = fb.group({
email: ['', Validators.required],
password: ['', Validators.required],
+ description: ['', Validators.required],
+ note : ['', Validators.required]
});
}
}
diff --git a/ionic/components/input/input.scss b/ionic/components/input/input.scss
deleted file mode 100644
index 7d099993a0..0000000000
--- a/ionic/components/input/input.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-ion-input {
- display: block;
- input {
- width: 100%;
- }
-}
diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss
index 02433525b1..38bdc6d1a6 100644
--- a/ionic/components/item/extensions/ios.scss
+++ b/ionic/components/item/extensions/ios.scss
@@ -11,9 +11,9 @@ $item-ios-border-color: $list-ios-border-color !default;
.platform-ios {
- .list-header {
- margin-left: $item-ios-padding-left;
- }
+ //.list-header {
+ //margin-left: $item-ios-padding-left;
+ //}
.item {
background: $item-ios-background-color;
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 8ed3a4edaa..81ce5d5546 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -67,6 +67,7 @@ ion-primary-swipe-buttons {
.item-label {
position: relative;
+ @include flex-display();
@include flex(1);
@include flex-shrink(1);
@@ -127,5 +128,3 @@ ion-primary-swipe-buttons {
border-radius: 50%;
}
}
-
-
diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss
index d95c6b5552..56d675789e 100644
--- a/ionic/components/list/extensions/ios.scss
+++ b/ionic/components/list/extensions/ios.scss
@@ -5,7 +5,7 @@
$list-ios-background-color: #fff !default;
$list-ios-border-color: #c8c7cc !default;
-$list-ios-header-margin: 35px 15px 10px 15px !default;
+ $list-ios-header-margin: 35px 15px 10px 15px !default;
$list-ios-header-font-size: 1.4rem !default;
$list-ios-header-color: #6d6d72 !default;
@@ -17,9 +17,14 @@ $list-ios-footer-color: #8f8f94 !default;
.platform-ios {
.list {
+ }
+
+ // Add the hairline to the top of the first item
+ .item:first-of-type {
@include hairline(top, $list-ios-border-color, $z-index-list-border);
}
+ // Add the hairline to the bottom of the last item
.item:last-of-type {
@include hairline(bottom, $list-ios-border-color, $z-index-list-border);
}
diff --git a/ionic/components/list/list.js b/ionic/components/list/list.js
index 28be7c1614..6b9531487f 100644
--- a/ionic/components/list/list.js
+++ b/ionic/components/list/list.js
@@ -3,7 +3,7 @@ import {IonicComponent} from 'ionic/config/component'
@Component({
- selector: 'ion-list'
+ selector: 'ion-list, [ion-list]'
})
@View({
template: ``
@@ -17,4 +17,6 @@ export class List {
}
}
-new IonicComponent(List, {})
+new IonicComponent(List, {
+ propClasses: ['inset']
+})
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index f14605e78c..02548f33c7 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -20,8 +20,17 @@ $list-margin-bottom: 10px !default;
display: block;
margin: $list-margin-top 0;
padding: 0;
- width: 100%;
+
+ // TODO: Verify if we need this, it makes margin sizing (inset, etc.) not
+ // work and is not present in v1
+ //width: 100%;
+
list-style-type: none;
+
+ &.list-inset {
+ margin-left: -$content-padding;
+ margin-right: -$content-padding;
+ }
}
.list + .list-footer {
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index e83f6471ea..be89b0fa89 100644
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -37,7 +37,8 @@
"components/content/content",
"components/item/item",
"components/form/form",
- "components/input/input",
+ "components/form/label/label",
+ "components/form/input/input",
"components/layout/layout",
"components/list/list",
"components/modal/modal",