Skip to content

Commit ba24941

Browse files
desig9steindesig9stein
committed
fix(calendar): update styles for Fluent theme range and preview
1 parent f7c353f commit ba24941

File tree

2 files changed

+69
-30
lines changed

2 files changed

+69
-30
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@
272272
@extend %date-range-preview-active !optional;
273273
}
274274

275-
@include e(date, $mods: ('range-preview', 'weekend')) {
275+
@include e(date, $mods: ('range-preview', 'weekend'), $not: ('current', 'special')) {
276276
@extend %date-range-preview-weekend !optional;
277277
}
278278

@@ -284,7 +284,7 @@
284284
@extend %date-range-preview-weekend-last !optional;
285285
}
286286

287-
@include e(date, $mods: ('range-preview', 'weekend', 'active')) {
287+
@include e(date, $mods: ('range-preview', 'weekend', 'active'), $not: ('current', 'special')) {
288288
@extend %date-range-preview-weekend-active !optional;
289289
}
290290

@@ -468,6 +468,10 @@
468468
@extend %date-selected-current !optional;
469469
}
470470

471+
@include e(date, $mods: ('current', 'selected', 'range-preview')) {
472+
@extend %date-selected-current-range-preview !optional;
473+
}
474+
471475
@include e(date, $mods: ('current', 'selected', 'active')) {
472476
@extend %date-selected-current-active !optional;
473477
}

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss‎

Lines changed: 63 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1098,7 +1098,7 @@
10981098
/* stylelint-disable-next-line max-nesting-depth */
10991099
&::before {
11001100
background: var-get($theme, 'date-current-background');
1101-
border-color: var-get($theme, 'date-current-hover-border-color');
1101+
border-color: var-get($theme, 'date-current-border-color');
11021102
}
11031103
}
11041104
}
@@ -1112,7 +1112,7 @@
11121112

11131113
&::before {
11141114
background: var-get($theme, 'date-current-background');
1115-
border-color: var-get($theme, 'date-current-focus-border-color');
1115+
border-color: var-get($theme, 'date-current-border-color');
11161116
}
11171117
}
11181118
}
@@ -1446,6 +1446,15 @@
14461446
width: sizable(rem(22px), rem(24px), rem(28px));
14471447
height: sizable(rem(22px), rem(24px), rem(28px));
14481448
}
1449+
1450+
&:hover {
1451+
color: var-get($theme, 'date-current-hover-foreground');
1452+
1453+
&::after {
1454+
background: var-get($theme, 'date-current-hover-background');
1455+
border-color: var-get($theme, 'date-current-hover-foreground');
1456+
}
1457+
}
14491458
}
14501459
}
14511460
}
@@ -1463,6 +1472,15 @@
14631472
background: var-get($theme, 'date-current-focus-background');
14641473
border-color: var-get($theme, 'date-current-focus-border-color');
14651474
}
1475+
1476+
@if $variant == 'fluent' {
1477+
color: var-get($theme, 'date-current-focus-foreground');
1478+
1479+
&::after {
1480+
background: var-get($theme, 'date-current-focus-background');
1481+
border-color: var-get($theme, 'date-current-focus-foreground');
1482+
}
1483+
}
14661484
}
14671485
}
14681486

