Skip to content

Commit f7c353f

Browse files
desig9steindesig9stein
committed
fix(calendar): refine bootstrap theme styles for date range and selection states
1 parent 8eea502 commit f7c353f

File tree

2 files changed

+65
-20
lines changed

2 files changed

+65
-20
lines changed

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
@extend %date-selected !optional;
139139
}
140140

141-
@include e(date, 'selected', $not: ('range')) {
141+
@include e(date, 'selected', $not: ('range', 'range-preview')) {
142142
@extend %date-selected-not-in-range !optional;
143143
}
144144

@@ -186,7 +186,7 @@
186186
@extend %date-selected-active !optional;
187187
}
188188

189-
@include e(date, $mods: ('selected', 'active'), $not: ('range')) {
189+
@include e(date, $mods: ('selected', 'active'), $not: ('range', 'range-preview')) {
190190
@extend %date-selected-active-not-in-range !optional;
191191
}
192192

@@ -226,7 +226,7 @@
226226
@extend %date-selected-range !optional;
227227
}
228228

229-
@include e(date, $mods: ('selected', 'special','range')) {
229+
@include e(date, $mods: ('selected', 'special', 'range')) {
230230
@extend %date-selected-special-range !optional;
231231
}
232232

@@ -235,6 +235,15 @@
235235
@extend %date-selected-special-range-active !optional;
236236
}
237237

238+
239+
@include e(date, $mods: ('selected', 'special', 'range'), $not: ('current')) {
240+
@extend %date-selected-special-range-not-current !optional;
241+
}
242+
243+
@include e(date, $mods: ('selected', 'special', 'active', 'range'), $not: ('current')) {
244+
@extend %date-selected-special-active-range-not-current !optional;
245+
}
246+
238247
@include e(date, 'hidden') {
239248
@extend %date-hidden !optional;
240249
}
@@ -624,8 +633,6 @@
624633
@extend %date-last-preview-current-selected !optional;
625634
}
626635

627-
628-
629636
@include e(date, $mods: ('last', 'range-preview', 'current')) {
630637
@extend %date-last-preview-current !optional;
631638
}

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

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -663,10 +663,7 @@
663663
%calendar-view__item-inner {
664664
color: var-get($theme, 'ym-selected-foreground');
665665
background: var-get($theme, 'ym-selected-background');
666-
667-
@if not $bootstrap-theme and $variant != 'fluent' {
668-
box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-outline-color');
669-
}
666+
box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-outline-color');
670667

671668
&:hover {
672669
color: var-get($theme, 'ym-selected-hover-foreground');
@@ -773,6 +770,7 @@
773770
width: $date-size;
774771
color: var-get($theme, 'week-number-foreground');
775772
background: var-get($theme, 'week-number-background');
773+
border-color: transparent;
776774

777775
&::before {
778776
content: '';
@@ -942,6 +940,26 @@
942940
}
943941
}
944942

943+
%date-selected-special-range-not-current {
944+
%date-inner {
945+
@if $variant == 'bootstrap' {
946+
border-color: transparent;
947+
948+
&:hover {
949+
border-color: transparent
950+
}
951+
}
952+
}
953+
}
954+
955+
%date-selected-special-active-range-not-current {
956+
%date-inner {
957+
@if $variant == 'bootstrap' {
958+
border-color: transparent
959+
}
960+
}
961+
}
962+
945963
%date-selected-special-current-first,
946964
%date-selected-special-current-last,
947965
%date-selected-special-current-first-last {
@@ -1395,17 +1413,27 @@
13951413
}
13961414

13971415
@if $variant == 'indigo' {
1416+
&::after {
1417+
width: calc($date-inner-size - #{rem(4px)});
1418+
height: calc($date-inner-size - #{rem(4px)});
1419+
}
1420+
}
1421+
1422+
@if $variant == 'indigo' or $variant == 'bootstrap' {
13981423
background: var-get($theme, 'date-current-background');
13991424
border-color: var-get($theme, 'date-current-border-color');
14001425

14011426
&:hover {
14021427
background: var-get($theme, 'date-current-hover-background');
14031428
border-color: var-get($theme, 'date-current-hover-border-color');
14041429
}
1430+
}
14051431

1406-
&::after {
1407-
width: calc($date-inner-size - #{rem(4px)});
1408-
height: calc($date-inner-size - #{rem(4px)});
1432+
@if $variant == 'bootstrap' {
1433+
color: var-get($theme, 'date-current-foreground');
1434+
1435+
&:hover {
1436+
color: var-get($theme, 'date-current-hover-foreground');
14091437
}
14101438
}
14111439

@@ -1422,17 +1450,25 @@
14221450
}
14231451
}
14241452

1425-
@if $variant == 'indigo' {
1426-
%date-special-current-active {
1427-
%date-inner {
1453+
%date-special-current-active {
1454+
%date-inner {
1455+
@if $variant == 'indigo' {
14281456
color: var-get($theme, 'date-special-focus-foreground');
14291457
background: var-get($theme, 'date-current-focus-background');
14301458
border-color: var-get($theme, 'date-current-focus-border-color');
14311459
}
1460+
1461+
@if $variant == 'bootstrap' {
1462+
color: var-get($theme, 'date-current-focus-foreground');
1463+
background: var-get($theme, 'date-current-focus-background');
1464+
border-color: var-get($theme, 'date-current-focus-border-color');
1465+
}
14321466
}
1467+
}
14331468

1434-
%date-special-current-selected {
1435-
%date-inner {
1469+
%date-special-current-selected {
1470+
%date-inner {
1471+
@if $variant == 'indigo' {
14361472
&::after {
14371473
width: calc($date-inner-size - #{rem(4px)});
14381474
height: calc($date-inner-size - #{rem(4px)});
@@ -2502,7 +2538,7 @@
25022538
}
25032539

25042540
%date-inner {
2505-
@if $variant == 'fluent' {
2541+
@if $variant == 'fluent' or $variant == 'bootstrap' {
25062542
border-color: transparent;
25072543
}
25082544

@@ -2514,7 +2550,8 @@
25142550
}
25152551

25162552
@if $bootstrap-theme {
2517-
color: var-get($theme, 'date-selected-foreground');
2553+
color: var-get($theme, 'date-selected-range-foreground');
2554+
border-color: transparent;
25182555
}
25192556
}
25202557
}
@@ -2674,9 +2711,10 @@
26742711
%date-first-preview-selected-active,
26752712
%date-last-preview-selected-active {
26762713
%date-inner {
2677-
@if $variant == 'bootstrap' {
2714+
@if $variant == 'bootstrap' {
26782715
color: var-get($theme, 'date-selected-focus-foreground');
26792716
background: var-get($theme, 'date-selected-focus-background');
2717+
border-color: var-get($theme, 'date-selected-focus-border-color');
26802718
}
26812719
}
26822720
}

0 commit comments

Comments
 (0)