Skip to content

Commit 6f7fc32

Browse files
authored
Merge branch 'master' into sivanova/fix-16375
2 parents f048213 + f83cc06 commit 6f7fc32

File tree

22 files changed

+80
-61
lines changed

22 files changed

+80
-61
lines changed

package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"@types/source-map": "0.5.2",
7676
"express": "^5.1.0",
7777
"fflate": "^0.8.1",
78-
"igniteui-theming": "^22.0.0",
78+
"igniteui-theming": "^23.0.0",
7979
"igniteui-trial-watermark": "^3.1.0",
8080
"lodash-es": "^4.17.21",
8181
"rxjs": "^7.8.2",

projects/igniteui-angular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.1.0",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^22.0.0",
76+
"igniteui-theming": "^23.0.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
color: var-get($theme, 'text-color');
2525
background: var-get($theme, 'background-color');
2626
border-radius: calc(var(--size) / 2);
27-
box-shadow: var-get($theme, 'shadow');
27+
box-shadow: var-get($theme, 'elevation');
2828
overflow: hidden;
2929

3030
igx-icon {

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@
4343
%igx-bottom-nav-menu--top {
4444
inset-block-start: 0;
4545
inset-block-end: inherit;
46-
box-shadow: var-get($theme, 'shadow');
46+
box-shadow: var-get($theme, 'elevation');
4747
}
4848

4949
%igx-bottom-nav-menu--bottom {
5050
inset-block-start: inherit;
5151
inset-block-end: 0;
52-
box-shadow: var-get($theme, 'shadow');
52+
box-shadow: var-get($theme, 'elevation');
5353
}
5454

5555
%igx-bottom-nav-menu-item {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
%igx-group-display {
3838
display: flex;
39-
box-shadow: var-get($theme, 'shadow');
39+
box-shadow: var-get($theme, 'elevation');
4040
border-radius: var-get($theme, 'border-radius');
4141

4242
button {
@@ -269,6 +269,7 @@
269269
color: var-get($theme, 'item-focused-text-color');
270270
background: var-get($theme, 'item-focused-background');
271271
border-color: var-get($theme, 'item-focused-border-color');
272+
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
272273
z-index: 2;
273274

274275
igx-icon {

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

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193

194194
$contained-shadow: map.get(
195195
(
196-
'material': var-get($contained-theme, 'resting-shadow'),
196+
'material': var-get($contained-theme, 'resting-elevation'),
197197
'fluent': none,
198198
'bootstrap': none,
199199
'indigo': none,
@@ -203,7 +203,7 @@
203203

204204
$contained-shadow--hover: map.get(
205205
(
206-
'material': var-get($contained-theme, 'hover-shadow'),
206+
'material': var-get($contained-theme, 'hover-elevation'),
207207
'fluent': none,
208208
'bootstrap': none,
209209
'indigo': none,
@@ -213,8 +213,8 @@
213213

214214
$contained-shadow--focus: map.get(
215215
(
216-
'material': var-get($contained-theme, 'focus-shadow'),
217-
'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
216+
'material': var-get($contained-theme, 'focus-elevation'),
217+
'fluent': none,
218218
'bootstrap': 0 0 0 rem(4px)
219219
var-get($contained-theme, 'shadow-color'),
220220
'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
@@ -224,8 +224,8 @@
224224

225225
$contained-shadow--active: map.get(
226226
(
227-
'material': var-get($contained-theme, 'active-shadow'),
228-
'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
227+
'material': var-get($contained-theme, 'active-elevation'),
228+
'fluent': none,
229229
'bootstrap': 0 0 0 rem(4px)
230230
var-get($contained-theme, 'shadow-color'),
231231
'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
@@ -235,7 +235,7 @@
235235

236236
$fab-shadow: map.get(
237237
(
238-
'material': var-get($fab-theme, 'resting-shadow'),
238+
'material': var-get($fab-theme, 'resting-elevation'),
239239
'fluent': none,
240240
'bootstrap': none,
241241
'indigo': none,
@@ -245,7 +245,7 @@
245245

246246
$fab-shadow--hover: map.get(
247247
(
248-
'material': var-get($fab-theme, 'hover-shadow'),
248+
'material': var-get($fab-theme, 'hover-elevation'),
249249
'fluent': none,
250250
'bootstrap': none,
251251
'indigo': none,
@@ -255,8 +255,8 @@
255255

256256
$fab-shadow--focus: map.get(
257257
(
258-
'material': var-get($fab-theme, 'focus-shadow'),
259-
'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
258+
'material': var-get($fab-theme, 'focus-elevation'),
259+
'fluent': none,
260260
'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
261261
'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
262262
),
@@ -265,8 +265,8 @@
265265

266266
$fab-shadow--active: map.get(
267267
(
268-
'material': var-get($fab-theme, 'active-shadow'),
269-
'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
268+
'material': var-get($fab-theme, 'active-elevation'),
269+
'fluent': none,
270270
'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
271271
'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
272272
),
@@ -586,7 +586,10 @@
586586
background: var-get($contained-theme, 'background');
587587
border-color: var-get($contained-theme, 'border-color');
588588
border-radius: var-get($contained-theme, 'border-radius');
589-
box-shadow: var-get($contained-theme, 'resting-shadow');
589+
590+
@if $variant == 'material' {
591+
box-shadow: var-get($contained-theme, 'resting-elevation');
592+
}
590593

591594
igx-icon {
592595
color: var-get($contained-theme, 'icon-color');
@@ -596,7 +599,10 @@
596599
color: var-get($contained-theme, 'hover-foreground');
597600
background: var-get($contained-theme, 'hover-background');
598601
border-color: var-get($contained-theme, 'hover-border-color');
599-
box-shadow: var-get($contained-theme, 'hover-shadow');
602+
603+
@if $variant == 'material' {
604+
box-shadow: var-get($contained-theme, 'hover-elevation');
605+
}
600606

601607
igx-icon {
602608
color: var-get($contained-theme, 'icon-color-hover');
@@ -607,7 +613,10 @@
607613
color: var-get($contained-theme, 'active-foreground');
608614
background: var-get($contained-theme, 'active-background');
609615
border-color: var-get($contained-theme, 'active-border-color');
610-
box-shadow: var-get($contained-theme, 'active-shadow');
616+
617+
@if $variant == 'material' {
618+
box-shadow: var-get($contained-theme, 'active-elevation');
619+
}
611620

612621
igx-icon {
613622
color: var-get($contained-theme, 'active-foreground');
@@ -640,7 +649,7 @@
640649
}
641650

642651
@if $variant == 'material' {
643-
box-shadow: var-get($contained-theme, 'focus-shadow');
652+
box-shadow: var-get($contained-theme, 'focus-elevation');
644653
} @else {
645654
box-shadow: $contained-shadow--active;
646655
}
@@ -665,7 +674,7 @@
665674
}
666675

667676
@if $variant == 'material' {
668-
box-shadow: var-get($contained-theme, 'focus-shadow');
677+
box-shadow: var-get($contained-theme, 'focus-elevation');
669678
}
670679
}
671680

@@ -726,7 +735,10 @@
726735
background: var-get($fab-theme, 'background');
727736
border-color: var-get($fab-theme, 'border-color');
728737
border-radius: var-get($fab-theme, 'border-radius');
729-
box-shadow: var-get($fab-theme, 'resting-shadow');
738+
739+
@if $variant == 'material' {
740+
box-shadow: var-get($fab-theme, 'resting-elevation');
741+
}
730742

731743
igx-icon {
732744
color: var-get($fab-theme, 'icon-color');
@@ -736,7 +748,10 @@
736748
color: var-get($fab-theme, 'hover-foreground');
737749
background: var-get($fab-theme, 'hover-background');
738750
border-color: var-get($fab-theme, 'hover-border-color');
739-
box-shadow: var-get($fab-theme, 'hover-shadow');
751+
752+
@if $variant == 'material' {
753+
box-shadow: var-get($fab-theme, 'hover-elevation');
754+
}
740755

741756
igx-icon {
742757
color: var-get($fab-theme, 'icon-color-hover');
@@ -747,7 +762,10 @@
747762
color: var-get($fab-theme, 'active-foreground');
748763
background: var-get($fab-theme, 'active-background');
749764
border-color: var-get($fab-theme, 'active-border-color');
750-
box-shadow: var-get($fab-theme, 'active-shadow');
765+
766+
@if $variant == 'material' {
767+
box-shadow: var-get($fab-theme, 'active-elevation');
768+
}
751769

752770
igx-icon {
753771
color: var-get($fab-theme, 'active-foreground');
@@ -771,7 +789,7 @@
771789
}
772790

773791
@if $variant == 'material' {
774-
box-shadow: var-get($fab-theme, 'focus-shadow');
792+
box-shadow: var-get($fab-theme, 'focus-elevation');
775793
} @else {
776794
box-shadow: $contained-shadow--focus;
777795
}

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
}
3232

3333
%igx-card--elevated {
34-
box-shadow: var-get($theme, 'resting-shadow');
34+
box-shadow: var-get($theme, 'resting-elevation');
3535

3636
&:hover {
37-
box-shadow: var-get($theme, 'hover-shadow');
37+
box-shadow: var-get($theme, 'hover-elevation');
3838
}
3939

4040
@if $not-material-theme {

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
outline-style: none;
4747
transition: all .15s ease-in-out;
4848
background: var-get($theme, 'button-background');
49-
box-shadow: var-get($theme, 'button-shadow');
49+
box-shadow: var-get($theme, 'button-elevation');
5050
border: rem(1px) solid var-get($theme, 'button-border-color');
5151
border-radius: var(--nav-btn-border-radius);
5252

@@ -167,7 +167,7 @@
167167
inset-inline-start: 50%;
168168
transform: translateX(-50%);
169169
background: var-get($theme, 'indicator-background');
170-
box-shadow: var-get($theme, 'button-shadow');
170+
box-shadow: var-get($theme, 'button-elevation');
171171
border-radius: var-get($theme, 'border-radius');
172172

173173
[dir='rtl'] & {

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@
540540
@extend %igx-chip;
541541

542542
position: absolute;
543-
box-shadow: var-get($theme, 'ghost-shadow');
543+
box-shadow: var-get($theme, 'ghost-elevation');
544544
overflow: hidden;
545545
color: var-get($theme, 'focus-text-color');
546546
background: var-get($theme, 'ghost-background');

0 commit comments

Comments
 (0)