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

md text inputs

Browse Source
This commit is contained in:
Adam Bradley
2015-09-03 16:02:50 -05:00
parent 70076f350c
commit b9edec8955
12 changed files with 51 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/app/test/weather/style.css
View File

@ -234,7 +234,7 @@ current-weather .current-temp {
border: none; border: none;
color: #fff; color: #fff;
} }
#settings-modal .input-label { #settings-modal ion-label {
color: #fff; color: #fff;
} }

30
ionic/components/form/form.scss
View File

@ -4,7 +4,7 @@
form { form {
margin: 0 0 2.4rem; margin: 0;
} }
label, label,
@ -15,11 +15,20 @@ textarea {
font-family: inherit; font-family: inherit;
} }
textarea {
margin: 0;
padding: 0;
height: auto;
overflow: auto;
color: inherit;
font: inherit;
}
// Form Controls .platform-mobile textarea {
// ------------------------------- resize: none;
}
.item-input { ion-input {
// text inputs // text inputs
textarea, textarea,
@ -45,19 +54,6 @@ textarea {
} }
textarea {
margin: 0;
padding: 0;
height: auto;
overflow: auto;
color: inherit;
font: inherit;
}
.platform-mobile textarea {
resize: none;
}
// Placeholder // Placeholder
// ------------------------------- // -------------------------------

8
ionic/components/form/label.scss
View File

@ -5,7 +5,7 @@
$input-label-color: #888 !default; $input-label-color: #888 !default;
.input-label { ion-label {
display: block; display: block;
max-width: 200px; max-width: 200px;
color: $input-label-color; color: $input-label-color;
@ -13,7 +13,7 @@ $input-label-color: #888 !default;
white-space: nowrap; white-space: nowrap;
} }
[fixed-label] .input-label { [fixed-label] ion-label {
display: block; display: block;
max-width: 200px; max-width: 200px;
width: 30%; width: 30%;
@ -23,11 +23,11 @@ $input-label-color: #888 !default;
white-space: nowrap; white-space: nowrap;
} }
.item-input[stacked-label] { ion-input[stacked-label] {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
.input-label { ion-label {
align-self: stretch; align-self: stretch;
margin-bottom: 0; margin-bottom: 0;
max-width: 100%; max-width: 100%;

14
ionic/components/item/item.scss
View File

@ -55,11 +55,11 @@ ion-item-content {
text-align: center; text-align: center;
} }
.list .item > icon[small]:first-child { ion-list .item > icon[small]:first-child {
min-width: 18px; min-width: 18px;
} }
.list .item { ion-list .item {
border-radius: 0; border-radius: 0;
transition: background 300ms ease-out; transition: background 300ms ease-out;
@ -121,17 +121,17 @@ ion-item-content {
margin-bottom: 0; margin-bottom: 0;
} }
a {
text-decoration: none;
}
} }
.vertical-align-top, .vertical-align-top,
.item.item-input { ion-input.item {
align-items: flex-start; align-items: flex-start;
} }
.item a {
text-decoration: none;
}
.item.item.item.no-border-bottom:after, .item.item.item.no-border-bottom:after,
.item.item.item.no-border-bottom + .item:before { .item.item.item.no-border-bottom + .item:before {
border: none; border: none;

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

@ -23,7 +23,7 @@ $item-ios-note-color: darken($item-ios-border-color, 10%) !default;
$item-ios-forward-icon-color: $item-ios-border-color !default; $item-ios-forward-icon-color: $item-ios-border-color !default;
.list[mode=ios] { ion-list[mode=ios] {
.item { .item {
margin-top: -1px; margin-top: -1px;
@ -141,7 +141,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
} }
.hairlines .list[mode=ios] .item { .hairlines ion-list[mode=ios] .item {
margin-top: -0.5px; margin-top: -0.5px;
&:last-child { &:last-child {

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

@ -26,7 +26,7 @@ $item-md-note-color: darken($item-md-border-color, 10%) !default;
$item-md-forward-icon-color: $item-md-border-color !default; $item-md-forward-icon-color: $item-md-border-color !default;
.list[mode=md] { ion-list[mode=md] {
.item { .item {
margin-top: -1px; margin-top: -1px;

4
ionic/components/list/list.scss
View File

@ -3,7 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
.list { ion-list {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -17,7 +17,7 @@
} }
} }
.list[inset] { ion-list[inset] {
overflow: hidden; overflow: hidden;
ion-header { ion-header {

10
ionic/components/list/modes/ios.scss
View File

@ -20,7 +20,7 @@ $list-ios-header-letter-spacing: 0.1rem !default;
$list-ios-header-color: #333 !default; $list-ios-header-color: #333 !default;
.list[mode=ios] { ion-list[mode=ios] {
margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left; margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
ion-header { ion-header {
@ -34,16 +34,16 @@ $list-ios-header-color: #333 !default;
} }
.list[mode=ios] + .list { ion-list[mode=ios] + ion-list {
margin-top: $list-ios-margin-top + $list-ios-margin-bottom; margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
} }
.list[mode=ios] + .list ion-header { ion-list[mode=ios] + ion-list ion-header {
margin-top: -$list-ios-margin-top; margin-top: -$list-ios-margin-top;
padding-top: 0; padding-top: 0;
} }
.list[mode=ios][inset] { ion-list[mode=ios][inset] {
margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left; margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
border-radius: $list-inset-ios-border-radius; border-radius: $list-inset-ios-border-radius;
@ -68,6 +68,6 @@ $list-ios-header-color: #333 !default;
} }
} }
.list[mode=ios][inset] + .list[inset] { ion-list[mode=ios][inset] + ion-list[inset] {
margin-top: 0; margin-top: 0;
} }

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

@ -18,7 +18,7 @@ $list-md-header-font-size: 1.4rem !default;
$list-md-header-color: #858585 !default; $list-md-header-color: #858585 !default;
.list[mode=md] { ion-list[mode=md] {
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left; margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header { ion-header {
@ -29,16 +29,16 @@ $list-md-header-color: #858585 !default;
} }
.list[mode=md] + .list { ion-list[mode=md] + ion-list {
margin-top: $list-md-margin-top + $list-md-margin-bottom; margin-top: $list-md-margin-top + $list-md-margin-bottom;
} }
.list[mode=md] + .list ion-header { ion-list[mode=md] + ion-list ion-header {
margin-top: -$list-md-margin-top; margin-top: -$list-md-margin-top;
padding-top: 0; padding-top: 0;
} }
.list[mode=md][inset] { ion-list[mode=md][inset] {
margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left; margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
border-radius: $list-inset-md-border-radius; border-radius: $list-inset-md-border-radius;
@ -63,6 +63,6 @@ $list-md-header-color: #858585 !default;
} }
} }
.list[mode=md][inset] + .list[inset] { ion-list[mode=md][inset] + ion-list[inset] {
margin-top: 0; margin-top: 0;
} }

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

@ -11,7 +11,7 @@ ion-card[mode=ios] {
padding: 0; padding: 0;
} }
.item-input[inset] .text-input { ion-input[inset] .text-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);
} }

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

@ -11,7 +11,7 @@ ion-card[mode=md] {
padding: 0; padding: 0;
} }
.item-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);
} }
@ -20,4 +20,12 @@ ion-card[mode=md] {
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);
} }
ion-input.has-focus:after {
border-top: 2px solid blue;
}
ion-input.has-focus + ion-input:before {
border-top-color: blue;
}
} }

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

@ -45,7 +45,7 @@ ion-input.has-focus .text-input {
padding-top: 9px; padding-top: 9px;
} }
.item-input[inset] { ion-input[inset] {
background-color: $inset-item-input-bg-color; background-color: $inset-item-input-bg-color;
.text-input { .text-input {