Skip to content

Commit ee3decc

Browse files
brandyscarneyadamdbradley
brandyscarney
authored and
adamdbradley
committed
fix(colors): override element styling and tweak colors for card and item
* refactor(card): add color/mode classes to header, title, content - Remove native HTML element styling inside of cards (headings, paragraph) - Move the default color for the HTML elements to the content - Generate colors for the card itself, the header, the content, and the title using the color input - Add e2e test for card colors References #8330 * refactor(item): remove paragraph styles, update activated colors - Adds test for item colors - Removes the color from native paragraph elements allowing colors to be passed Closes #9081 * refactor(item): bring back paragraph color and override in the item loop * refactor(card): add back heading and paragraph colors and override in color loop
1 parent 898ac3e commit ee3decc

File tree

13 files changed

+535
-18
lines changed

13 files changed

+535
-18
lines changed

‎src/components/card/card.ios.scss

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,23 +102,23 @@ $card-ios-header-color: #333 !default;
102102
border: 0;
103103
}
104104

105-
.card-ios ion-card-content {
105+
.card-content-ios {
106106
padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
107107

108108
font-size: $card-ios-font-size;
109109
line-height: 1.4;
110110
}
111111

112-
.card-ios ion-card-header {
112+
.card-header-ios {
113113
padding: $card-ios-header-padding;
114114

115115
font-size: $card-ios-header-font-size;
116116
font-weight: $card-ios-header-font-weight;
117117
color: $card-ios-header-color;
118118
}
119119

120-
.card-ios ion-card-header + ion-card-content,
121-
.card-ios .item + ion-card-content {
120+
.card-header-ios + .card-content-ios,
121+
.card-ios .item + .card-content-ios {
122122
padding-top: 0;
123123
}
124124

@@ -127,7 +127,7 @@ $card-ios-header-color: #333 !default;
127127
font-size: 1.3rem;
128128
}
129129

130-
.card-ios ion-card-title {
130+
.card-title-ios {
131131
display: block;
132132

133133
margin: $card-ios-title-margin;
@@ -172,3 +172,42 @@ $card-ios-header-color: #333 !default;
172172
.card-ios + ion-card {
173173
margin-top: 0;
174174
}
175+
176+
177+
// Generate iOS Card Colors
178+
// --------------------------------------------------
179+
180+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
181+
182+
.card-ios .text-ios-#{$color-name} {
183+
color: $color-base;
184+
}
185+
186+
.card-ios-#{$color-name} {
187+
color: $color-contrast;
188+
background-color: $color-base;
189+
190+
.card-header-ios,
191+
.card-title-ios,
192+
.card-content-ios,
193+
p {
194+
color: $color-contrast;
195+
}
196+
197+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
198+
.text-ios-#{$color-name},
199+
.card-header-ios-#{$color-name},
200+
.card-title-ios-#{$color-name},
201+
.card-content-ios-#{$color-name} {
202+
color: $color-base;
203+
}
204+
}
205+
}
206+
207+
.card-header-ios-#{$color-name},
208+
.card-title-ios-#{$color-name},
209+
.card-content-ios-#{$color-name} {
210+
color: $color-base;
211+
}
212+
213+
}

‎src/components/card/card.md.scss

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,22 +107,22 @@ $card-md-header-color: #222 !default;
107107
border: 0;
108108
}
109109

110-
.card-md ion-card-content {
110+
.card-content-md {
111111
padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
112112

113113
font-size: $card-md-font-size;
114114
line-height: $card-md-line-height;
115115
}
116116

117-
.card-md ion-card-header {
117+
.card-header-md {
118118
padding: $card-md-header-padding;
119119

120120
font-size: $card-md-header-font-size;
121121
color: $card-md-header-color;
122122
}
123123

124-
.card-md ion-card-header + ion-card-content,
125-
.card-md .item + ion-card-content {
124+
.card-header-md + .card-content-md,
125+
.card-md .item + .card-content-md {
126126
padding-top: 0;
127127
}
128128

@@ -131,7 +131,7 @@ $card-md-header-color: #222 !default;
131131
font-size: 1.3rem;
132132
}
133133

134-
.card-md ion-card-title {
134+
.card-title-md {
135135
display: block;
136136

137137
margin: $card-md-title-margin;
@@ -181,3 +181,48 @@ $card-md-header-color: #222 !default;
181181
.card-md + ion-card {
182182
margin-top: 0;
183183
}
184+
185+
186+
// Generate Material Design Card Colors
187+
// --------------------------------------------------
188+
189+
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
190+
191+
.card-md .text-md-#{$color-name} {
192+
color: $color-base;
193+
}
194+
195+
.card-md-#{$color-name} {
196+
color: $color-contrast;
197+
background-color: $color-base;
198+
199+
.card-header-md,
200+
.card-title-md,
201+
.card-content-md,
202+
h1,
203+
h2,
204+
h3,
205+
h4,
206+
h5,
207+
h6,
208+
p {
209+
color: $color-contrast;
210+
}
211+
212+
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
213+
.text-md-#{$color-name},
214+
.card-header-md-#{$color-name},
215+
.card-title-md-#{$color-name},
216+
.card-content-md-#{$color-name} {
217+
color: $color-base;
218+
}
219+
}
220+
}
221+
222+
.card-header-md-#{$color-name},
223+
.card-title-md-#{$color-name},
224+
.card-content-md-#{$color-name} {
225+
color: $color-base;
226+
}
227+
228+
}

