Skip to content

Commit 1638fc3

Browse files
committed
refactor(calendar): fix inner border size and colors
1 parent da4a3a8 commit 1638fc3

File tree

2 files changed

+39
-31
lines changed

2 files changed

+39
-31
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,10 @@
146146
@extend %date-selected-special !optional;
147147
}
148148

149+
@include e(date, $mods: ('selected', 'special', 'active')) {
150+
@extend %date-selected-special-active !optional;
151+
}
152+
149153
@include e(date, $mods: ('selected', 'range')) {
150154
@extend %date-selected-range !optional;
151155
}

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

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,10 @@
112112
/// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
113113
/// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
114114
///
115+
/// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
116+
/// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
117+
/// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
118+
///
115119
/// @param {Color} $date-current-foreground [null] - The foreground of the current date.
116120
/// @param {Color} $date-current-background [null] - The background color of the current date.
117121
/// @param {Color} $date-current-hover-foreground [null] - The :hover text color of the current date.
@@ -1550,6 +1554,28 @@
15501554
}
15511555
}
15521556

1557+
%date-selected-special {
1558+
%date-inner {
1559+
&::after {
1560+
border-color: var-get($theme, 'date-selected-special-border-color');
1561+
}
1562+
1563+
&:hover {
1564+
&::after {
1565+
border-color: var-get($theme, 'date-selected-special-hover-border-color');
1566+
}
1567+
}
1568+
}
1569+
}
1570+
1571+
%date-selected-special-active {
1572+
%date-inner {
1573+
&::after {
1574+
border-color: var-get($theme, 'date-selected-special-focus-border-color');
1575+
}
1576+
}
1577+
}
1578+
15531579
%date-selected-range {
15541580
%date-inner {
15551581
&::after {
@@ -1600,11 +1626,9 @@
16001626
%date-selected-special-current-first,
16011627
%date-selected-special-current-last,
16021628
%date-selected-special-current-first-last {
1603-
@if $variant == 'indigo-design' {
1604-
%date-inner {
1605-
&::after {
1606-
border-color: var-get($theme, 'date-selected-special-border-color');
1607-
}
1629+
%date-inner {
1630+
&::after {
1631+
border-color: var-get($theme, 'date-selected-special-border-color');
16081632
}
16091633
}
16101634
}
@@ -1774,12 +1798,12 @@
17741798
}
17751799
}
17761800
}
1801+
}
17771802

1778-
%date-special-current-selected-active {
1779-
%date-inner {
1780-
&::after {
1781-
border-color: var-get($theme, 'date-selected-special-border-color');
1782-
}
1803+
%date-special-current-selected-active {
1804+
%date-inner {
1805+
&::after {
1806+
border-color: var-get($theme, 'date-selected-special-border-color');
17831807
}
17841808
}
17851809
}
@@ -1806,19 +1830,6 @@
18061830
}
18071831
}
18081832

1809-
%date-selected-special {
1810-
%date-inner {
1811-
&::after {
1812-
@if $variant == 'material' or $variant == 'bootstrap' {
1813-
border-color: var-get($theme, 'date-selected-foreground');
1814-
}
1815-
@if $variant == 'indigo-design' {
1816-
border-color: var-get($theme, 'date-selected-special-border-color');
1817-
}
1818-
}
1819-
}
1820-
}
1821-
18221833
%date-selected-current {
18231834
%date-inner {
18241835
color: var-get($theme, 'date-selected-current-foreground');
@@ -2196,14 +2207,7 @@
21962207
&::after {
21972208
width: $date-inner-size;
21982209
height: $date-inner-size;
2199-
2200-
@if $variant == 'material' or $variant == 'bootstrap' {
2201-
border-color: var-get($theme, 'date-selected-foreground');
2202-
}
2203-
2204-
@if $variant == 'indigo-design' {
2205-
border-color: var-get($theme, 'date-selected-special-border-color');
2206-
}
2210+
border-color: var-get($theme, 'date-selected-special-border-color');
22072211
}
22082212
}
22092213
}

0 commit comments

Comments
 (0)