Skip to content

Commit 1d67027

Browse files
simeonoffsimeonoff
committed
refactor(*): replace --igx- prefixed variables with --ig-
1 parent 55edaec commit 1d67027

22 files changed

Lines changed: 99 additions & 104 deletions

File tree

‎projects/igniteui-angular/core/src/core/styles/components/action-strip/_action-strip-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@
6868
igx-icon {
6969
--component-size: var(--action-strip-size);
7070

71-
width: var(--igx-icon-size, rem(18px));
72-
height: var(--igx-icon-size, rem(18px));
73-
font-size: var(--igx-icon-size, rem(18px));
71+
width: var(--ig-icon-size, rem(18px));
72+
height: var(--ig-icon-size, rem(18px));
73+
font-size: var(--ig-icon-size, rem(18px));
7474
}
7575

7676
&%igx-drop-down__item {

‎projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
overflow: hidden;
2929

3030
igx-icon {
31-
--size: var(--igx-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
31+
--size: var(--ig-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
3232
--component-size: var(--badge-size);
3333

3434
display: inline-flex;
@@ -42,7 +42,6 @@
4242
$icon-size: sizable(rem(8px), rem(10px), rem(12px));
4343

4444
--ig-icon-size: #{$icon-size};
45-
--igx-icon-size: #{$icon-size};
4645
}
4746
}
4847
}

‎projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,6 @@
143143
$icon-size: rem(18px);
144144

145145
--ig-icon-size: #{$icon-size};
146-
--igx-icon-size: #{$icon-size};
147146
}
148147

149148
&:active {
@@ -159,7 +158,6 @@
159158
$icon-size: rem(16px);
160159

161160
--ig-icon-size: #{$icon-size};
162-
--igx-icon-size: #{$icon-size};
163161
}
164162

