Skip to content

Commit 72a060f

Browse files
simeonoffsimeonoff
authored
refactor(*): utilize custom indigo icons when indigo theme is used (#14520)
1 parent 4c87cd4 commit 72a060f

File tree

18 files changed

+397
-82
lines changed

18 files changed

+397
-82
lines changed

‎projects/igniteui-angular/src/lib/checkbox/checkbox.component.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,16 @@
2525
class="igx-checkbox__composite-wrapper"
2626
>
2727
<span #label class="igx-checkbox__composite">
28-
<svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
29-
<path d="M4.1,12.7 9,17.6 20.3,6.3" />
30-
</svg>
28+
@if (theme === 'indigo') {
29+
<svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
30+
<rect width="18" height="4" x="2" y="9" rx="1.85"/>
31+
<path d="M19.033 5a1.966 1.966 0 0 0-1.418.586l-8.479 8.577-2.753-2.77a1.971 1.971 0 0 0-2.8 0 1.998 1.998 0 0 0 0 2.822l4.155 4.196a1.955 1.955 0 0 0 2.8 0l9.879-9.99a1.998 1.998 0 0 0 0-2.821 1.966 1.966 0 0 0-1.384-.6Z"/>
32+
</svg>
33+
} @else {
34+
<svg class="igx-checkbox__composite-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
35+
<path d="M4.1,12.7 9,17.6 20.3,6.3"/>
36+
</svg>
37+
}
3138
</span>
3239

3340
<div class="igx-checkbox__ripple"></div>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { IBaseEventArgs, mkenum } from '../core/utils';
2020
import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
2121
import { noop, Subject } from 'rxjs';
2222
import { takeUntil } from 'rxjs/operators';
23+
import { IgxTheme, ThemeService } from '../services/theme/theme.service';
2324

2425
export const LabelPosition = /*@__PURE__*/mkenum({
2526
BEFORE: 'before',
@@ -428,11 +429,20 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
428429
*/
429430
private _required = false;
430431

432+
/**
433+
* @hidden
434+
* @internal
435+
*/
436+
protected theme: IgxTheme = 'material';
437+
431438
constructor(
432439
protected cdr: ChangeDetectorRef,
433440
protected renderer: Renderer2,
441+
protected themeService: ThemeService,
434442
@Optional() @Self() public ngControl: NgControl,
435443
) {
444+
this.theme = this.themeService?.globalTheme;
445+
436446
if (this.ngControl !== null) {
437447
this.ngControl.valueAccessor = this;
438448
}

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,20 @@
303303
@if $variant == 'material' {
304304
inset-inline-start: -.5px;
305305
}
306+
307+
@if $variant == 'indigo' {
308+
stroke: unset;
309+
stroke-linecap: unset;
310+
stroke-width: unset;
311+
stroke-dasharray: unset;
312+
stroke-dashoffset: unset;
313+
fill: var-get($theme, 'tick-color');
314+
transition: none !important;
315+
316+
rect {
317+
fill: none;
318+
}
319+
}
306320
}
307321

308322
%igx-checkbox--indeterminate {
@@ -363,6 +377,19 @@
363377
}
364378
}
365379
}
380+
381+
@if $variant == 'indigo' {
382+
%cbx-composite-mark {
383+
fill: none;
384+
stroke-dashoffset: unset !important;
385+
transform: none !important;
386+
387+
rect {
388+
fill: var-get($theme, 'tick-color');
389+
opacity: 1;
390+
}
391+
}
392+
}
366393
}
367394

