Skip to content

Commit 9f7972b

Browse files
brandyscarneybrandyscarney
committed
fix(styles): update ios and md styles closer to native
1 parent c8aad56 commit 9f7972b

File tree

9 files changed

+162
-33
lines changed

9 files changed

+162
-33
lines changed

‎src/components/item/item-media.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818

1919
.item > ion-icon,
2020
.item-inner > ion-icon {
21-
min-height: 2.4rem;
21+
min-height: 2.8rem;
2222

23-
font-size: 2.4rem;
23+
font-size: 2.8rem;
2424
line-height: 1;
2525
}
2626

‎src/components/item/item.ios.scss

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,16 @@
44
// --------------------------------------------------
55

66
/// @prop - Font size of the item text
7-
$item-ios-body-text-font-size: 1.6rem !default;
7+
$item-ios-body-text-font-size: 1.7rem !default;
8+
9+
/// @prop - Margin of the item paragraph
10+
$item-ios-paragraph-margin: 0 0 2px !default;
11+
12+
/// @prop - Font size of the item paragraph
13+
$item-ios-paragraph-font-size: 1.4rem !default;
814

915
/// @prop - Color of the item paragraph
10-
$item-ios-paragraph-text-color: #666 !default;
16+
$item-ios-paragraph-text-color: #8e9093 !default;
1117

1218
/// @prop - Size of the avatar in the item
1319
$item-ios-avatar-size: 3.6rem !default;
@@ -70,7 +76,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
7076
.item-ios h2 {
7177
margin: 0 0 2px;
7278

73-
font-size: 1.6rem;
79+
font-size: 1.7rem;
7480
font-weight: normal;
7581
}
7682

@@ -88,9 +94,9 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
8894
.item-ios p {
8995
overflow: inherit;
9096

91-
margin: 0 0 2px;
97+
margin: $item-ios-paragraph-margin;
9298

93-
font-size: 1.2rem;
99+
font-size: $item-ios-paragraph-font-size;
94100
line-height: normal;
95101
text-overflow: inherit;
96102
color: $item-ios-paragraph-text-color;

‎src/components/list/list.md.scss

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,17 @@ $list-inset-md-margin-left: 16px !default;
3030
/// @prop - Border radius of the inset list
3131
$list-inset-md-border-radius: 2px !default;
3232

33+
/// @prop - Margin bottom of the header in a list
34+
$list-md-header-margin-bottom: 13px !default;
35+
3336
/// @prop - Padding left of the header in a list
3437
$list-md-header-padding-left: $item-md-padding-left !default;
3538

36-
/// @prop - Border bottom of the header in a list
37-
$list-md-header-border-bottom: 1px solid $list-md-border-color !default;
39+
/// @prop - Minimum height of the header in a list
40+
$list-md-header-min-height: 4.5rem !default;
41+
42+
/// @prop - Border top of the header in a list
43+
$list-md-header-border-top: 1px solid $list-md-border-color !default;
3844

3945
/// @prop - Font size of the header in a list
4046
$list-md-header-font-size: 1.4rem !default;
@@ -47,23 +53,13 @@ $list-md-header-color: #858585 !default;
4753
// --------------------------------------------------
4854

4955
.list-md {
50-
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
56+
margin: -1px $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
5157
}
5258

5359
.list-md .item-block .item-inner {
5460
border-bottom: 1px solid $list-md-border-color;
5561
}
5662

57-
.list-md > .item-block:first-child,
58-
.list-md > .item-wrapper:first-child .item-block {
59-
border-top: 1px solid $list-md-border-color;
60-
}
61-
62-
.list-md > .item-block:last-child,
63-
.list-md > .item-wrapper:last-child .item-block {
64-
border-bottom: 1px solid $list-md-border-color;
65-
}
66-
6763
.list-md > .item-block:last-child,
6864
.list-md > .item-wrapper:last-child {
6965
ion-label,
@@ -110,7 +106,6 @@ $list-md-header-color: #858585 !default;
110106

111107
.list-md + ion-list ion-list-header {
112108
margin-top: -$list-md-margin-top;
113-
padding-top: 0;
114109
}
115110

116111

@@ -163,9 +158,12 @@ $list-md-header-color: #858585 !default;
163158
// --------------------------------------------------
164159

165160
.list-header-md {
161+
margin-bottom: $list-md-header-margin-bottom;
166162
padding-left: $list-md-header-padding-left;
167163

168-
border-bottom: $list-md-header-border-bottom;
164+
min-height: $list-md-header-min-height;
165+
166+
border-top: $list-md-header-border-top;
169167
font-size: $list-md-header-font-size;
170168
color: $list-md-header-color;
171169
}

‎src/components/list/test/chat-list/app-module.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, NgModule } from '@angular/core';
2+
import { IonicApp, IonicModule } from '../../../..';
3+
4+
5+
@Component({
6+
templateUrl: 'main.html'
7+
})
8+
export class E2EPage {
9+
testClick(ev: UIEvent) {
10+
console.log(ev);
11+
}
12+
}
13+
14+
15+
@Component({
16+
template: '<ion-nav [root]="root"></ion-nav>'
17+
})
18+
export class E2EApp {
19+
root = E2EPage;
20+
}
21+
22+
@NgModule({
23+
declarations: [
24+
E2EApp,
25+
E2EPage
26+
],
27+
imports: [
28+
IonicModule.forRoot(E2EApp)
29+
],
30+
bootstrap: [IonicApp],
31+
entryComponents: [
32+
E2EApp,
33+
E2EPage
34+
]
35+
})
36+
export class AppModule {}

‎src/components/list/test/chat-list/main.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<ion-header>
2+
3+
<ion-toolbar>
4+
<ion-title>Inbox</ion-title>
5+
</ion-toolbar>
6+
7+
</ion-header>
8+
9+
10+
<ion-content class="outer-content">
11+
12+
<ion-list no-lines>
13+
<ion-list-header>
14+
Recent chat
15+
</ion-list-header>
16+
17+
<ion-item>
18+
<ion-avatar item-left>
19+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
20+
</ion-avatar>
21+
<ion-label>Abbey Christensen</ion-label>
22+
<ion-icon name="chatbubbles" item-right color="primary"></ion-icon>
23+
</ion-item>
24+
25+
<ion-item>
26+
<ion-avatar item-left>
27+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
28+
</ion-avatar>
29+
<ion-label>Alex Nelson</ion-label>
30+
<ion-icon name="chatbubbles" item-right color="primary"></ion-icon>
31+
</ion-item>
32+
33+
<ion-item>
34+
<ion-avatar item-left>
35+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
36+
</ion-avatar>
37+
<ion-label>Mary Johnson</ion-label>
38+
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
39+
</ion-item>
40+
41+
<ion-item>
42+
<ion-avatar item-left>
43+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
44+
</ion-avatar>
45+
<ion-label>Peter Carlsson</ion-label>
46+
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
47+
</ion-item>
48+
49+
<ion-item>
50+
<ion-avatar item-left>
51+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
52+
</ion-avatar>
53+
<ion-label>Trevor Hansen</ion-label>
54+
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
55+
</ion-item>
56+
</ion-list>
57+
58+
<ion-list no-lines>
59+
<ion-list-header>
60+
Previous chats
61+
</ion-list-header>
62+
63+
<ion-item>
64+
<ion-avatar item-left>
65+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
66+
</ion-avatar>
67+
<ion-label>Britta Holt</ion-label>
68+
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
69+
</ion-item>
70+
71+
<ion-item>
72+
<ion-avatar item-left>
73+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
74+
</ion-avatar>
75+
<ion-label>Sandra Adams</ion-label>
76+
<ion-icon name="chatbubbles" item-right color="light"></ion-icon>
77+
</ion-item>
78+
</ion-list>
79+
80+
</ion-content>
81+
82+
<style>
83+
img {
84+
height: 100px;
85+
}
86+
</style>

‎src/components/tabs/tabs.ios.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ $tabs-ios-tab-icon-size: 30px !default;
6060

6161
.tabs-ios .tab-button-text {
6262
margin-top: 0;
63-
margin-bottom: 0;
63+
margin-bottom: 1px;
6464

6565
min-height: $tabs-ios-tab-font-size + 1;
6666
}
@@ -70,6 +70,9 @@ $tabs-ios-tab-icon-size: 30px !default;
7070
}
7171