165163
&:hover {

‎projects/igniteui-angular/core/src/core/styles/components/button/_button-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -328,9 +328,9 @@
328328
--component-size: var(--ig-size, var(--ig-size-large));
329329
display: flex;
330330
justify-content: center;
331-
width: var(--igx-icon-size, #{$icon-in-button-size});
332-
height: var(--igx-icon-size, #{$icon-in-button-size});
333-
font-size: var(--igx-icon-size, #{$icon-in-button-size});
331+
width: var(--ig-icon-size, #{$icon-in-button-size});
332+
height: var(--ig-icon-size, #{$icon-in-button-size});
333+
font-size: var(--ig-icon-size, #{$icon-in-button-size});
334334
transition: var(--_button-transition);
335335
}
336336
}

‎projects/igniteui-angular/core/src/core/styles/components/combo/_combo-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
// in order to override the !important rule of .igx-icon--inactive.
9696
%igx-combo__case-icon {
9797
igx-icon {
98-
--igx-icon-disabled-color: var(--ig-gray-600);
98+
--ig-icon-disabled-color: var(--ig-gray-600);
9999

100100
opacity: 1;
101101
}
@@ -159,8 +159,8 @@
159159

160160
@if $variant == 'fluent' or $variant == 'bootstrap' {
161161
%igx-combo__search {
162-
--igx-input-group-input-suffix-background: transparent;
163-
--igx-input-group-input-suffix-background--focused: transparent;
162+
--ig-input-group-input-suffix-background: transparent;
163+
--ig-input-group-input-suffix-background--focused: transparent;
164164

165165
.igx-input-group__bundle::after {
166166
border-block-end-color: var(--border-color);

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393

9494
@if $variant != 'indigo' {
9595
igx-icon {
96-
--size: var(--igx-icon-size, #{rem(15px)});
96+
--size: var(--ig-icon-size, #{rem(15px)});
9797
}
9898
}
9999
}
@@ -546,9 +546,9 @@
546546
}
547547

548548
igx-icon {
549-
width: var(--igx-icon-size, #{$tree-node-expander-size});
550-
height: var(--igx-icon-size, #{$tree-node-expander-size});
551-
font-size: var(--igx-icon-size, #{$tree-node-expander-size});
549+
width: var(--ig-icon-size, #{$tree-node-expander-size});
550+
height: var(--ig-icon-size, #{$tree-node-expander-size});
551+
font-size: var(--ig-icon-size, #{$tree-node-expander-size});
552552
}
553553

554554
> igx-checkbox,
@@ -694,9 +694,9 @@
694694
}
695695

696696
igx-icon {
697-
width: var(--igx-icon-size, #{rem(18px)});
698-
height: var(--igx-icon-size, #{rem(18px)});
699-
font-size: var(--igx-icon-size, #{rem(18px)});
697+
width: var(--ig-icon-size, #{rem(18px)});
698+
height: var(--ig-icon-size, #{rem(18px)});
699+
font-size: var(--ig-icon-size, #{rem(18px)});
700700
}
701701
}
702702

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -436,43 +436,43 @@
436436
igx-tree-grid {
437437
@if $variant == 'material' {
438438
@if $theme-variant == 'light' {
439-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
440-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
441-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
439+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
440+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 300)};
441+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
442442
}
443443
@if $theme-variant == 'dark' {
444-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
445-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
446-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
444+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
445+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
446+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
447447
}
448448
}
449449

450450
@if $variant == 'fluent' {
451451
@if $theme-variant == 'dark' {
452-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
453-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
454-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
452+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
453+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
454+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
455455
}
456456
}
457457

458458
@if $variant == 'bootstrap' {
459459
@if $theme-variant == 'dark' {
460-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
461-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
462-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
460+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 400)};
461+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
462+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
463463
}
464464
}
465465

466466
@if $variant == 'indigo' {
467467
@if $theme-variant == 'light' {
468-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
469-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
470-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
468+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 500)};
469+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
470+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 300)};
471471
}
472472
@if $theme-variant == 'dark' {
473-
--igx-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
474-
--igx-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
475-
--igx-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
473+
--ig-chip-disabled-text-color: #{color($color: 'gray', $variant: 300)};
474+
--ig-chip-disabled-background: #{color($color: 'gray', $variant: 200)};
475+
--ig-chip-disabled-border-color: #{color($color: 'gray', $variant: 200)};
476476
}
477477
}
478478
}
@@ -501,7 +501,7 @@
501501
map.get($grouparea-min-height, 'comfortable')
502502
)};
503503

504-
--igx-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};
504+
--ig-tree-indent-size: #{sizable(rem(12px), rem(16px), rem(24px))};
505505

506506
position: relative;
507507
display: grid;
@@ -1283,9 +1283,9 @@
12831283

12841284
> igx-icon {
12851285
color: color($color: 'error');
1286-
width: var(--igx-icon-size, rem(18px));
1287-
height: var(--igx-icon-size, rem(18px));
1288-
font-size: var(--igx-icon-size, rem(18px));
1286+
width: var(--ig-icon-size, rem(18px));
1287+
height: var(--ig-icon-size, rem(18px));
1288+
font-size: var(--ig-icon-size, rem(18px));
12891289
}
12901290

12911291
%grid-cell-text {
@@ -1543,7 +1543,7 @@
15431543

15441544
@if $variant != 'indigo' {
15451545
igx-icon {
1546-
--size: var(--igx-icon-size, #{rem(15px)});
1546+
--size: var(--ig-icon-size, #{rem(15px)});
15471547
}
15481548
}
15491549

@@ -2174,9 +2174,9 @@
21742174
margin: 0 rem(4px);
21752175

21762176
igx-icon {
2177-
width: var(--igx-icon-size, #{rem(16px)});
2178-
height: var(--igx-icon-size, #{rem(16px)});
2179-
font-size: var(--igx-icon-size, #{rem(16px)});
2177+
width: var(--ig-icon-size, #{rem(16px)});
2178+
height: var(--ig-icon-size, #{rem(16px)});
2179+
font-size: var(--ig-icon-size, #{rem(16px)});
21802180
}
21812181

21822182
[dir='rtl'] & {

‎projects/igniteui-angular/core/src/core/styles/components/grid/_pivot-data-selector-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,9 +203,9 @@
203203
%selector-base,
204204
%selector-item-ghost {
205205
igx-icon {
206-
width: var(--igx-icon-size, #{rem(18px)});
207-
height: var(--igx-icon-size, #{rem(18px)});
208-
font-size: var(--igx-icon-size, #{rem(18px)});
206+
width: var(--ig-icon-size, #{rem(18px)});
207+
height: var(--ig-icon-size, #{rem(18px)});
208+
font-size: var(--ig-icon-size, #{rem(18px)});
209209
}
210210
}
211211

‎projects/igniteui-angular/core/src/core/styles/components/icon-button/_icon-button-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,9 @@
9191
--component-size: var(--ig-size, var(--ig-size-large));
9292
display: flex;
9393
justify-content: center;
94-
width: var(--igx-icon-size, #{$icon-in-button-size});
95-
height: var(--igx-icon-size, #{$icon-in-button-size});
96-
font-size: var(--igx-icon-size, #{$icon-in-button-size});
94+
width: var(--ig-icon-size, #{$icon-in-button-size});
95+
height: var(--ig-icon-size, #{$icon-in-button-size});
96+
font-size: var(--ig-icon-size, #{$icon-in-button-size});
9797
}
9898

9999
@if $variant == 'fluent' {

‎projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1825,22 +1825,22 @@
18251825

18261826
igx-prefix,
18271827
[igxPrefix] {
1828-
background: var(--igx-input-group-input-prefix-background, transparent);
1829-
color: var(--igx-input-group-input-prefix-color, var(--ig-primary-500));
1828+
background: var(--ig-input-group-input-prefix-background, transparent);
1829+
color: var(--ig-input-group-input-prefix-color, var(--ig-primary-500));
18301830
}
18311831

18321832
igx-suffix,
18331833
[igxSuffix] {
1834-
background: var(--igx-input-group-input-suffix-background, transparent);
1835-
color: var(--igx-input-group-input-suffix-color, var(--ig-primary-500));
1834+
background: var(--ig-input-group-input-suffix-background, transparent);
1835+
color: var(--ig-input-group-input-suffix-color, var(--ig-primary-500));
18361836
}
18371837

18381838
&%form-group-display--readonly {
18391839
igx-prefix,
18401840
[igxPrefix],
18411841
igx-suffix,
18421842
[igxSuffix] {
1843-
color: var(--igx-input-group-disabled-text-color, var(--ig-gray-500));
1843+
color: var(--ig-input-group-disabled-text-color, var(--ig-gray-500));
18441844
}
18451845
}
18461846
}
@@ -1853,13 +1853,13 @@
18531853

18541854
igx-suffix,
18551855
[igxSuffix] {
1856-
color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
1856+
color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900));
18571857
}
18581858

18591859
&%form-group-display--readonly {
18601860
igx-suffix,
18611861
[igxSuffix] {
1862-
color: var(--igx-input-group-input-suffix-color--focused, var(--ig-gray-900));
1862+
color: var(--ig-input-group-input-suffix-color--focused, var(--ig-gray-900));
18631863
}
18641864
}
18651865
}

0 commit comments

Comments
 (0)