javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

inline form updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-27 20:28:56 -05:00
parent 8ecd913d21
commit 64b53cdc7d
5 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ionic/components/form/test/fixed-inline-labels/main.html
View File

@@ -18,17 +18,17 @@
<ion-input>
<label class="fixed-inline-label">From</label>
<input value="3" type="number">
<input value="Text 3" type="text">
</ion-input>
<ion-input>
<label class="fixed-inline-label">Comments</label>
<textarea>Textarea 4</textarea>
<textarea>Comment value</textarea>
</ion-input>
<ion-input>
<label class="fixed-inline-label">Message</label>
<input value="http://url5.com/" type="url">
<label class="fixed-inline-label">Website</label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
@@ -38,32 +38,32 @@
<ion-input>
<label class="fixed-inline-label">Feedback</label>
<textarea>Textarea 7</textarea>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
<ion-input>
<label class="fixed-inline-label">More Info</label>
<input value="Text 8" type="text">
<input placeholder="Placeholder Text" type="text">
</ion-input>
<ion-input>
<label class="fixed-inline-label">Rank</label>
<input value="9" type="number">
</ion-input>
<ion-input>
<label class="fixed-inline-label">Message</label>
<textarea>Textarea 10</textarea>
<label class="fixed-inline-label">Score</label>
<input value="10" type="number">
</ion-input>
<ion-input>
<label class="fixed-inline-label">First Name</label>
<input value="Text 11" type="text">
<input value="Buzz" type="text">
</ion-input>
<ion-input>
<label class="fixed-inline-label">Last Name</label>
<input value="12" type="number">
<input value="Lightyear" type="text">
</ion-input>
<ion-input>
<label class="fixed-inline-label">Message</label>
<textarea>To infinity and beyond</textarea>
</ion-input>
</ion-list>

30
ionic/components/form/test/inline-labels/main.html
View File

@@ -18,17 +18,17 @@
<ion-input>
<label>From:</label>
<input value="3" type="number">
<input value="Text 3" type="text">
</ion-input>
<ion-input>
<label>Comments:</label>
<textarea>Textarea 4</textarea>
<textarea>Comment value</textarea>
</ion-input>
<ion-input>
<label>Message:</label>
<input value="http://url5.com/" type="url">
<label>Website:</label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
@@ -38,32 +38,32 @@
<ion-input>
<label>Feedback:</label>
<textarea>Textarea 7</textarea>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
<ion-input>
<label>More Info:</label>
<input value="Text 8" type="text">
<input placeholder="Placeholder Text" type="text">
</ion-input>
<ion-input>
<label>Rank:</label>
<input value="9" type="number">
</ion-input>
<ion-input>
<label>Message:</label>
<textarea>Textarea 10</textarea>
<label>Score:</label>
<input value="10" type="number">
</ion-input>
<ion-input>
<label>First Name:</label>
<input value="Text 11" type="text">
<input value="Lightning" type="text">
</ion-input>
<ion-input>
<label>Last Name:</label>
<input value="12" type="number">
<input value="McQueen" type="text">
</ion-input>
<ion-input>
<label>Message:</label>
<textarea>KA-CHOW!</textarea>
</ion-input>
</ion-list>

4
ionic/components/item/extensions/ios.scss
View File

@@ -67,6 +67,10 @@ $item-ios-note-color: #999 !default;
margin-right: $item-ios-padding-right;
}
.item-input > icon {
margin-top: $item-ios-padding-media-top - 1;
}
icon[forward] {
font-size: 2rem;
color: #cfcfcf;

18
ionic/components/item/extensions/material.scss
View File

@@ -10,6 +10,9 @@ $item-md-padding-right: 15px !default;
$item-md-padding-bottom: 14px !default;
$item-md-padding-left: 15px !default;
$item-md-padding-media-top: 10px !default;
$item-md-padding-media-bottom: 11px !default;
$item-md-avatar-size: 4rem !default;
$item-md-thumbnail-size: 8rem !default;
$item-md-note-color: #999 !default;
@@ -40,14 +43,21 @@ $item-md-note-color: #999 !default;
}
}
.text-input,
.input-label,
.item-media,
.item-content,
.item-note {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
}
.item-media {
margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
}
.text-input {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
padding: 0;
}
.item-note {
color: $item-md-note-color;
}
@@ -57,6 +67,10 @@ $item-md-note-color: #999 !default;
margin-right: $item-md-padding-right;
}
.item-input > icon {
margin-top: $item-md-padding-media-top - 1;
}
icon[forward] {
font-size: 2rem;
color: #cfcfcf;

2
ionic/components/list/extensions/ios.scss
View File

@@ -2,7 +2,7 @@
// iOS List
// --------------------------------------------------
$list-ios-header-padding: 30px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-header-padding: 30px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-header-font-size: 1.2rem !default;
$list-ios-header-color: #6d6d72 !default;