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

fix(styles): update ios and md styles closer to native

Browse Source
This commit is contained in:
Brandy Carney
2016-11-16 13:46:32 -05:00
parent c8aad56c6a
commit 9f7972b6fd
9 changed files with 162 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/item/item-media.scss
View File

@@ -18,9 +18,9 @@
.item > ion-icon,
.item-inner > ion-icon {
min-height: 2.4rem;
min-height: 2.8rem;
font-size: 2.4rem;
font-size: 2.8rem;
line-height: 1;
}

16
src/components/item/item.ios.scss
View File

@@ -4,10 +4,16 @@
// --------------------------------------------------
/// @prop - Font size of the item text
$item-ios-body-text-font-size: 1.6rem !default;
$item-ios-body-text-font-size: 1.7rem !default;
/// @prop - Margin of the item paragraph
$item-ios-paragraph-margin: 0 0 2px !default;
/// @prop - Font size of the item paragraph
$item-ios-paragraph-font-size: 1.4rem !default;
/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: #666 !default;
$item-ios-paragraph-text-color: #8e9093 !default;
/// @prop - Size of the avatar in the item
$item-ios-avatar-size: 3.6rem !default;
@@ -70,7 +76,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios h2 {
margin: 0 0 2px;
font-size: 1.6rem;
font-size: 1.7rem;
font-weight: normal;
}
@@ -88,9 +94,9 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios p {
overflow: inherit;
margin: 0 0 2px;
margin: $item-ios-paragraph-margin;
font-size: 1.2rem;
font-size: $item-ios-paragraph-font-size;
line-height: normal;
text-overflow: inherit;
color: $item-ios-paragraph-text-color;

28
src/components/list/list.md.scss
View File

@@ -30,11 +30,17 @@ $list-inset-md-margin-left: 16px !default;
/// @prop - Border radius of the inset list
$list-inset-md-border-radius: 2px !default;
/// @prop - Margin bottom of the header in a list
$list-md-header-margin-bottom: 13px !default;
/// @prop - Padding left of the header in a list
$list-md-header-padding-left: $item-md-padding-left !default;
/// @prop - Border bottom of the header in a list
$list-md-header-border-bottom: 1px solid $list-md-border-color !default;
/// @prop - Minimum height of the header in a list
$list-md-header-min-height: 4.5rem !default;
/// @prop - Border top of the header in a list
$list-md-header-border-top: 1px solid $list-md-border-color !default;
/// @prop - Font size of the header in a list
$list-md-header-font-size: 1.4rem !default;
@@ -47,23 +53,13 @@ $list-md-header-color: #858585 !default;
// --------------------------------------------------
.list-md {
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
margin: -1px $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
}
.list-md .item-block .item-inner {
border-bottom: 1px solid $list-md-border-color;
}
.list-md > .item-block:first-child,
.list-md > .item-wrapper:first-child .item-block {
border-top: 1px solid $list-md-border-color;
}
.list-md > .item-block:last-child,
.list-md > .item-wrapper:last-child .item-block {
border-bottom: 1px solid $list-md-border-color;
}
.list-md > .item-block:last-child,
.list-md > .item-wrapper:last-child {
ion-label,
@@ -110,7 +106,6 @@ $list-md-header-color: #858585 !default;
.list-md + ion-list ion-list-header {
margin-top: -$list-md-margin-top;
padding-top: 0;
}
@@ -163,9 +158,12 @@ $list-md-header-color: #858585 !default;
// --------------------------------------------------
.list-header-md {
margin-bottom: $list-md-header-margin-bottom;
padding-left: $list-md-header-padding-left;
border-bottom: $list-md-header-border-bottom;
min-height: $list-md-header-min-height;
border-top: $list-md-header-border-top;
font-size: $list-md-header-font-size;
color: $list-md-header-color;
}

36
src/components/list/test/chat-list/app-module.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../../../..';
@Component({
templateUrl: 'main.html'
})
export class E2EPage {
testClick(ev: UIEvent) {
console.log(ev);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class E2EApp {
root = E2EPage;
}
@NgModule({
declarations: [
E2EApp,
E2EPage
],
imports: [
IonicModule.forRoot(E2EApp)
],
bootstrap: [IonicApp],
entryComponents: [
E2EApp,
E2EPage
]
})
export class AppModule {}

86
src/components/list/test/chat-list/main.html Normal file
View File

@@ -0,0 +1,86 @@
<ion-header>
<ion-toolbar>
<ion-title>Inbox</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-list no-lines>
<ion-list-header>
Recent chat
</ion-list-header>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Abbey Christensen</ion-label>
<ion-icon name="chatbubbles" item-right color="primary"></ion-icon>
</ion-item>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Alex Nelson</ion-label>
<ion-icon name="chatbubbles" item-right color="primary"></ion-icon>
</ion-item>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Mary Johnson</ion-label>
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
</ion-item>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Peter Carlsson</ion-label>
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
</ion-item>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Trevor Hansen</ion-label>
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
</ion-item>
</ion-list>
<ion-list no-lines>
<ion-list-header>
Previous chats
</ion-list-header>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Britta Holt</ion-label>
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
</ion-item>
<ion-item>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Sandra Adams</ion-label>
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
</ion-item>
</ion-list>
</ion-content>
<style>
img {
height: 100px;
}
</style>

5
src/components/tabs/tabs.ios.scss
View File

@@ -60,7 +60,7 @@ $tabs-ios-tab-icon-size: 30px !default;
.tabs-ios .tab-button-text {
margin-top: 0;
margin-bottom: 0;
margin-bottom: 1px;
min-height: $tabs-ios-tab-font-size + 1;
}
@@ -70,6 +70,9 @@ $tabs-ios-tab-icon-size: 30px !default;
}
.tabs-ios .tab-button-icon {
margin-top: 4px;
margin-bottom: 1px;
min-width: $tabs-ios-tab-icon-size + 5;
height: $tabs-ios-tab-icon-size;

4
src/components/tabs/tabs.wp.scss
View File

@@ -94,8 +94,8 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
.tabs-wp[tabsLayout=icon-hide] .tab-button,
.tabs-wp[tabsLayout=title-hide] .tab-button,
.tab-button.icon-only,
.tab-button.has-title-only {
.tabs-wp .tab-button.icon-only,
.tabs-wp .tab-button.has-title-only {
padding: 6px 10px;
}

8
src/themes/ionic.theme.dark.ios.scss
View File

@@ -59,14 +59,14 @@ $item-ios-divider-color: $text-color !default;
// iOS Item
// --------------------------------------------------
$item-ios-padding-top: 12px !default;
$item-ios-padding-top: 11px !default;
$item-ios-padding-right: 16px !default;
$item-ios-padding-bottom: 13px !default;
$item-ios-padding-bottom: 11px !default;
$item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 9px !default;
$item-ios-padding-icon-top: 9px !default;
$item-ios-padding-icon-bottom: 8px !default;
// iOS Toggle

8
src/themes/ionic.theme.default.ios.scss
View File

@@ -40,11 +40,11 @@ $list-ios-activated-background-color: #d9d9d9 !default;
// iOS Item
// --------------------------------------------------
$item-ios-padding-top: 12px !default;
$item-ios-padding-top: 11px !default;
$item-ios-padding-right: 16px !default;
$item-ios-padding-bottom: 13px !default;
$item-ios-padding-bottom: 11px !default;
$item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 8px !default;
$item-ios-padding-media-bottom: 8px !default;
$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 9px !default;
$item-ios-padding-icon-top: 9px !default;
$item-ios-padding-icon-bottom: 8px !default;