368395
%igx-checkbox--indeterminate--invalid {

‎projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@
221221

222222
@if $variant == 'indigo' {
223223
igx-icon {
224-
--component-size: 1;
224+
--component-size: 2;
225225
}
226226
}
227227
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,13 @@
8080
cursor: pointer;
8181

8282
igx-icon {
83-
width: var(--igx-icon-size, #{rem(15px)});
84-
height: var(--igx-icon-size, #{rem(15px)});
85-
font-size: var(--igx-icon-size, #{rem(15px)});
83+
@if $variant == 'indigo' {
84+
--component-size: 2;
85+
} @else {
86+
width: var(--igx-icon-size, #{rem(15px)});
87+
height: var(--igx-icon-size, #{rem(15px)});
88+
font-size: var(--igx-icon-size, #{rem(15px)});
89+
}
8690
}
8791
}
8892

@@ -227,10 +231,12 @@
227231
}
228232

229233
igx-icon {
234+
--component-size: #{if($variant == 'indigo', 2, var(--grid-size))};
235+
230236
display: initial;
231-
width: var(--igx-icon-size, #{rem(18px)});
232-
height: var(--igx-icon-size, #{rem(18px)});
233-
font-size: var(--igx-icon-size, #{rem(18px)});
237+
width: var(--size) !important;
238+
height: var(--size) !important;
239+
font-size: var(--size) !important;
234240
}
235241
}
236242

@@ -297,8 +303,10 @@
297303
color: var-get($theme, 'excel-filtering-actions-hover-foreground');
298304
}
299305

300-
igx-icon {
301-
--component-size: 3;
306+
@if $variant == 'indigo' {
307+
igx-icon {
308+
--component-size: 2;
309+
}
302310
}
303311

304312
[dir='rtl'] & {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 50 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -691,7 +691,7 @@
691691
compact: rem(12px)
692692
);
693693

694-
$hierarchical-action-icon: rem(24px);
694+
$hierarchical-action-icon: if($variant == 'indigo', rem(16px), rem(24px));
695695

696696
$hierarchical-indent: (
697697
comfortable: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon}),
@@ -723,7 +723,13 @@
723723
compact: rem(12px)
724724
);
725725

726-
$indicator-icon-width: rem(24px);
726+
$indicator-icon-width: map.get((
727+
'material': rem(24px),
728+
'fluent': rem(24px),
729+
'bootstrap': rem(24px),
730+
'indigo': rem(16px),
731+
), $variant);
732+
727733
$drag-icon-size: rem(24px);
728734
$grouping-padding-right: rem(12px);
729735

@@ -1126,10 +1132,7 @@
11261132

11271133
%igx-grid__header-indentation {
11281134
igx-icon {
1129-
--component-size: var(--ig-size, var(--ig-size-large));
1130-
font-size: rem(24px);
1131-
width: rem(24px);
1132-
height: rem(24px);
1135+
--component-size: #{if($variant == 'indigo', 2, 3)};
11331136
}
11341137
}
11351138

@@ -1391,18 +1394,14 @@
13911394
);
13921395
padding-block: 0;
13931396
flex: 1 0 auto;
1394-
// Fix for IE 11
1395-
min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable});
13961397
background: inherit;
13971398
z-index: 4;
13981399
cursor: move;
13991400
border-inline-end: rem(1px) solid transparent;
14001401
background-clip: border-box;
14011402

14021403
igx-icon {
1403-
width: var(--igx-icon-size, #{$drag-icon-size});
1404-
height: var(--igx-icon-size, #{$drag-icon-size});
1405-
font-size: var(--igx-icon-size, #{$drag-icon-size});
1404+
--component-size: #{if($variant == 'indigo', 2, 3)};
14061405
}
14071406
}
14081407

@@ -1458,9 +1457,7 @@
14581457

14591458
%igx-grid__td--bool {
14601459
igx-icon {
1461-
width: var(--igx-icon-size, #{rem(18px)});
1462-
height: var(--igx-icon-size, #{rem(18px)});
1463-
font-size: var(--igx-icon-size, #{rem(18px)});
1460+
--component-size: #{if($variant == 'indigo', 2, 1)};
14641461
}
14651462

14661463
%igx-icon--error {
@@ -1521,6 +1518,10 @@
15211518
%igx-grid__tr--header {
15221519
display: flex;
15231520
align-items: center;
1521+
1522+
igx-icon {
1523+
--component-size: #{if($variant == 'indigo', 2, 3)};
1524+
}
15241525
}
15251526

15261527
%igx-grid__tr--add-animate {
@@ -1626,7 +1627,7 @@
16261627
}
16271628

16281629
igx-icon {
1629-
--component-size: 3;
1630+
--component-size: #{if($variant == 'indigo', 2, 3)};;
16301631
}
16311632
}
16321633

@@ -1687,6 +1688,10 @@
16871688
%grid-cell--fixed-width {
16881689
flex-grow: 0;
16891690
outline-style: none;
1691+
1692+
igx-icon {
1693+
--component-size: #{if($variant == 'indigo', 2, 3)};
1694+
}
16901695
}
16911696

16921697
%grid-cell--active {
@@ -1924,9 +1929,13 @@
19241929
display: flex;
19251930

19261931
igx-icon {
1927-
width: var(--igx-icon-size, #{rem(15px)});
1928-
height: var(--igx-icon-size, #{rem(15px)});
1929-
font-size: var(--igx-icon-size, #{rem(15px)});
1932+
@if $variant == 'indigo' {
1933+
--component-size: 2;
1934+
} @else {
1935+
width: var(--igx-icon-size, #{rem(15px)});
1936+
height: var(--igx-icon-size, #{rem(15px)});
1937+
font-size: var(--igx-icon-size, #{rem(15px)});
1938+
}
19301939
}
19311940

19321941
&::after {
@@ -1951,6 +1960,10 @@
19511960
cursor: pointer;
19521961

19531962
igx-icon {
1963+
@if $variant == 'indigo' {
1964+
--component-size: 2;
1965+
}
1966+
19541967
color: var-get($theme, 'expand-icon-color');
19551968
}
19561969

@@ -2357,13 +2370,11 @@
23572370
}
23582371

23592372
%igx-group-label__icon {
2360-
user-select: none;
2373+
&.igx-icon {
2374+
--component-size: #{if($variant == 'indigo', 2, 1)};
23612375

2362-
igx-icon {
23632376
color: var-get($theme, 'group-label-icon');
2364-
width: var(--igx-icon-size, #{rem(16px)});
2365-
height: var(--igx-icon-size, #{rem(16px)});
2366-
font-size: var(--igx-icon-size, #{rem(16px)});
2377+
user-select: none;
23672378
}
23682379
}
23692380

@@ -2574,10 +2585,9 @@
25742585
min-height: var(--header-size);
25752586

25762587
igx-icon {
2588+
--component-size: #{if($variant == 'indigo', 2, 3)};
2589+
25772590
color: var-get($theme, 'expand-icon-color');
2578-
width: var(--igx-icon-size, #{$indicator-icon-width});
2579-
height: var(--igx-icon-size, #{$indicator-icon-width});
2580-
font-size: var(--igx-icon-size, #{$indicator-icon-width});
25812591
}
25822592

25832593
&:hover,
@@ -2606,30 +2616,26 @@
26062616
z-index: 4;
26072617

26082618
igx-icon {
2609-
--component-size: var(--grid-size);
2619+
--component-size: #{if($variant == 'indigo', 2, 3)};
26102620
}
26112621
}
26122622

26132623
%igx-grid__group-expand-btn {
26142624
position: absolute;
26152625
cursor: pointer;
26162626
user-select: none;
2617-
inset-block-start: calc(50% - 12px);
2618-
inset-inline-start: sizable(
2619-
map.get($grid-grouping-indicator-padding, 'compact'),
2620-
map.get($grid-grouping-indicator-padding, 'cosy'),
2621-
map.get($grid-grouping-indicator-padding, 'comfortable')
2622-
);
2627+
inset-block-start: calc(50% - #{$indicator-icon-width} / 2);
2628+
inset-inline-start: var(--indicator-inline-inset);
26232629

26242630
&:hover {
26252631
color: var-get($theme, 'expand-icon-hover-color');
26262632
}
26272633

26282634
&%igx-grid__group-expand-btn--push {
26292635
inset-block-start: sizable(
2630-
math.div(map.get($grid-header-height, 'compact') - rem(24px), 2),
2631-
math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2),
2632-
math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2)
2636+
math.div(map.get($grid-header-height, 'compact') - $indicator-icon-width, 2),
2637+
math.div(map.get($grid-header-height, 'cosy') - $indicator-icon-width, 2),
2638+
math.div(map.get($grid-header-height, 'comfortable') - $indicator-icon-width, 2)
26332639
);
26342640
}
26352641
}
@@ -2646,6 +2652,11 @@
26462652
$level--compact: map-get($row-indentation-level, 'compact');
26472653

26482654
%igx-grid__row-indentation--level-#{$i} {
2655+
--indicator-inline-inset: #{sizable(
2656+
map.get($grid-grouping-indicator-padding, 'compact'),
2657+
map.get($grid-grouping-indicator-padding, 'cosy'),
2658+
map.get($grid-grouping-indicator-padding, 'comfortable')
2659+
)};
26492660
padding-inline-start: pad-inline($level--compact, $level--cosy, $level--comfortable);
26502661
}
26512662

@@ -2741,9 +2752,7 @@
27412752
visibility: visible;
27422753

27432754
igx-icon {
2744-
width: var(--igx-icon-size, #{rem(18px)});
2745-
height: var(--igx-icon-size, #{rem(18px)});
2746-
font-size: var(--igx-icon-size, #{rem(18px)});
2755+
--component-size: #{if($variant == 'indigo', 2, 1)};
27472756
}
27482757

27492758
%igx-badge-display {
@@ -2961,11 +2970,11 @@
29612970
}
29622971

29632972
igx-icon {
2964-
--component-size: 3;
2973+
--component-size: #{if($variant == 'indigo', 2, 3)};;
29652974

29662975
color: var-get($theme, 'expand-icon-color');
29672976
max-width: $hierarchical-action-icon;
2968-
min-width: $hierarchical-action-icon;
2977+
min-width: min-content;
29692978
}
29702979

29712980
[dir='rtl'] & {

‎projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,12 @@
314314
@include ripple($button-ripple-theme);
315315
@include css-vars($button-ripple-theme);
316316

317+
@if $variant == 'indigo' {
318+
igx-icon {
319+
--component-size: 2;
320+
}
321+
}
322+
317323
[dir='rtl'] & {
318324
transform: scaleX(-1);
319325
}

0 commit comments

Comments
 (0)