javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

md inset inputs

Browse Source
This commit is contained in:
Adam Bradley
2015-09-04 11:04:41 -05:00
parent 0f06573f2b
commit 7f05b5f3b8
5 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,7 +131,8 @@ $item-md-forward-icon-color: $item-md-border-color !default;
margin: 4px; margin: 4px;
} }
icon + ion-item-content { icon + ion-item-content,
icon + .text-input {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2); margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
} }

8
ionic/components/list/modes/material.scss
View File

@ -56,13 +56,13 @@ $list-md-header-color: #858585 !default;
margin-bottom: 0; margin-bottom: 0;
border-bottom-right-radius: $list-inset-md-border-radius; border-bottom-right-radius: $list-inset-md-border-radius;
border-bottom-left-radius: $list-inset-md-border-radius; border-bottom-left-radius: $list-inset-md-border-radius;
&:after {
border-top: none;
}
} }
} }
.list[mode=md][inset] .item:not(ion-input):last-child:after {
border-top: none;
}
.list[mode=md][inset] + .list[inset] { .list[mode=md][inset] + .list[inset] {
margin-top: 0; margin-top: 0;
} }

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

@ -14,6 +14,11 @@ ion-card[mode=md] {
padding: 0; padding: 0;
} }
ion-input.item:before,
ion-input.item:after {
left: 0;
}
ion-input[inset] .text-input { ion-input[inset] .text-input {
margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left; 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); padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
@ -25,11 +30,17 @@ ion-card[mode=md] {
} }
ion-input.has-focus:after { ion-input.has-focus:after {
border-top: 2px solid $text-input-highlight-color; border-top: 2px solid $text-input-highlight-color !important;
z-index: 1;
} }
ion-input.has-focus + ion-input:before { ion-input.has-focus + ion-input:before {
border-top-color: $text-input-highlight-color; border-top-color: $text-input-highlight-color !important;
} }
} }
.list[mode=md] ion-input.item {
padding-right: 0;
padding-left: 0;
}

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

@ -13,8 +13,13 @@
</ion-input> </ion-input>
<ion-input> <ion-input>
<input value="Input inside an inset list" type="text"> <icon call item-left></icon>
<icon mic item-right></icon> <input type="text">
</ion-input>
<ion-input>
<icon mail item-left></icon>
<input placeholder="Placeholder text" type="text">
</ion-input> </ion-input>
</ion-list> </ion-list>

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

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