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

refactor(text-input): changed text-input references to item-input

Browse Source 
cleaned up main text-input Sass file references #689
This commit is contained in:
Brandy Carney
2015-12-08 16:00:07 -05:00
parent ad57fc02f8
commit 32f24f0b19
4 changed files with 34 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/text-input/label.scss
View File

@ -29,7 +29,7 @@ ion-label {
max-width: 100%; max-width: 100%;
} }
[text-input] { .item-input {
align-self: stretch; align-self: stretch;
width: auto; width: auto;
} }

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

@ -9,13 +9,13 @@ $text-input-ios-background-color: $list-ios-background-color !default;
$text-input-ios-label-color: #7f7f7f !default; $text-input-ios-label-color: #7f7f7f !default;
[text-input] { .item-input {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
padding: 0; padding: 0;
background-color: $text-input-ios-background-color; background-color: $text-input-ios-background-color;
} }
ion-input[inset] [text-input] { ion-input[inset] .item-input {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left; 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); padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
} }
@ -25,7 +25,7 @@ ion-label {
color: $text-input-ios-label-color; color: $text-input-ios-label-color;
} }
ion-label + [text-input] { ion-label + .item-input {
margin-left: $item-ios-padding-left; margin-left: $item-ios-padding-left;
} }
@ -34,8 +34,8 @@ ion-label + [text-input] {
margin-bottom: 4px; margin-bottom: 4px;
} }
[stacked-label] [text-input], [stacked-label] .item-input,
[floating-label] [text-input] { [floating-label] .item-input {
margin-left: 0; margin-left: 0;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;

8
ionic/components/text-input/modes/md.scss
View File

@ -12,13 +12,13 @@ $text-input-md-hightlight-color-valid: map-get($colors-md, secondary) !defa
$text-input-md-hightlight-color-invalid: map-get($colors-md, danger) !default; $text-input-md-hightlight-color-invalid: map-get($colors-md, danger) !default;
[text-input] { .item-input {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
padding: 0; padding: 0;
background-color: $text-input-md-background-color; background-color: $text-input-md-background-color;
} }
ion-input[inset] [text-input] { ion-input[inset] .item-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);
} }
@ -64,8 +64,8 @@ ion-input.ng-invalid.ng-touched:after {
color: $text-input-md-highlight-color; color: $text-input-md-highlight-color;
} }
[stacked-label] [text-input], [stacked-label] .item-input,
[floating-label] [text-input] { [floating-label] .item-input {
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 8px; margin-top: 8px;
margin-left: 0; margin-left: 0;

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

@ -3,57 +3,45 @@
// Text Input // Text Input
// -------------------------------------------------- // --------------------------------------------------
$text-input-textarea-resize: none !default;
ion-input {
// text inputs // All Inputs in ion-input
textarea, // --------------------------------------------------
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
display: block;
background: transparent;
border: 0;
width: 100%;
}
}
ion-input [text-input] { .item-input {
display: block;
background: transparent;
border: 0;
flex: 1; flex: 1;
pointer-events: none; pointer-events: none;
} }
.input-focused [text-input] {
pointer-events: auto;
}
ion-input input[scroll-assist] { // Scroll Assist
display: inline-block; // --------------------------------------------------
padding: 0;
margin: 0; [scroll-assist] {
width: 1px; width: 1px;
height: 1px; height: 1px;
background: transparent;
border: 0;
pointer-events: none; pointer-events: none;
} }
ion-input textarea {
padding-top: 9px; // Input focused
// --------------------------------------------------
.input-focused .item-input {
pointer-events: auto;
} }
// Input textarea
// --------------------------------------------------
textarea { textarea {
margin: 0;
padding: 0;
height: auto; height: auto;
overflow: auto; overflow: auto;
font: inherit; font: inherit;
@ -61,7 +49,7 @@ textarea {
} }
.platform-mobile textarea { .platform-mobile textarea {
resize: none; resize: $text-input-textarea-resize;
} }
input, input,