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

refactor(list): UI fixes for iOS

Browse Source 
references #437
This commit is contained in:
Brandy Carney
2015-11-12 13:32:14 -05:00
parent e5adc1f250
commit f9ab9a6aae
5 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ionic/components/card/modes/ios.scss
View File

@ -13,7 +13,7 @@ $card-ios-padding-bottom: 14px !default;
$card-ios-padding-left: 16px !default; $card-ios-padding-left: 16px !default;
$card-ios-padding-media-top: 10px !default; $card-ios-padding-media-top: 10px !default;
$card-ios-padding-media-bottom: 10px !default; $card-ios-padding-media-bottom: 9px !default;
$card-ios-background-color: $list-background-color !default; $card-ios-background-color: $list-background-color !default;
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default; $card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
@ -49,7 +49,6 @@ ion-card {
} }
.item { .item {
padding-right: ($card-ios-padding-right / 2);
padding-left: ($card-ios-padding-left / 2); padding-left: ($card-ios-padding-left / 2);
font-size: $item-ios-font-size; font-size: $item-ios-font-size;
} }

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

@ -6,16 +6,16 @@ $item-ios-border-color: $list-border-color !default;
$item-ios-activated-background-color: #d9d9d9 !default; $item-ios-activated-background-color: #d9d9d9 !default;
$item-ios-font-size: 1.6rem !default; $item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default; $item-ios-padding-top: 12px !default;
$item-ios-padding-right: 16px !default; $item-ios-padding-right: 16px !default;
$item-ios-padding-bottom: 14px !default; $item-ios-padding-bottom: 13px !default;
$item-ios-padding-left: 16px !default; $item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 10px !default; $item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 10px !default; $item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 10px !default; $item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 10px !default; $item-ios-padding-icon-bottom: 9px !default;
$item-ios-avatar-size: 3.6rem !default; $item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default; $item-ios-thumbnail-size: 5.6rem !default;

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

@ -25,7 +25,7 @@ $list-ios-header-color: #333 !default;
/****************/ /****************/
.list { .list {
margin: 0 $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left; margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
ion-header { ion-header {
position: relative; position: relative;
@ -78,6 +78,10 @@ $list-ios-header-color: #333 !default;
} }
} }
ion-input.item {
border-bottom: 1px solid $item-ios-border-color;
}
// If the item has the no-lines attribute remove the border from: // If the item has the no-lines attribute remove the border from:
// the item itself (for first or last-child items) // the item itself (for first or last-child items)
// the item-inner class (if it is not first or last) // the item-inner class (if it is not first or last)
@ -95,6 +99,7 @@ $list-ios-header-color: #333 !default;
margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
} }
// TODO clean up Sass variables
icon[item-left], icon[item-left],
icon[item-right] { icon[item-right] {
margin-top: $item-ios-padding-icon-top; margin-top: $item-ios-padding-icon-top;
@ -103,12 +108,12 @@ $list-ios-header-color: #333 !default;
ion-avatar[item-left], ion-avatar[item-left],
ion-thumbnail[item-left] { ion-thumbnail[item-left] {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom 0; margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0;
} }
ion-avatar[item-right], ion-avatar[item-right],
ion-thumbnail[item-right] { ion-thumbnail[item-right] {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); margin: ($item-ios-padding-right / 2);
} }
button[item-left], button[item-left],

2
ionic/components/switch/modes/ios.scss
View File

@ -29,7 +29,7 @@ ion-switch {
} }
media-switch { media-switch {
padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left); padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left);
} }

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

@ -31,7 +31,11 @@ ion-input {
} }
ion-input.item { ion-input.item {
align-items: flex-start; align-items: center;
ion-label {
align-self: flex-start;
}
} }
ion-input [text-input] { ion-input [text-input] {