@@ -1499,10 +1517,10 @@
14991517
%date-special-current-selected-active {
15001518
%date-inner {
15011519
&::after {
1502-
@if $variant == 'fluent' {
1503-
border-color: var-get($theme, 'date-selected-current-focus-foreground');
1504-
background: var-get($theme, 'date-selected-current-focus-background');
1505-
}
1520+
//@if $variant == 'fluent' {
1521+
// border-color: var-get($theme, 'date-selected-current-focus-foreground');
1522+
// background: var-get($theme, 'date-selected-current-focus-background');
1523+
//}
15061524

15071525
@if $variant != 'fluent' {
15081526
border-color: var-get($theme, 'date-selected-special-border-color');
@@ -1626,12 +1644,10 @@
16261644
}
16271645
}
16281646

1629-
16301647
%date-selected-current {
16311648
%date-inner {
16321649
color: var-get($theme, 'date-selected-current-foreground');
16331650

1634-
16351651
&:hover {
16361652
color: var-get($theme, 'date-selected-current-hover-foreground');
16371653
}
@@ -1703,16 +1719,6 @@
17031719
}
17041720
}
17051721

1706-
//@if $variant == 'fluent' {
1707-
// %date-selected-current-special {
1708-
// %date-inner {
1709-
// &::after {
1710-
// border-color: var-get($theme, 'date-selected-current-background');
1711-
// }
1712-
// }
1713-
// }
1714-
//}
1715-
17161722
%date-inactive {
17171723
cursor: default;
17181724

@@ -1735,6 +1741,17 @@
17351741
}
17361742
}
17371743
}
1744+
1745+
%date-selected-current-range-preview {
1746+
%date-inner {
1747+
color: var-get($theme, 'date-current-foreground');
1748+
1749+
&::before {
1750+
background: var-get($theme, 'date-current-background') ;
1751+
border-color: var-get($theme, 'date-current-border-color');
1752+
}
1753+
}
1754+
}
17381755
}
17391756

17401757
%date-selected-current-range {
@@ -2230,6 +2247,10 @@
22302247
%date-inner {
22312248
@if $variant == 'fluent' {
22322249
color: var-get($theme, 'date-special-range-foreground');
2250+
2251+
&:hover {
2252+
color: var-get($theme, 'date-special-range-hover-foreground')
2253+
}
22332254
}
22342255

22352256
&::after {
@@ -2472,6 +2493,8 @@
24722493
%date-inner {
24732494
border-start-end-radius: var-get($theme, 'date-range-border-radius');
24742495
border-end-end-radius: var-get($theme, 'date-range-border-radius');
2496+
border-end-start-radius: 0;
2497+
border-start-start-radius: 0;
24752498
}
24762499

24772500
&::before {
@@ -2485,6 +2508,8 @@
24852508
%date-inner {
24862509
border-start-start-radius: var-get($theme, 'date-range-border-radius');
24872510
border-end-start-radius: var-get($theme, 'date-range-border-radius');
2511+
border-start-end-radius: 0;
2512+
border-end-end-radius: 0;
24882513
}
24892514

24902515
&::before {
@@ -2617,7 +2642,12 @@
26172642

26182643
@if $variant == 'fluent' {
26192644
&:hover {
2620-
color: var-get($theme, 'date-current-hover-foreground');
2645+
color: var-get($theme, 'date-current-foreground');
2646+
2647+
&::before {
2648+
background: var-get($theme, 'date-current-background');
2649+
border-color: var-get($theme, 'date-current-border-color');
2650+
}
26212651
}
26222652
}
26232653
}
@@ -2626,7 +2656,12 @@
26262656
%date-range-preview-current-active {
26272657
%date-inner {
26282658
@if $variant == 'fluent' {
2629-
color: var-get($theme, 'date-current-focus-foreground');
2659+
color: var-get($theme, 'date-current-foreground');
2660+
2661+
&::before {
2662+
background: var-get($theme, 'date-current-background');
2663+
border-color: var-get($theme, 'date-current-border-color');
2664+
}
26302665
}
26312666
}
26322667
}
@@ -2719,14 +2754,14 @@
27192754
}
27202755
}
27212756

2722-
@if $variant == 'fluent' {
2723-
%date-first-preview-current-selected,
2724-
%date-last-preview-current-selected {
2725-
%date-inner {
2726-
color: var-get($theme, 'date-selected-current-range-foreground');
2727-
}
2728-
}
2729-
}
2757+
//@if $variant == 'fluent' {
2758+
// %date-first-preview-current-selected,
2759+
// %date-last-preview-current-selected {
2760+
// %date-inner {
2761+
// color: var-get($theme, 'date-selected-current-range-foreground');
2762+
// }
2763+
// }
2764+
//}
27302765

27312766
@if $variant == 'bootstrap' {
27322767
%date-first-preview-current,

0 commit comments

Comments
 (0)