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

refactor(text-input): remove the ion-list and ion-card wrappers for text-input

Browse Source 
Can now use ion-inputs outside of lists. Closes #598
This commit is contained in:
Brandy Carney
2015-12-01 11:23:50 -05:00
parent ae0f66eea8
commit ec6cc9cec7
4 changed files with 110 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ionic/components/list/modes/md.scss
View File

@@ -113,6 +113,11 @@ ion-list[inset] {
border-bottom-left-radius: $list-inset-md-border-radius;
}
ion-input.item {
padding-right: 0;
padding-left: 0;
}
+ ion-list[inset] {
margin-top: 0;
}

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

@@ -6,50 +6,45 @@
$input-label-ios-color: #7f7f7f !default;
ion-list,
ion-card {
[text-input] {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
padding: 0;
}
ion-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);
}
ion-label {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
color: $input-label-ios-color;
}
ion-label + [text-input] {
margin-left: $item-ios-padding-left;
}
[stacked-label] ion-label {
font-size: 1.2rem;
margin-bottom: 4px;
}
[stacked-label] [text-input],
[floating-label] [text-input] {
margin-left: 0;
margin-top: 8px;
margin-bottom: 8px;
}
[floating-label] ion-label {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8);
}
[text-input] {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
padding: 0;
}
ion-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);
}
ion-label {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
color: $input-label-ios-color;
}
ion-label + [text-input] {
margin-left: $item-ios-padding-left;
}
[stacked-label] ion-label {
font-size: 1.2rem;
margin-bottom: 4px;
}
[stacked-label] [text-input],
[floating-label] [text-input] {
margin-left: 0;
margin-top: 8px;
margin-bottom: 8px;
}
[floating-label] ion-label {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8);
}

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

@@ -7,74 +7,65 @@ $text-input-highlight-color: map-get($colors, primary) !default;
$input-label-md-color: #999 !default;
ion-list,
ion-card {
[text-input] {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
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);
}
ion-label {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
color: $input-label-md-color;
}
ion-input.has-focus:after {
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 !important;
}
[stacked-label] ion-label {
font-size: 1.2rem;
margin-bottom: 0;
}
[stacked-label] ion-label,
[floating-label] ion-label {
margin-left: 0;
}
[stacked-label].has-focus ion-label,
[floating-label].has-focus ion-label {
color: $text-input-highlight-color;
}
[stacked-label] [text-input],
[floating-label] [text-input] {
margin-bottom: 8px;
margin-top: 8px;
margin-left: 0;
}
[floating-label] ion-label {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8);
}
[text-input] {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
padding: 0;
}
ion-list[inset] ion-input.item {
padding-right: 0;
padding-left: 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);
}
ion-label {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
color: $input-label-md-color;
}
ion-input.has-focus:after {
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 !important;
}
[stacked-label] ion-label {
font-size: 1.2rem;
margin-bottom: 0;
}
[stacked-label] ion-label,
[floating-label] ion-label {
margin-left: 0;
}
[stacked-label].has-focus ion-label,
[floating-label].has-focus ion-label {
color: $text-input-highlight-color;
}
[stacked-label] [text-input],
[floating-label] [text-input] {
margin-bottom: 8px;
margin-top: 8px;
margin-left: 0;
}
[floating-label] ion-label {
margin-bottom: 0;
transform-origin: left top;
transform: translate3d(0, 27px, 0);
transition: transform 150ms ease-in-out;
}
[floating-label].has-focus ion-label,
[floating-label].has-value ion-label {
transform: translate3d(0, 0, 0) scale(0.8);
}

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

@@ -78,9 +78,11 @@
</ion-list>
<div>
<textarea></textarea>
</div>
<ion-input>
<ion-label>No List</ion-label>
<input value="ListFreeeee" type="text">
</ion-input>
<textarea></textarea>
</form>