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

inset text inputs

Browse Source
This commit is contained in:
Adam Bradley
2015-08-12 16:21:53 -05:00
parent db0413b2dd
commit 369e02bb7e
9 changed files with 94 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ionic/components/form/input.scss
View File

@@ -1,26 +0,0 @@
// Text Input
// --------------------------------------------------
ion-input {
display: block;
}
.item.input {
align-items: flex-start;
}
.item.input .text-input {
flex: 1;
}
.text-input {
pointer-events: none;
}
.item.input textarea {
padding-top: 9px;
}

5
ionic/components/item/modes/ios.scss
View File

@@ -65,11 +65,6 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left;
}
.text-input {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
padding: 0;
}
.item-note {
color: $item-ios-note-color;
}

5
ionic/components/item/modes/material.scss
View File

@@ -54,11 +54,6 @@ $item-md-forward-icon-color: $item-md-border-color !default;
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;
}

18
ionic/components/text-input/modes/ios.scss Normal file
View File

@@ -0,0 +1,18 @@
// iOS Text Input
// --------------------------------------------------
.list[mode=ios] {
.text-input {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
padding: 0;
}
.item-input[inset] .text-input {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
}
}

18
ionic/components/text-input/modes/material.scss Normal file
View File

@@ -0,0 +1,18 @@
// Material Design Text Input
// --------------------------------------------------
.list[mode=md] {
.text-input {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
padding: 0;
}
.item-input[inset] .text-input {
margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
}
}

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

@@ -4,16 +4,44 @@
<ion-content>
<ion-list inset>
<ion-input>
<icon name="ion-search"></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>
</ion-input>
</ion-list>
<ion-list inset>
<ion-input inset>
<icon name="ion-search"></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>
</ion-input>
</ion-list>
<ion-list>
<ion-input inset>
<icon name="ion-home"></icon>
<input value="Inset text input inside a list" type="text">
</ion-input>
<ion-input inset>
<input value="Inset text input inside a list" type="text">
</ion-input>
<icon name="ion-search"></icon>
<input value="Inset input inside a list" type="text">
<button outline>Search</button>
</ion-input inset>
</ion-list>
@@ -21,15 +49,16 @@
<ion-card>
<ion-input>
<input value="Text input inside a card" type="text">
<icon name="ion-home"></icon>
<icon name="ion-search"></icon>
<input value="Input inside a card" type="text">
</ion-input>
<ion-input>
<input value="Text input inside a card" type="text">
<icon name="ion-star"></icon>
<input value="Input inside a card" type="text">
<icon name="ion-ios-mic"></icon>
</ion-input>
</ion-card>
</ion-content>

18
ionic/components/text-input/text-input.scss
View File

@@ -2,6 +2,12 @@
// Text Input
// --------------------------------------------------
$ion-input-focus-border-color: #51a7e8 !default;
$ion-input-focus-box-shadow: inset 0px 0px 8px 0px $ion-input-focus-border-color !default;
$inset-item-input-bg-color: darken(#fff, 20%) !default;
$inset-item-input-input-bg-color: $list-background-color !default;
ion-input {
display: block;
@@ -10,8 +16,8 @@ ion-input {
.key-input ion-input {
&.has-focus {
border-color: #51a7e8;
box-shadow: inset 0px 0px 8px 0px #51a7e8;
border-color: $ion-input-focus-border-color;
box-shadow: $ion-input-focus-box-shadow;
}
:focus {
@@ -38,3 +44,11 @@ ion-input.has-focus .text-input {
.item.input textarea {
padding-top: 9px;
}
.item-input[inset] {
background-color: $inset-item-input-bg-color;
.text-input {
background-color: $list-background-color;
}
}