Skip to content

Commit 5ed2201

Browse files
brandyscarneybrandyscarney
committed
fix(card): add custom CSS properties and remove css overrides on item
references ionic-team#14850 references ionic-team#14808 fixes ionic-team#9198 fixes ionic-team#12646
1 parent 1ad9818 commit 5ed2201

File tree

5 files changed

+171
-63
lines changed

5 files changed

+171
-63
lines changed

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

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
// --------------------------------------------------
66

77
:host {
8-
--ion-color-base: var(--ion-item-background-color, transparent);
9-
--ion-color-contrast: #{$card-ios-text-color};
8+
--background: var(--ion-item-background-color, transparent);
9+
--color: #{$card-ios-text-color};
1010

1111
@include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
1212
@include border-radius($card-ios-border-radius);
@@ -20,22 +20,3 @@
2020

2121
box-shadow: $card-ios-box-shadow;
2222
}
23-
24-
::slotted(*) ion-list {
25-
@include margin(null, null, 0, null);
26-
}
27-
28-
29-
::slotted(*) .item {
30-
--border-width: 0;
31-
--inner-border-width: 0;
32-
}
33-
34-
35-
// .card .note-ios {
36-
// font-size: 13px;
37-
// }
38-
39-
// .card-ios + ion-card {
40-
// @include margin(0, null, null, null);
41-
// }

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

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
// --------------------------------------------------
66

77
:host {
8-
--ion-color-base: var(--ion-item-background-color, transparent);
9-
--ion-color-contrast: #{$card-md-text-color};
8+
--background: var(--ion-item-background-color, transparent);
9+
--color: #{$card-md-text-color};
1010

1111
@include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
1212
@include border-radius($card-md-border-radius);
@@ -18,24 +18,3 @@
1818

1919
box-shadow: $card-md-box-shadow;
2020
}
21-
22-
::slotted(*) ion-list {
23-
@include margin(null, null, 0, null);
24-
}
25-
26-
::slotted(*) .item {
27-
--border-width: 0;
28-
}
29-
30-
::slotted(*) .item:last-child {
31-
--border-width: 0;
32-
--inner-border-width: 0;
33-
}
34-
35-
.card .note-md {
36-
font-size: 13px;
37-
}
38-
39-
:host + ion-card {
40-
@include margin(0, null, null, null);
41-
}

‎core/src/components/card/card.scss

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,44 @@
44
// --------------------------------------------------
55

66
:host {
7+
/**
8+
* @prop --background: Background of the card
9+
* @prop --color: Color of the card
10+
*/
11+
712
@include font-smoothing();
813

914
display: block;
1015
position: relative;
1116

12-
background: #{current-color(base)};
13-
color: #{current-color(contrast)};
17+
background: var(--background);
18+
color: var(--color);
1419

1520
overflow: hidden;
1621
}
1722

23+
// Card Colors
24+
// ---------------------------------------------
25+
26+
:host(.ion-color) {
27+
background: current-color(base);
28+
color: current-color(contrast);
29+
}
30+
1831
:host(.ion-color)::slotted(*) ion-card-title,
1932
:host(.ion-color)::slotted(*) ion-card-subtitle {
2033
color: currentColor;
2134
}
2235

36+
// Slotted Content
37+
// ---------------------------------------------
38+
2339
::slotted(*) img {
2440
display: block;
2541

2642
width: 100%;
2743
}
44+
45+
::slotted(*) ion-list {
46+
@include margin(0);
47+
}

‎core/src/components/card/test/basic/index.html

Lines changed: 46 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</ion-card>
3333

3434
<ion-card>
35-
<ion-item>
35+
<ion-item lines="none">
3636
<ion-icon name="pin" slot="start"></ion-icon>
3737
<ion-label>ion-item in a card, icon left, button right</ion-label>
3838
<ion-button fill="outline" slot="end">View</ion-button>
@@ -43,26 +43,55 @@
4343
</ion-card-content>
4444
</ion-card>
4545

46+
<ion-card color="secondary">
47+
<ion-card-header>
48+
<ion-card-subtitle>Subtitle</ion-card-subtitle>
49+
<ion-card-title>Title</ion-card-title>
50+
</ion-card-header>
51+
52+
<ion-card-content>
53+
This is content, without any paragraph or header tags, within an ion-card-content element.
54+
</ion-card-content>
55+
</ion-card>
56+
4657
<ion-card>
47-
<ion-item href="#" class="activated">
48-
<ion-icon name="wifi" slot="start"></ion-icon>
49-
<ion-label>Card Link Item 1 .activated</ion-label>
50-
</ion-item>
58+
<ion-card-content>
59+
<h1>Heading 1</h1>
60+
<h2>Heading 2</h2>
61+
<h3>Heading 3</h3>
62+
<h4>Heading 4</h4>
63+
<h5>Heading 5</h5>
64+
<h6>Heading 6</h6>
65+
<p>Paragraph</p>
66+
</ion-card-content>
67+
</ion-card>
5168