‎src/components/card/card.ts

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,31 @@ export class Card extends Ion {
4343
@Directive({
4444
selector: 'ion-card-content'
4545
})
46-
export class CardContent {}
46+
export class CardContent extends Ion {
47+
48+
/**
49+
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
50+
*/
51+
@Input()
52+
set color(val: string) {
53+
this._setColor('card-content', val);
54+
}
55+
56+
/**
57+
* @input {string} The mode to apply to this component.
58+
*/
59+
@Input()
60+
set mode(val: string) {
61+
this._setMode('card-content', val);
62+
}
63+
64+
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
65+
super(config, elementRef, renderer);
66+
67+
this.mode = config.get('mode');
68+
}
69+
70+
}
4771

4872

4973
/**
@@ -52,12 +76,60 @@ export class CardContent {}
5276
@Directive({
5377
selector: 'ion-card-header'
5478
})
55-
export class CardHeader {}
79+
export class CardHeader extends Ion {
80+
81+
/**
82+
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
83+
*/
84+
@Input()
85+
set color(val: string) {
86+
this._setColor('card-header', val);
87+
}
88+
89+
/**
90+
* @input {string} The mode to apply to this component.
91+
*/
92+
@Input()
93+
set mode(val: string) {
94+
this._setMode('card-header', val);
95+
}
96+
97+
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
98+
super(config, elementRef, renderer);
99+
100+
this.mode = config.get('mode');
101+
}
102+
103+
}
56104

57105
/**
58106
* @private
59107
*/
60108
@Directive({
61109
selector: 'ion-card-title'
62110
})
63-
export class CardTitle {}
111+
export class CardTitle extends Ion {
112+
113+
/**
114+
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
115+
*/
116+
@Input()
117+
set color(val: string) {
118+
this._setColor('card-title', val);
119+
}
120+
121+
/**
122+
* @input {string} The mode to apply to this component.
123+
*/
124+
@Input()
125+
set mode(val: string) {
126+
this._setMode('card-title', val);
127+
}
128+
129+
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
130+
super(config, elementRef, renderer);
131+
132+
this.mode = config.get('mode');
133+
}
134+
135+
}

‎src/components/card/card.wp.scss

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,22 +108,23 @@ $card-wp-header-color: #222 !default;
108108
border: 0;
109109
}
110110

111-
.card-wp ion-card-content {
111+
.card-content-wp {
112112
padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left;
113113

114114
font-size: $card-wp-font-size;
115115
line-height: $card-wp-line-height;
116116
}
117117

118-
.card-wp ion-card-header {
118+
.card-header-wp {
119119
padding: $card-wp-header-padding;
120120

121121
font-size: $card-wp-header-font-size;
122+
122123
color: $card-wp-header-color;
123124
}
124125

125-
.card-wp ion-card-header + ion-card-content,
126-
.card-wp .item + ion-card-content {
126+
.card-header-wp + .card-content-wp,
127+
.card-wp .item + .card-content-wp {
127128
padding-top: 0;
128129
}
129130

@@ -132,7 +133,7 @@ $card-wp-header-color: #222 !default;
132133
font-size: 1.3rem;
133134
}
134135

135-
.card-wp ion-card-title {
136+
.card-title-wp {
136137
display: block;
137138

138139
margin: $card-wp-title-margin;
@@ -182,3 +183,48 @@ $card-wp-header-color: #222 !default;
182183
.card-wp + ion-card {
183184
margin-top: 0;
184185
}
186+
187+
188+
// Generate Windows Card Colors
189+
// --------------------------------------------------
190+
191+
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
192+
193+
.card-wp .text-wp-#{$color-name} {
194+
color: $color-base;
195+
}
196+
197+
.card-wp-#{$color-name} {
198+
color: $color-contrast;
199+
background-color: $color-base;
200+
201+
.card-header-wp,
202+
.card-title-wp,
203+
.card-content-wp,
204+
h1,
205+
h2,
206+
h3,
207+
h4,
208+
h5,
209+
h6,
210+
p {
211+
color: $color-contrast;
212+
}
213+
214+
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
215+
.text-wp-#{$color-name},
216+
.card-header-wp-#{$color-name},
217+
.card-title-wp-#{$color-name},
218+
.card-content-wp-#{$color-name} {
219+
color: $color-base;
220+
}
221+
}
222+
}
223+
224+
.card-header-wp-#{$color-name},
225+
.card-title-wp-#{$color-name},
226+
.card-content-wp-#{$color-name} {
227+
color: $color-base;
228+
}
229+
230+
}

‎src/components/card/test/colors/app-module.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
10+
@Component({
11+
template: '<ion-nav [root]="rootPage"></ion-nav>'
12+
})
13+
export class E2EApp {
14+
rootPage = E2EPage;
15+
}
16+
17+
@NgModule({
18+
declarations: [
19+
E2EApp,
20+
E2EPage
21+
],
22+
imports: [
23+
IonicModule.forRoot(E2EApp)
24+
],
25+
bootstrap: [IonicApp],
26+
entryComponents: [
27+
E2EPage
28+
]
29+
})
30+
export class AppModule {}

‎src/components/card/test/colors/e2e.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

0 commit comments

Comments
 (0)