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

list/item/button/card css overhaul

Browse Source
This commit is contained in:
Adam Bradley
2015-08-25 13:17:29 -05:00
parent cb48d67d4a
commit 069ac65e24
36 changed files with 370 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ionic/components/text-input/modes/ios.scss
View File

@@ -3,10 +3,11 @@
// --------------------------------------------------
.list[mode=ios] {
ion-list[mode=ios],
ion-card[mode=ios] {
.text-input {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
padding: 0;
}
@@ -15,4 +16,8 @@
padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}
ion-label {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
}
}

9
ionic/components/text-input/modes/material.scss
View File

@@ -3,10 +3,11 @@
// --------------------------------------------------
.list[mode=md] {
ion-list[mode=md],
ion-card[mode=md] {
.text-input {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
padding: 0;
}
@@ -15,4 +16,8 @@
padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
}
ion-label {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
}
}

10
ionic/components/text-input/test/fixed-inline-labels/main.html
View File

@@ -19,7 +19,7 @@
<ion-input fixed-label>
<ion-label>From</ion-label>
<input value="Text 3" type="text">
<button clear>
<button clear item-right>
<icon name="ion-power"></icon>
</button>
</ion-input>
@@ -30,19 +30,19 @@
</ion-input>
<ion-input fixed-label>
<icon name="ion-earth"></icon>
<icon name="ion-earth" item-left></icon>
<ion-label>Website</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input fixed-label>
<icon name="ion-email"></icon>
<icon name="ion-email" item-left></icon>
<ion-label>Email</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input fixed-label>
<icon name="ion-earth"></icon>
<icon name="ion-earth" item-left></icon>
<ion-label>Phone</ion-label>
<input value="867-5309" type="tel">
</ion-input>
@@ -55,7 +55,7 @@
<ion-input fixed-label>
<ion-label>Score</ion-label>
<input value="10" type="number">
<button outline>Update</button>
<button outline item-right>Update</button>
</ion-input>
<ion-input fixed-label>

12
ionic/components/text-input/test/inline-labels/main.html
View File

@@ -19,7 +19,7 @@
<ion-input>
<ion-label>From:</ion-label>
<input value="Text 3" type="text">
<button clear>
<button clear item-right>
<icon name="ion-power"></icon>
</button>
</ion-input>
@@ -30,19 +30,19 @@
</ion-input>
<ion-input>
<icon name="ion-earth"></icon>
<icon name="ion-earth" item-left></icon>
<ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
<icon name="ion-email"></icon>
<icon name="ion-email" item-left></icon>
<ion-label>Email:</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input>
<icon name="ion-edit"></icon>
<icon name="ion-edit" item-left></icon>
<ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
@@ -50,13 +50,13 @@
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon name="ion-flag"></icon>
<icon name="ion-flag" item-right></icon>
</ion-input>
<ion-input>
<ion-label>Score:</ion-label>
<input value="10" type="number">
<button outline>Update</button>
<button outline item-right>Update</button>
</ion-input>
<ion-input>

16
ionic/components/text-input/test/inset-inputs/main.html
View File

@@ -8,13 +8,13 @@
<ion-list inset>
<ion-input>
<icon name="ion-search"></icon>
<icon name="ion-search" item-left></icon>
<input value="Input inside an inset list" type="text">
</ion-input>
<ion-input>
<input value="Input inside an inset list" type="text">
<icon name="ion-ios-mic"></icon>
<icon name="ion-ios-mic" item-right></icon>
</ion-input>
</ion-list>
@@ -23,13 +23,13 @@
<ion-list inset>
<ion-input inset>
<icon name="ion-search"></icon>
<icon name="ion-search" item-left></icon>
<input value="Inset input inside an inset list" type="text">
</ion-input>
<ion-input inset>
<input value="Inset input inside an inset list" type="text">
<icon name="ion-ios-mic"></icon>
<icon name="ion-ios-mic" item-right></icon>
</ion-input>
</ion-list>
@@ -38,9 +38,9 @@
<ion-list>
<ion-input inset>
<icon name="ion-search"></icon>
<icon name="ion-search" item-left></icon>
<input value="Inset input inside a list" type="text">
<button outline>Search</button>
<button outline item-right>Search</button>
</ion-input inset>
</ion-list>
@@ -49,13 +49,13 @@
<ion-card>
<ion-input>
<icon name="ion-search"></icon>
<icon name="ion-search" item-left></icon>
<input value="Input inside a card" type="text">
</ion-input>
<ion-input>
<input value="Input inside a card" type="text">
<icon name="ion-ios-mic"></icon>
<icon name="ion-ios-mic" item-right></icon>
</ion-input>
</ion-card>

4
ionic/components/text-input/test/placeholder-labels/main.html
View File

@@ -15,12 +15,12 @@
</ion-input>
<ion-input>
<icon name="ion-ios-telephone"></icon>
<icon name="ion-ios-telephone" item-left></icon>
<input placeholder="Text Input Placeholder" type="text">
</ion-input>
<ion-input>
<icon name="ion-android-call"></icon>
<icon name="ion-android-call" item-left></icon>
<input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
</ion-input>

3
ionic/components/text-input/test/stacked-labels/main.html
View File

@@ -59,6 +59,3 @@
</ion-list>
</ion-content>
<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>