52-
<ion-item href="#">
53-
<ion-icon name="wine" slot="start"></ion-icon>
54-
<ion-label>Card Link Item 2</ion-label>
55-
</ion-item>
69+
<ion-card>
70+
<ion-list lines="none">
71+
<ion-item href="#" class="activated">
72+
<ion-icon name="wifi" slot="start"></ion-icon>
73+
<ion-label>Link Item .activated</ion-label>
74+
<ion-note>More</ion-note>
75+
</ion-item>
5676

57-
<ion-item class="activated">
58-
<ion-icon name="warning" slot="start"></ion-icon>
59-
<ion-label>Card Button Item 1 .activated</ion-label>
60-
</ion-item>
77+
<ion-item href="#">
78+
<ion-icon name="wine" slot="start"></ion-icon>
79+
<ion-label>Link Item</ion-label>
80+
<ion-note>More</ion-note>
81+
</ion-item>
6182

62-
<ion-item>
63-
<ion-icon name="walk" slot="start"></ion-icon>
64-
<ion-label>Card Button Item 2</ion-label>
65-
</ion-item>
83+
<ion-item button class="activated">
84+
<ion-icon name="warning" slot="start"></ion-icon>
85+
<ion-label>Button Item .activated</ion-label>
86+
<ion-note>More</ion-note>
87+
</ion-item>
88+
89+
<ion-item button>
90+
<ion-icon name="walk" slot="start"></ion-icon>
91+
<ion-label>Button Item</ion-label>
92+
<ion-note>More</ion-note>
93+
</ion-item>
94+
</ion-list>
6695
</ion-card>
6796
</ion-content>
6897

‎core/src/components/card/test/standalone/index.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,104 @@
3030
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
3131
</ion-card-content>
3232
</ion-card>
33+
34+
<!-- Colors-->
35+
<ion-card class="custom">
36+
<ion-card-header>
37+
<ion-card-subtitle>
38+
Subtitle
39+
</ion-card-subtitle>
40+
<ion-card-title>
41+
Title
42+
</ion-card-title>
43+
</ion-card-header>
44+
45+
<ion-card-content>
46+
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
47+
</ion-card-content>
48+
</ion-card>
49+
50+
<ion-card class="custom2">
51+
<ion-card-header>
52+
<ion-card-subtitle>
53+
Subtitle
54+
</ion-card-subtitle>
55+
<ion-card-title>
56+
Title
57+
</ion-card-title>
58+
</ion-card-header>
59+
60+
<ion-card-content>
61+
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
62+
</ion-card-content>
63+
</ion-card>
64+
65+
<ion-card color="secondary">
66+
<ion-card-header>
67+
<ion-card-subtitle>
68+
Subtitle
69+
</ion-card-subtitle>
70+
<ion-card-title>
71+
Title
72+
</ion-card-title>
73+
</ion-card-header>
74+
75+
<ion-card-content>
76+
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
77+
</ion-card-content>
78+
</ion-card>
79+
80+
<ion-card color="danger">
81+
<ion-card-header>
82+
<ion-card-subtitle>
83+
Subtitle
84+
</ion-card-subtitle>
85+
<ion-card-title>
86+
Title
87+
</ion-card-title>
88+
</ion-card-header>
89+
90+
<ion-card-content>
91+
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
92+
</ion-card-content>
93+
</ion-card>
94+
95+
<ion-card color="light">
96+
<ion-card-header>
97+
<ion-card-subtitle>
98+
Subtitle
99+
</ion-card-subtitle>
100+
<ion-card-title>
101+
Title
102+
</ion-card-title>
103+
</ion-card-header>
104+
105+
<ion-card-content>
106+
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
107+
</ion-card-content>
108+
</ion-card>
109+
110+
<style>
111+
.custom {
112+
--background: #f6f6f6;
113+
--color: orange;
114+
}
115+
116+
.custom ion-card-subtitle,
117+
.custom ion-card-title {
118+
--color: orange;
119+
}
120+
121+
.custom2 {
122+
--background: url(https://images.unsplash.com/photo-1503756234508-e32369269deb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=47b63db904d2c72377ffc588f645eb45&auto=format&fit=crop&w=975&q=80) center 20%;
123+
--color: white;
124+
text-shadow: 2px 2px 6px black;
125+
}
126+
127+
.custom2 ion-card-subtitle,
128+
.custom2 ion-card-title {
129+
--color: white;
130+
}
131+
</style>
33132
</body>
34133
</html>

0 commit comments

Comments
 (0)