Skip to content

Commit c08969d

Browse files
adrianptrvadrianptrv
committed
feat(samples): add SASS selectors
1 parent 0b30955 commit c08969d

8 files changed

Lines changed: 157 additions & 25 deletions

File tree

‎src/app/data-display/chip/chip-styling/chip-styling.component.scss‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@use "layout.scss";
2+
@use "igniteui-angular/theming" as *;
3+
4+
// CSS only approach
25

36
igx-chip {
47
--text-color: #fff;
@@ -19,13 +22,13 @@ igx-chip[id='2'] {
1922
--focus-background: #9f1717;
2023
}
2124

22-
igx-chip[id='3']{
25+
igx-chip[id='3'] {
2326
--background: #3b5999;
2427
--hover-background: #3b5999;
2528
--focus-background: #2c4378;
2629
}
2730

28-
igx-chip[id='4']{
31+
igx-chip[id='4'] {
2932
--background: #55acee;
3033
--hover-background: #55acee;
3134
--focus-background: #4682af;
@@ -34,4 +37,16 @@ igx-chip[id='4']{
3437
igx-icon.igx-icon {
3538
width: 0.75rem;
3639
height: 0.75rem;
37-
}
40+
}
41+
42+
// SASS approach
43+
44+
// $custom-chip-theme: chip-theme(
45+
// $background: #cd201f,
46+
// $text-color: #fff,
47+
// $hover-background: #cd201f,
48+
// $focus-background: #9f1717,
49+
// );
50+
51+
// @include css-vars($custom-chip-theme)
52+

‎src/app/data-display/chip/chip-styling/chip-styling.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component, inject } from '@angular/core';
1+
import { ChangeDetectorRef, Component, inject } from '@angular/core';
22
import { IBaseChipEventArgs, IChipsAreaReorderEventArgs, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxIconService } from 'igniteui-angular';
33

44

‎src/app/data-entries/buttons/buttons-style/buttons-style.component.scss‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@use "layout.scss";
2-
2+
@use "igniteui-angular/theming" as *;
3+
4+
// CSS only approach
5+
36
.buttons-sample-1 .igx-button--contained {
47
--background: #000;
58
--hover-background: #000000bf;
@@ -321,4 +324,22 @@
321324

322325
.button-sample .igx-button {
323326
--ig-font-family: 'alibaba-sans', sans-serif;
324-
}
327+
}
328+
329+
// SASS approach
330+
331+
// $custom-button-theme: button-theme(
332+
// $background: #f9f0ff,
333+
// $foreground: #722ed1,
334+
// $border-color: #722ed1,
335+
// $hover-background: #efdbff,
336+
// $hover-foreground: #9254de,
337+
// $hover-border-color: #9254de,
338+
// $active-border-color: #531dab,
339+
// $active-foreground: #531dab,
340+
// $focus-visible-background: #f9f0ff,
341+
// );
342+
343+
// .button-sample {
344+
// @include css-vars($custom-button-theme)
345+
// }

‎src/app/data-entries/checkbox/checkbox-styling/checkbox-styling.component.scss‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@use "layout.scss";
2-
2+
@use "igniteui-angular/theming" as *;
3+
4+
// CSS only approach
5+
36
igx-checkbox {
47
--tick-color: #0064d9;
58
--tick-color-hover: #e3f0ff;
@@ -19,4 +22,20 @@ igx-checkbox:hover {
1922
#checkbox-1.igx-checkbox--focused:after {
2023
inset: 8px -4px 8px 8px;
2124
border-radius: 8px;
22-
}
25+
}
26+
27+
// SASS approach
28+
29+
// $custom-checkbox-theme: checkbox-theme(
30+
// $tick-color: #0064d9,
31+
// $tick-color-hover: #e3f0ff,
32+
// $fill-color: transparent,
33+
// $fill-color-hover: #e3f0ff,
34+
// $label-color: #131e29,
35+
// $focus-outline-color: #0032a5,
36+
// $empty-color: #131e29,
37+
// $border-radius: 0.25rem,
38+
// );
39+
40+
// @include css-vars($custom-checkbox-theme)
41+

‎src/app/data-entries/radio/radio-styling-sample/radio-styling-sample.component.scss‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@use "layout.scss";
2+
@use "igniteui-angular/theming" as *;
3+
4+
// CSS only approach
25

36
igx-radio {
47
--empty-color: #556b81;
@@ -19,4 +22,17 @@ igx-radio:hover {
1922
igx-radio.igx-radio--focused::after {
2023
inset: 1px -4px 1px -2px;
2124
border-radius: 8px;
22-
}
25+
}
26+
27+
// SASS approach
28+
29+
// $custom-radio-theme: radio-theme(
30+
// $empty-color: #556b81,
31+
// $label-color: #131e29,
32+
// $fill-color: #0064d9,
33+
// $focus-outline-color: #0032a5,
34+
// $fill-color-hover: #0064d9,
35+
// $hover-color: transparent
36+
// );
37+
38+
// @include css-vars($custom-radio-theme);

‎src/app/data-entries/switch/switch-styling/switch-styling.component.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@use "layout.scss";
2+
@use "igniteui-angular/theming" as *;
3+
4+
// CSS only approach
25

36
igx-switch {
47
--thumb-on-color: #e3f0ff;
@@ -17,3 +20,22 @@ igx-switch {
1720
igx-switch:hover {
1821
--track-off-color: #637d97;
1922
}
23+
24+
// SASS approach
25+
26+
// $custom-switch-theme: switch-theme(
27+
// $thumb-on-color: #e3f0ff,
28+
// $track-on-color: #0064d9,
29+
// $track-on-hover-color: #0058bf,
30+
// $thumb-off-color: #fff,
31+
// $track-off-color: #788fa6,
32+
// $border-radius-track: 1rem,
33+
// $focus-outline-color: #0032a5,
34+
// $border-on-color: transparent,
35+
// $border-on-hover-color: transparent,
36+
// $border-color: transparent,
37+
// $border-hover-color: transparent,
38+
// );
39+
40+
// @include css-vars($custom-switch-theme)
41+

‎src/app/layouts/card/card-styling-sample/card-styling-sample.component.scss‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
@use "layout.scss";
2+
@use "igniteui-angular/theming" as *;
23

3-
igx-chip {
4-
--border-radius: 4px;
5-
--background: #fafafa;
6-
--border-color: #d9d9d9;
7-
--ig-body-2-font-size: 0.75rem;
8-
--hover-background: #d9d9d9;
9-
--focus-background: #d9d9d9;
10-
}
4+
// CSS only approach
115

126
igx-card {
137
--border-radius: 8px;
@@ -42,6 +36,15 @@ igx-card {
4236
}
4337
}
4438

39+
igx-chip {
40+
--border-radius: 4px;
41+
--background: #fafafa;
42+
--border-color: #d9d9d9;
43+
--ig-body-2-font-size: 0.75rem;
44+
--hover-background: #d9d9d9;
45+
--focus-background: #d9d9d9;
46+
}
47+
4548
.igx-icon-button--flat {
4649
--foreground: #00000073;
4750
--hover-foreground: #1677ff;
@@ -50,4 +53,41 @@ igx-card {
5053

5154
igx-divider {
5255
--color: #f0f0f0
53-
}
56+
}
57+
58+
// SASS approach
59+
60+
// $custom-card-theme: card-theme(
61+
// $border-radius: 8px,
62+
// $outline-color: #f0f0f0,
63+
// $resting-shadow: none,
64+
// $hover-shadow: none,
65+
// $header-text-color: #000000e0,
66+
// );
67+
68+
// $custom-chip-theme: chip-theme(
69+
// $border-radius: 4px,
70+
// $background: #fafafa,
71+
// $border-color: #d9d9d9,
72+
// $hover-background: #d9d9d9,
73+
// $focus-background: #d9d9d9,
74+
// );
75+
76+
// $custom-icon-button-theme: icon-button-theme(
77+
// $foreground: #00000073,
78+
// $hover-foreground: #1677ff,
79+
// $hover-background: none,
80+
// $border-color: transparent
81+
// );
82+
83+
// $custom-divider-theme: divider-theme(
84+
// $color: #f0f0f0
85+
// );
86+
87+
// @include css-vars($custom-card-theme);
88+
// @include css-vars($custom-chip-theme);
89+
// @include css-vars($custom-divider-theme);
90+
// .igx-icon-button--flat {
91+
// @include css-vars($custom-icon-button-theme);
92+
// };
93+

‎src/app/layouts/card/card-styling-sample/card-styling-sample.component.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ import { IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCar
1111
})
1212
export class CardStylingSampleComponent {
1313

14-
private iconService = inject(IgxIconService)
14+
private iconService = inject(IgxIconService)
1515

16-
public ngOnInit() {
16+
public ngOnInit() {
1717

18-
this.iconService.addSvgIconFromText('settings-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg>');
18+
this.iconService.addSvgIconFromText('settings-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg>');
1919

20-
this.iconService.addSvgIconFromText('edit-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg>');
20+
this.iconService.addSvgIconFromText('edit-custom', '<svg viewBox="64 64 896 896" focusable="false" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg>');
2121

22-
this.iconService.addSvgIconFromText('dots', '<svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg>');
22+
this.iconService.addSvgIconFromText('dots', '<svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg>');
2323

24-
}
24+
}
2525

2626

2727
public card = new Card({
@@ -30,4 +30,3 @@ export class CardStylingSampleComponent {
3030
title: 'Card title'
3131
});
3232
}
33-
// icons: ['settings', 'border_color', 'more_horiz'],

0 commit comments

Comments
 (0)