diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss
index a652673c72..9b3ddaa027 100644
--- a/ionic/components/item/modes/material.scss
+++ b/ionic/components/item/modes/material.scss
@@ -131,7 +131,8 @@ $item-md-forward-icon-color: $item-md-border-color !default;
margin: 4px;
}
- icon + ion-item-content {
+ icon + ion-item-content,
+ icon + .text-input {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
}
diff --git a/ionic/components/list/modes/material.scss b/ionic/components/list/modes/material.scss
index c79553f0a9..2dd5fc8162 100644
--- a/ionic/components/list/modes/material.scss
+++ b/ionic/components/list/modes/material.scss
@@ -56,13 +56,13 @@ $list-md-header-color: #858585 !default;
margin-bottom: 0;
border-bottom-right-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] {
margin-top: 0;
}
diff --git a/ionic/components/text-input/modes/material.scss b/ionic/components/text-input/modes/material.scss
index a49ee1cdea..bb1d08dc1d 100644
--- a/ionic/components/text-input/modes/material.scss
+++ b/ionic/components/text-input/modes/material.scss
@@ -14,6 +14,11 @@ ion-card[mode=md] {
padding: 0;
}
+ ion-input.item:before,
+ ion-input.item:after {
+ left: 0;
+ }
+
ion-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);
@@ -25,11 +30,17 @@ ion-card[mode=md] {
}
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 {
- 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;
+}
diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html
index 93c42eb5c4..ff66d0ec7e 100644
--- a/ionic/components/text-input/test/inset-inputs/main.html
+++ b/ionic/components/text-input/test/inset-inputs/main.html
@@ -13,8 +13,13 @@
-
-
+
+
+
+
+
+
+
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index ce9bc78420..1a5ba8337f 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -2,11 +2,10 @@
// 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;
+$input-focus-border-color: #51a7e8 !default;
+$input-focus-box-shadow: inset 0px 0px 8px 0px $input-focus-border-color !default;
-$inset-item-input-bg-color: darken(#fff, 20%) !default;
-$inset-item-input-input-bg-color: $list-background-color !default;
+$text-input-background-color: $list-background-color !default;
ion-input {
@@ -16,8 +15,8 @@ ion-input {
.key-input ion-input {
&.has-focus {
- border-color: $ion-input-focus-border-color;
- box-shadow: $ion-input-focus-box-shadow;
+ border-color: $input-focus-border-color;
+ box-shadow: $input-focus-box-shadow;
}
:focus {
@@ -34,6 +33,7 @@ ion-input {
}
ion-input .text-input {
+ background-color: $text-input-background-color;
pointer-events: none;
}
@@ -44,16 +44,3 @@ ion-input.has-focus .text-input {
.item.input textarea {
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;
- }
-}