Skip to content

Commit 4b834bf

Browse files
simeonoffsimeonoff
authored
refactor(card): bundle styles with component (#15450)
1 parent bc808fa commit 4b834bf

File tree

21 files changed

+529
-40
lines changed

21 files changed

+529
-40
lines changed

‎projects/igniteui-angular/src/lib/banner/banner.component.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -599,7 +599,7 @@ export class IgxBannerSampleComponent {
599599
<igx-avatar
600600
src="https://www.infragistics.com/angular-demos/assets/images/card/avatars/brad_stanley.jpg">
601601
</igx-avatar>
602-
<h3 class="igx-card-header__title--small">Brad Stanley</h3>
602+
<h3 class="igx-card-header__title igx-card-header__title--small">Brad Stanley</h3>
603603
<h5 class="igx-card-header__subtitle">Audi AG</h5>
604604
</igx-card-header>
605605
<igx-card-content>

‎projects/igniteui-angular/src/lib/card/card.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/card/card.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
OnInit,
99
OnChanges,
1010
SimpleChanges,
11-
booleanAttribute
11+
booleanAttribute,
12+
ViewEncapsulation
1213
} from '@angular/core';
1314

1415
import { mkenum } from '../core/utils';
@@ -197,6 +198,8 @@ export class IgxCardFooterDirective {
197198
@Component({
198199
selector: 'igx-card',
199200
templateUrl: 'card.component.html',
201+
encapsulation: ViewEncapsulation.None,
202+
styleUrl: 'card.component.css',
200203
standalone: true
201204
})
202205
export class IgxCardComponent {

‎projects/igniteui-angular/src/lib/card/themes/_base.scss‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
@use 'igniteui-theming/sass/animations' as *;
2+
@use 'igniteui-theming/sass/bem' as *;
3+
@use 'igniteui-theming/sass/themes' as *;
4+
@use 'igniteui-theming/sass/typography' as *;
5+
@use 'styles/themes/standalone' as *;
6+
@use 'light/tokens' as *;
7+
8+
$theme: $material;
9+
10+
@include layer(base) {
11+
%actions {
12+
flex-direction: column;
13+
14+
[igxButton] ~ [igxButton] {
15+
margin-inline-start: 0;
16+
margin-top: rem(8px);
17+
}
18+
}
19+
20+
%actions--justified {
21+
justify-content: space-around;
22+
flex-grow: 1;
23+
24+
&:empty {
25+
display: none;
26+
}
27+
}
28+
29+
@include b(igx-card) {
30+
display: flex;
31+
flex-direction: column;
32+
overflow: hidden;
33+
border-radius: var-get($theme, 'border-radius');
34+
background: var-get($theme, 'background');
35+
transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
36+
backface-visibility: hidden;
37+
border: rem(1px) solid var-get($theme, 'outline-color');
38+
39+
&:hover {
40+
box-shadow: none;
41+
}
42+
43+
igx-avatar {
44+
--ig-size: 1;
45+
}
46+
47+
@include e(media) {
48+
display: block;
49+
overflow: hidden;
50+
line-height: 0;
51+
52+
> * {
53+
width: 100%;
54+
height: 100%;
55+
object-fit: cover;
56+
}
57+
}
58+
59+
@include e(media, $m: right) {
60+
width: auto;
61+
margin-inline-start: auto;
62+
order: 9999;
63+
}
64+
65+
@include m(elevated) {
66+
box-shadow: var-get($theme, 'resting-elevation');
67+
border: rem(1px) solid var-get($theme, 'outline-color');
68+
69+
&:hover {
70+
box-shadow: var-get($theme, 'hover-elevation');
71+
}
72+
}
73+
74+
@include m(horizontal) {
75+
flex-direction: row;
76+
}
77+
}
78+
79+
@include b(igx-card-header) {
80+
display: flex;
81+
flex-flow: row wrap;
82+
align-content: flex-start;
83+
width: 100%;
84+
padding: rem(16px, 16px);
85+
color: var-get($theme, 'header-text-color');
86+
87+
&:empty {
88+
display: block;
89+
padding: 0;
90+
}
91+
92+
@include e(thumbnail) {
93+
align-self: flex-start;
94+
margin-inline-end: rem(16px);
95+
96+
&:empty {
97+
display: none;
98+
}
99+
}
100+
101+
@include e(titles) {
102+
display: flex;
103+
flex-flow: column nowrap;
104+
overflow: hidden;
105+
flex: 1 1 auto;
106+
justify-content: center;
107+
108+
&:empty {
109+
display: none;
110+
}
111+
}
112+
113+
@include e(subtitle) {
114+
color: var-get($theme, 'subtitle-text-color');
115+
}
116+
117+
@include m(vertical) {
118+
flex-flow: column nowrap;
119+
120+
@include e(titles) {
121+
text-align: center;
122+
}
123+
124+
@include e(thumbnail) {
125+
display: flex;
126+
justify-content: center;
127+
align-self: unset;
128+
margin-inline-end: 0;
129+
margin-bottom: rem(16px);
130+
}
131+
}
132+
}
133+
134+
@include b(igx-card-content) {
135+
display: block;
136+
width: 100%;
137+
padding: rem(16px);
138+
color: var-get($theme, 'content-text-color');
139+
overflow: auto;
140+
}
141+
142+
@include b(igx-card-actions) {
143+
display: flex;
144+
flex-flow: row wrap;
145+
justify-content: space-between;
146+
align-items: center;
147+
padding: rem(8px);
148+
149+
&:first-child {
150+
margin-block-end: auto;
151+
}
152+
153+
&:last-child {
154+
margin-block-start: auto;
155+
}
156+
157+
@include e(start) {
158+
display: flex;
159+
align-items: center;
160+
order: 0;
161+
gap: rem(8px);
162+
163+
&:empty {
164+
display: none;
165+
}
166+
}
167+
168+
@include e(end) {
169+
display: flex;
170+
align-items: center;
171+
order: 1;
172+
color: var-get($theme, 'actions-text-color');
173+
margin-inline-start: auto;
174+
gap: rem(8px);
175+
176+
&:empty {
177+
display: none;
178+
}
179+
}
180+
181+
@include e(igroup) {
182+
display: flex;
183+
flex-flow: row nowrap;
184+
185+
.igx-icon-button {
186+
color: var-get($theme, 'actions-text-color');
187+
}
188+
}
189+
190+
@include e(igroup, $m: start) {
191+
margin-inline-end: auto;
192+
}
193+
194+
@include e(igroup, $m: end) {
195+
margin-inline-start: auto;
196+
}
197+
198+
@include e(bgroup) {
199+
display: flex;
200+
flex-flow: row nowrap;
201+
gap: rem(8px);
202+
}
203+
204+
@include m(vertical) {
205+
flex-direction: column;
206+
207+
&:is(:first-child, :last-child) {
208+
margin-block: initial;
209+
}
210+
211+
[dir='rtl'] & {
212+
order: -1;
213+
}
214+
215+
@include e(start) {
216+
@extend %actions;
217+
}
218+
219+
@include e(end) {
220+
@extend %actions;
221+
222+
margin-top: auto;
223+
margin-inline-start: 0;
224+
}
225+
}
226+
227+
@include m(reverse) {
228+
@include e(start) {
229+
order: 1;
230+
margin-inline-start: auto;
231+
}
232+
233+
@include e(end) {
234+
order: 0;
235+
margin-inline-start: 0;
236+
}
237+
}
238+
239+
@include mx(vertical, reverse) {
240+
@include e(start) {
241+
margin: 0;
242+
margin-top: auto;
243+
}
244+
245+
@include e(end) {
246+
margin: 0;
247+
margin-bottom: auto;
248+
}
249+
}
250+
251+
@include m(justify) {
252+
@include e(start) {
253+
@extend %actions--justified !optional;
254+
}
255+
256+
@include e(end) {
257+
@extend %actions--justified !optional;
258+
}
259+
}
260+
}
261+
}

‎projects/igniteui-angular/src/lib/card/themes/dark/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-card, $tokens, dark);

‎projects/igniteui-angular/src/lib/card/themes/dark/_tokens.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/card' as *;
3+
4+
$material: digest-schema($dark-material-card);
5+
$bootstrap: digest-schema($dark-bootstrap-card);
6+
$fluent: digest-schema($dark-fluent-card);
7+
$indigo: digest-schema($dark-indigo-card);

‎projects/igniteui-angular/src/lib/card/themes/light/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-card, $tokens, light);

‎projects/igniteui-angular/src/lib/card/themes/light/_tokens.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/card' as *;
3+
4+
$base: digest-schema($light-card);
5+
$material: digest-schema($material-card);
6+
$bootstrap: digest-schema($bootstrap-card);
7+
$fluent: digest-schema($fluent-card);
8+
$indigo: digest-schema($indigo-card);

‎projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/typography' as *;
3+
@use 'styles/themes/standalone' as *;
4+
5+
@include themed-block(igx-card-header, bootstrap) {
6+
@include e(title) {
7+
@include type-style(h5) {
8+
margin: 0;
9+
}
10+
}
11+
12+
@include e(title, $m: small) {
13+
@include type-style(subtitle-2) {
14+
margin: 0;
15+
}
16+
}
17+
18+
@include e(subtitle) {
19+
@include type-style(body-1) {
20+
margin: 0;
21+
}
22+
}
23+
}
24+
25+
@include themed-block(igx-card-content, bootstrap) {
26+
padding-block: rem(16px) rem(24px);
27+
padding-inline: rem(24px);
28+
29+
> *:not(igx-icon) {
30+
@include type-style(body-1) {
31+
margin: 0;
32+
}
33+
}
34+
}
35+
36+
@include themed-block(igx-card-actions, bootstrap) {
37+
padding: rem(16px);
38+
}

‎projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/typography' as *;
3+
@use 'styles/themes/standalone' as *;
4+
5+
@include themed-block(igx-card-header, fluent) {
6+
padding: rem(16px) rem(8px);
7+
8+
@include e(title) {
9+
@include type-style(subtitle-1) {
10+
margin: 0;
11+
}
12+
}
13+
14+
@include e(title, $m: small) {
15+
@include type-style(subtitle-2) {
16+
margin: 0;
17+
}
18+
}
19+
20+
@include e(subtitle) {
21+
@include type-style(body-2) {
22+
margin: 0;
23+
}
24+
}
25+
}
26+
27+
@include themed-block(igx-card-content, fluent) {
28+
> *:not(igx-icon) {
29+
@include type-style(body-2) {
30+
margin: 0;
31+
}
32+
}
33+
}

0 commit comments

Comments
 (0)