7272
.tabs-ios .tab-button-icon {
73+
margin-top: 4px;
74+
margin-bottom: 1px;
75+
7376
min-width: $tabs-ios-tab-icon-size + 5;
7477
height: $tabs-ios-tab-icon-size;
7578

‎src/components/tabs/tabs.wp.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,8 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
9494

9595
.tabs-wp[tabsLayout=icon-hide] .tab-button,
9696
.tabs-wp[tabsLayout=title-hide] .tab-button,
97-
.tab-button.icon-only,
98-
.tab-button.has-title-only {
97+
.tabs-wp .tab-button.icon-only,
98+
.tabs-wp .tab-button.has-title-only {
9999
padding: 6px 10px;
100100
}
101101

‎src/themes/ionic.theme.dark.ios.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,14 @@ $item-ios-divider-color: $text-color !default;
5959
// iOS Item
6060
// --------------------------------------------------
6161

62-
$item-ios-padding-top: 12px !default;
62+
$item-ios-padding-top: 11px !default;
6363
$item-ios-padding-right: 16px !default;
64-
$item-ios-padding-bottom: 13px !default;
64+
$item-ios-padding-bottom: 11px !default;
6565
$item-ios-padding-left: 16px !default;
6666
$item-ios-padding-media-top: 10px !default;
6767
$item-ios-padding-media-bottom: 10px !default;
68-
$item-ios-padding-icon-top: 10px !default;
69-
$item-ios-padding-icon-bottom: 9px !default;
68+
$item-ios-padding-icon-top: 9px !default;
69+
$item-ios-padding-icon-bottom: 8px !default;
7070

7171

7272
// iOS Toggle

‎src/themes/ionic.theme.default.ios.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ $list-ios-activated-background-color: #d9d9d9 !default;
4040
// iOS Item
4141
// --------------------------------------------------
4242

43-
$item-ios-padding-top: 12px !default;
43+
$item-ios-padding-top: 11px !default;
4444
$item-ios-padding-right: 16px !default;
45-
$item-ios-padding-bottom: 13px !default;
45+
$item-ios-padding-bottom: 11px !default;
4646
$item-ios-padding-left: 16px !default;
4747
$item-ios-padding-media-top: 8px !default;
4848
$item-ios-padding-media-bottom: 8px !default;
49-
$item-ios-padding-icon-top: 10px !default;
50-
$item-ios-padding-icon-bottom: 9px !default;
49+
$item-ios-padding-icon-top: 9px !default;
50+
$item-ios-padding-icon-bottom: 8px !default;

0 commit comments

Comments
 (0)