diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss index ac78526f137..e0904be7154 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss @@ -110,24 +110,24 @@ @extend %days-view-row !optional; } - @include e(date) { - @extend %date !optional; - } - @include e(date-inner) { @extend %date-inner !optional; } + @include e(date) { + @extend %date !optional; + } + @include e(date, 'week-number') { @extend %date-week-number !optional; } - @include e(date, 'inactive') { + @include e(date, 'inactive', $not: (range, selected, first, last, current, special, disabled)) { @extend %date-inactive !optional; } - @include e(date, $mods: ('inactive', 'special')) { - @extend %date-inactive-special !optional; + @include e(date, $mods: ('inactive', 'range-preview')) { + @extend %date-inactive-range-preview !optional; } @include e(date, 'active') { @@ -138,14 +138,86 @@ @extend %date-selected !optional; } + @include e(date, 'selected', $not: ('range')) { + @extend %date-selected-not-in-range !optional; + } + + @include e(date, $mods: ('selected', 'first', 'last')) { + @extend %date-selected-first-last !optional; + } + + @include e(date, $mods: ('selected', 'first', 'last', 'active')) { + @extend %date-selected-first-last-active !optional; + } + + @include e(date, $mods: ('selected', 'first', 'last'), $not: ('special', 'current')) { + @extend %date-selected-first-last-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'first', 'range-preview'), $not: ('special', 'current')) { + @extend %date-selected-first-last-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'last', 'range-preview'), $not: ('special', 'current')) { + @extend %date-selected-first-last-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'first', 'last', 'active'), $not: ('special', 'current')) { + @extend %date-selected-first-last-active-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'weekend', 'first', 'last'), $not: ('special', 'current')) { + @extend %date-selected-weekend-first-last-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'weekend', 'first', 'range-preview'), $not: ('special', 'current')) { + @extend %date-selected-weekend-first-last-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'weekend', 'last', 'range-preview'), $not: ('special', 'current')) { + @extend %date-selected-weekend-first-last-not-special-currnet !optional; + } + + @include e(date, $mods: ('selected', 'weekend', 'first', 'last', 'active'), $not: ('special', 'current')) { + @extend %date-selected-weekend-first-last-active-not-special-currnet !optional; + } + @include e(date, $mods: ('selected', 'active')) { @extend %date-selected-active !optional; } + @include e(date, $mods: ('selected', 'active'), $not: ('range')) { + @extend %date-selected-active-not-in-range !optional; + } + @include e(date, $mods: ('selected', 'special')) { @extend %date-selected-special !optional; } + @include e(date, $mods: ('selected', 'special', 'first')) { + @extend %date-selected-special-first !optional; + } + + @include e(date, $mods: ('selected', 'special', 'last')) { + @extend %date-selected-special-last !optional; + } + + @include e(date, $mods: ('selected', 'special', 'first', 'last')) { + @extend %date-selected-special-first-last !optional; + } + + @include e(date, $mods: ('selected', 'special', 'first', 'active')) { + @extend %date-selected-special-first-active !optional; + } + + @include e(date, $mods: ('selected', 'special', 'last', 'active')) { + @extend %date-selected-special-last-active !optional; + } + + @include e(date, $mods: ('selected', 'special', 'first', 'last', 'active')) { + @extend %date-selected-special-first-last-active !optional; + } + @include e(date, $mods: ('selected', 'special', 'active')) { @extend %date-selected-special-active !optional; } @@ -175,6 +247,10 @@ } } + @include e(date, 'range', $not: ('first', 'last', 'current', 'special')) { + @extend %date-range-not-first-last-current-special !optional; + } + @include e(date, 'range-preview') { @extend %date-range-preview !optional; } @@ -183,26 +259,42 @@ @extend %date-range-preview-inactive !optional; } + @include e(date, $mods: ('range-preview', 'active')) { + @extend %date-range-preview-active !optional; + } + + @include e(date, $mods: ('range-preview', 'weekend')) { + @extend %date-range-preview-weekend !optional; + } + + @include e(date, $mods: ('range-preview', 'weekend', 'first')) { + @extend %date-range-preview-weekend-first !optional; + } + + @include e(date, $mods: ('range-preview', 'weekend', 'last')) { + @extend %date-range-preview-weekend-last !optional; + } + + @include e(date, $mods: ('range-preview', 'weekend', 'active')) { + @extend %date-range-preview-weekend-active !optional; + } + @include e(date, $mods: ('range-preview', 'current')) { @extend %date-range-preview-current !optional; } - @include e(date, $mods: ('range-preview', 'special')) { - @extend %date-range-preview-special !optional; + @include e(date, $mods: ('range-preview', 'current', 'active')) { + @extend %date-range-preview-current-active !optional; } - @include e(date, $mods: ('range-preview', 'special', 'current')) { - @extend %date-range-preview-special-current !optional; + @include e(date, $mods: ('range-preview', 'special')) { + @extend %date-range-preview-special !optional; } @include e(date, $mods: ('range', 'selected')) { @extend %date-range-selected !optional; } - @include e(date, $mods: ('range', 'selected', 'first')) { - @extend %date-range-selected-first !optional; - } - @include e(date, $mods: ('first', 'last')) { @extend %date-first-last !optional; } @@ -211,6 +303,10 @@ @extend %date-range-selected-current-first !optional; } + @include e(date, $mods: ('range', 'selected', 'current', 'first', 'active')) { + @extend %date-range-selected-current-first-active !optional; + } + @include e(date, $mods: ('range', 'selected', 'special', 'first')) { @extend %date-range-selected-special-first !optional; } @@ -219,10 +315,42 @@ @extend %date-range-selected-current-last !optional; } + @include e(date, $mods: ('range', 'selected', 'current', 'last', 'active')) { + @extend %date-range-selected-current-last-active !optional; + } + + @include e(date, $mods: ('range', 'selected', 'first')) { + @extend %date-range-selected-first !optional; + } + @include e(date, $mods: ('range', 'selected', 'last')) { @extend %date-range-selected-last !optional; } + @include e(date, $mods: ('range', 'first')) { + @extend %date-range-first !optional; + } + + @include e(date, $mods: ('range', 'last')) { + @extend %date-range-last !optional; + } + + @include e(date, $mods: ('range', 'selected', 'special')) { + @extend %date-range-selected-special !optional; + } + + @include e(date, $mods: ('range', 'selected', 'special', 'active')) { + @extend %date-range-selected-special-active !optional; + } + + @include e(date, $mods: ('range', 'selected', 'special', 'current')) { + @extend %date-range-selected-special-current !optional; + } + + @include e(date, $mods: ('range', 'selected', 'special', 'current', 'active')) { + @extend %date-range-selected-special-current-active !optional; + } + @include e(date, $mods: ('range', 'selected', 'special', 'last')) { @extend %date-range-selected-special-last !optional; } @@ -236,11 +364,11 @@ } @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) { - @extend %date-selected-special-current-last !optional; + @extend %date-selected-special-current-first !optional; } @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'last')) { - @extend %date-selected-special-current-first !optional; + @extend %date-selected-special-current-last !optional; } @include e(date, $mods: ('range', 'selected', 'active')) { @@ -263,14 +391,30 @@ @extend %date-selected-current-range-active !optional; } + @include e(date, $mods: ('range', 'selected', 'current'), $not: ('first', 'last')) { + @extend %date-selected-current-range-not-first-last !optional; + } + + @include e(date, $mods: ('range', 'selected', 'current', 'active'), $not: ('first', 'last')) { + @extend %date-selected-current-range-active-not-first-last !optional; + } + @include e(date, $mods: ('range', 'selected', 'current', 'special')) { - @extend %date-selected-current-range-special !optional; + @extend %date-selected-current-range-special!optional; } @include e(date, $mods: ('range', 'selected', 'current', 'special', 'active')) { @extend %date-selected-current-range-special-active !optional; } + @include e(date, $mods: ('range', 'selected', 'current', 'special'), $not: ('first', 'last')) { + @extend %date-selected-current-range-special-not-first-last !optional; + } + + @include e(date, $mods: ('range', 'selected', 'current', 'special', 'active'), $not: ('first', 'last')) { + @extend %date-selected-current-range-special-active-not-first-last !optional; + } + @include e(date, $mods: ('range', 'selected', 'current', 'first')) { @extend %date-selected-current-range-first !optional; } @@ -319,6 +463,30 @@ @extend %date-selected-current-active !optional; } + @include e(date, $mods: ('current', 'selected', 'first')) { + @extend %date-selected-current-first !optional; + } + + @include e(date, $mods: ('current', 'selected', 'last')) { + @extend %date-selected-current-last !optional; + } + + @include e(date, $mods: ('current', 'selected', 'first', 'last')) { + @extend %date-selected-current-first-last !optional; + } + + @include e(date, $mods: ('current', 'selected', 'first', 'active')) { + @extend %date-selected-current-first-active !optional; + } + + @include e(date, $mods: ('current', 'selected', 'last', 'active')) { + @extend %date-selected-current-last-active !optional; + } + + @include e(date, $mods: ('current', 'selected', 'first', 'last', 'active')) { + @extend %date-selected-current-first-last-active !optional; + } + @include e(date, $mods: ('current', 'selected', 'special')) { @extend %date-selected-current-special !optional; } @@ -331,6 +499,46 @@ @extend %date-special !optional; } + @include e(date, $mods: ('special', 'range')) { + @extend %date-special-range !optional; + } + + @include e(date, $mods: ('special', 'range-preview')) { + @extend %date-special-range-preview !optional; + } + + @include e(date, $mods: ('special', 'range-preview', 'disabled')) { + @extend %date-special-range-preview-disabled !optional; + } + + @include e(date, $mods: ('special', 'current', 'range-preview')) { + @extend %date-special-current-range-preview !optional; + } + + @include e(date, $mods: ('special', 'selected', 'first', 'last')) { + @extend %date-special-range-preview !optional; + } + + @include e(date, $mods: ('special', 'current', 'selected', 'first', 'last')) { + @extend %date-special-current-range-preview !optional; + } + + @include e(date, $mods: ('special', 'range-preview', 'active')) { + @extend %date-special-range-preview-active !optional; + } + + @include e(date, $mods: ('special', 'current', 'range-preview', 'active')) { + @extend %date-special-current-range-preview-active !optional; + } + + @include e(date, $mods: ('special', 'selected', 'active', 'first', 'last')) { + @extend %date-special-range-preview-active !optional; + } + + @include e(date, $mods: ('special', 'current', 'selected', 'active', 'first', 'last')) { + @extend %date-special-current-range-preview-active !optional; + } + @include e(date, $mods: ('special', 'current')) { @extend %date-special-current !optional; } @@ -343,12 +551,15 @@ @extend %date-special-current-selected-active !optional; } - @include e(date, $mods: ('special' 'active')) { + @include e(date, $mods: ('special', 'active')) { @extend %date-special-active !optional; } + @include e(date, $mods: ('special', 'range', 'active')) { + @extend %date-special-range-active !optional; + } + @include e(date, $mods: ('special', 'current', 'active')) { - @extend %date-special-current !optional; @extend %date-special-current-active !optional; } @@ -361,6 +572,22 @@ @extend %date-first !optional; } + @include e(date, $mods: ('first', 'special')) { + @extend %date-first-special !optional; + } + + @include e(date, $mods: ('first', 'special', 'active')) { + @extend %date-first-special-active !optional; + } + + @include e(date, $mods: ('first', 'current')) { + @extend %date-first-current !optional; + } + + @include e(date, $mods: ('first', 'special', 'current')) { + @extend %date-first-special-current !optional; + } + @include e(date, $mods: ('first', 'range-preview')) { @extend %date-first-preview !optional; } @@ -373,18 +600,40 @@ @extend %date-first-preview-selected !optional; } - @include e(date, $mods: ('first', 'range-preview', 'current', 'selected')) { - @extend %date-first-preview-current-selected !optional; + @include e(date, $mods: ('first', 'range-preview', 'selected', 'active')) { + @extend %date-first-preview-selected-active !optional; + } + + @include e(date, $mods: ('first', 'range-preview', 'current')) { + @extend %date-first-preview-current !optional; + } + + @include e(date, $mods: ('first', 'range-preview', 'current', 'active')) { + @extend %date-first-preview-current-active !optional; } @include e(date, $mods: ('last', 'range-preview', 'selected')) { @extend %date-last-preview-selected !optional; } - @include e(date, $mods: ('last', 'range-preview', 'current', 'selected')) { + @include e(date, $mods: ('last', 'range-preview', 'selected', 'active')) { + @extend %date-last-preview-selected-active !optional; + } + + @include e(date, $mods: ('last', 'range-preview', 'current', 'selected')) { @extend %date-last-preview-current-selected !optional; } + + + @include e(date, $mods: ('last', 'range-preview', 'current')) { + @extend %date-last-preview-current !optional; + } + + @include e(date, $mods: ('last', 'range-preview', 'current', 'active')) { + @extend %date-last-preview-current-active !optional; + } + @include e(date, $mods: ('first', 'range-preview', 'special')) { @extend %date-first-preview-special !optional; } @@ -441,6 +690,22 @@ @extend %date-last !optional; } + @include e(date, $mods: ('last', 'special')) { + @extend %date-last-special !optional; + } + + @include e(date, $mods: ('last', 'special', 'active')) { + @extend %date-last-special-active !optional; + } + + @include e(date, $mods: ('last', 'current')) { + @extend %date-last-current !optional; + } + + @include e(date, $mods: ('last', 'special', 'current')) { + @extend %date-last-special-current !optional; + } + @include e(label) { @extend %date !optional; @extend %weekday-label !optional; @@ -462,7 +727,11 @@ @extend %date-disabled !optional; } - @include e(date, $mods: ('disabled', 'range')) { + @include e(date, 'disabled', $not: ('range', 'special', 'current', 'first', 'last')) { + @extend %only-date-disabled !optional; + } + + @include e(date, $mods: ('disabled', 'range'), $not: ('special', 'current', 'first', 'last')) { @extend %date-disabled-range !optional; } @@ -507,7 +776,7 @@ } @include e(date, $mods: ('range', 'selected', 'last', 'disabled')) { - @extend %date-range-selected-first-disabled !optional; + @extend %date-range-selected-last-disabled !optional; } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index 14004190d7e..0f1d3709e8a 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -551,9 +551,8 @@ content: ''; position: absolute; background: var-get($theme, 'week-number-background'); - border-inline: rem(1px) solid var-get($theme, 'week-number-background'); - inset-block-start: 100%; - height: calc(#{$date-view-row-gap} + #{rem(if($variant == 'indigo', 0px, 2px))}); + inset-block-start: calc(100% + #{$border-size}); + height: $date-view-row-gap; width: $date-size; } } @@ -769,42 +768,24 @@ cursor: pointer; } - &::after { - content: ''; - position: absolute; - z-index: 0; - border: $border-size solid transparent; - border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); - - @if $variant == 'fluent' { - width: $date-inner-size; - height: $date-inner-size; - } @else { - // By default initial size of the inner element is the same as the date size - width: $date-size; - height: $date-size; - } - } - &%date-inner-week-number { min-width: auto; width: $date-size; color: var-get($theme, 'week-number-foreground'); background: var-get($theme, 'week-number-background'); - // This is not an actual date and should not change it's border when changing the date border - border-color: var-get($theme, 'week-number-background'); - - &::after { - display: none !important; - } - &::before { content: ''; position: absolute; background: var-get($theme, 'week-number-background'); - inset-block-start: 100%; - height: calc(#{$date-view-row-gap} + #{rem(if($variant == 'indigo', 0, 2px))}); + + @if $variant != 'indigo' { + inset-block-start: calc(100% + #{$border-size}); + } @else { + inset-block-start: 100%; + } + + height: $date-view-row-gap; width: $date-size; } } @@ -862,12 +843,41 @@ %date-selected-special { %date-inner { + color: var-get($theme, 'date-selected-special-foreground'); + + @if $variant == 'bootstrap' { + border-radius: var-get($theme, 'date-border-radius'); + } + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-special-background'); + } + + &::after { + width: $date-inner-size; + height: $date-inner-size; + + @if $variant == 'fluent' { + background: var-get($theme, 'date-selected-special-background'); + } + border-color: var-get($theme, 'date-selected-special-border-color'); } &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-special-hover-background'); + } + &::after { + /* stylelint-disable-next-line max-nesting-depth */ + @if $variant == 'fluent' { + background: var-get($theme, 'date-selected-special-hover-background'); + } + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } } @@ -876,10 +886,18 @@ %date-selected-special-active { %date-inner { + color: var-get($theme, 'date-selected-special-focus-foreground'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-special-focus-background'); + } + &::after { - @if $variant != 'fluent' { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); + @if $variant == 'fluent' { + background: var-get($theme, 'date-selected-special-focus-background'); } + + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } } @@ -900,39 +918,25 @@ %date-selected-special-range { %date-inner { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); + @if $variant != 'fluent' { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); + } &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - - @if $variant == 'indigo' { - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } + @if $variant != 'fluent' { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); } - } - @if $variant == 'material' { &::after { - border-color: var-get($theme, 'date-special-range-border-color'); - } - - &:hover { - //color: var-get($theme, 'date-special-hover-foreground'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } + border-color: var-get($theme, 'date-special-range-hover-border-color'); } } - @if $variant == 'bootstrap' or $variant == 'indigo' { + @if $variant != 'fluent' { &::after { - border-color: var-get($theme, 'date-special-border-color'); + border-color: var-get($theme, 'date-special-range-border-color'); } } } @@ -952,11 +956,13 @@ %date-selected-special-range-active { %date-inner { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); + @if $variant != 'fluent' { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); + } &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-range-focus-border-color'); } } } @@ -964,17 +970,19 @@ %date-current { %date-inner { color: var-get($theme, 'date-current-foreground'); - border-color: var-get($theme, 'date-current-border-color'); + @if $variant != 'fluent' { background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + border-radius: var-get($theme, 'date-current-border-radius'); } &:hover { color: var-get($theme, 'date-current-hover-foreground'); - border-color: var-get($theme, 'date-current-hover-border-color'); @if $variant != 'fluent' { + border-color: var-get($theme, 'date-current-hover-border-color'); background: var-get($theme, 'date-current-hover-background'); } } @@ -988,11 +996,20 @@ height: $date-inner-size; border-radius: calc(var-get($theme, 'date-current-border-radius') - ($border-size * 2)); background: var-get($theme, 'date-current-background'); + border: $border-size solid var-get($theme, 'date-current-border-color'); } &::after { border-radius: calc(var-get($theme, 'date-current-border-radius') - $border-size); } + + &:hover { + /* stylelint-disable-next-line max-nesting-depth */ + &::before { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } } @if $variant == 'indigo' { @@ -1004,6 +1021,115 @@ } } + %date-selected-current-first, + %date-selected-current-last, + %date-selected-current-first-last, + %date-selected-special-first, + %date-selected-special-last, + %date-selected-special-first-last { + @if $variant == 'material' or $variant == 'bootstrap' { + %date-inner { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + } + } + } + + @if $variant == 'bootstrap' { + %date-inner { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + } + + %date-selected-current-first, + %date-selected-current-last, + %date-selected-current-first-last { + @if $variant == 'material' { + %date-inner { + border-color: var-get($theme, 'date-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + } + } + + %date-selected-current-first-last { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'date-current-foreground'); + + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } + + &:hover { + color: var-get($theme, 'date-current-foreground'); + + /* stylelint-disable-next-line max-nesting-depth */ + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + } + } + } + + %date-selected-current-first-last-active { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'date-current-foreground'); + + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + } + + %date-selected-current-first-active, + %date-selected-current-last-active, + %date-selected-current-first-last-active, + %date-selected-special-first-active, + %date-selected-special-last-active, + %date-selected-special-first-last-active { + @if $variant == 'material' or $variant == 'bootstrap' { + %date-inner { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } + } + + @if $variant == 'bootstrap' { + %date-inner { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + } + + %date-selected-current-first-active, + %date-selected-current-last-active, + %date-selected-current-first-last-active, { + @if $variant == 'material' { + %date-inner { + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + %date-current-range { %date-inner { color: var-get($theme, 'date-current-foreground'); @@ -1013,8 +1139,16 @@ %date-current-active { %date-inner { color: var-get($theme, 'date-current-focus-foreground'); - background: var-get($theme, 'date-current-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } @else { + &::before { + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } } } @@ -1028,102 +1162,314 @@ %date-special { %date-inner { + color: var-get($theme, 'date-special-foreground'); + @if $variant == 'indigo' { font-weight: 700; } - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); + @if $variant == 'material' or $variant == 'indigo' { + background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-special-border-radius'); + } + + @if $variant == 'bootstrap' { + background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-border-radius'); + } &::after { - border-color: var-get($theme, 'date-special-border-color'); + content: ''; + position: absolute; + border: $border-size solid var-get($theme, 'date-special-border-color'); + + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-special-border-radius'); + width: $date-inner-size; + height: $date-inner-size; + z-index: -1; + } @else { + z-index: 0; + width: $date-size; + height: $date-size; + border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); + } - @if $variant == 'bootstrap' or $variant == 'fluent' { + @if $variant == 'bootstrap' { border-radius: calc(var-get($theme, 'date-special-border-radius') - ($border-size * 2)); } } &:hover { color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-hover-background'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-hover-background'); + } &::after { border-color: var-get($theme, 'date-special-hover-border-color'); + + /* stylelint-disable-next-line max-nesting-depth */ + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-hover-background'); + } } } } } - %date-special-active { + %date-special-range { %date-inner { - background: var-get($theme, 'date-special-focus-background'); - color: var-get($theme, 'date-special-focus-foreground'); + color: var-get($theme, 'date-special-range-foreground'); - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-range-background'); } - } - } - %date-special-current { - %date-inner { - @if $variant == 'material' or $variant == 'indigo' { - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); + + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-range-background'); } } - @if $variant == 'indigo' { - background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-border-color'); + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); - &:hover { - background: var-get($theme, 'date-current-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-range-hover-background'); } &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - } + border-color: var-get($theme, 'date-special-range-hover-border-color'); - @if $variant == 'fluent' { - color: var-get($theme, 'date-current-foreground'); - - &::after { - border-color: var-get($theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + /* stylelint-disable-next-line max-nesting-depth */ + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-range-hover-background'); + } } } } } - @if $variant == 'indigo' { - %date-special-current-active { - %date-inner { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-current-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); + %date-special-active { + %date-inner { + color: var-get($theme, 'date-special-focus-foreground'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-focus-background'); } - } - %date-special-current-selected { - %date-inner { - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + &::after { + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-focus-background'); } + + border-color: var-get($theme, 'date-special-focus-border-color'); } } } - %date-special-current-selected-active { + %date-special-range-active { %date-inner { - &::after { - @if $variant != 'fluent' { - border-color: var-get($theme, 'date-selected-special-border-color'); + color: var-get($theme, 'date-special-range-focus-foreground'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-range-focus-background'); + } + + &::after { + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-range-focus-background'); + } + + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } + } + } + + + @if $variant == 'fluent' { + // Revert hover and focus styles for special and special current dates in range preview + // They have to look the same as idle special/current dates, so no :hover or :focus styles in range preview + %date-special-range-preview { + %date-inner { + color: var-get($theme, 'date-special-foreground'); + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + } + + &:hover { + color: var-get($theme, 'date-special-foreground'); + background: transparent; + + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + } + } + } + } + + %date-special-range-preview-active { + %date-inner { + color: var-get($theme, 'date-special-foreground'); + background: transparent; + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + } + } + } + + %date-special-current-range-preview { + %date-inner { + color: var-get($theme, 'date-current-foreground'); + + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } + + &:hover { + color: var-get($theme, 'date-current-foreground'); + background: transparent; + + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } + } + } + } + + %date-special-current-range-preview-active { + %date-inner { + color: var-get($theme, 'date-current-foreground'); + background: transparent; + + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } + } + } + } + + %date-special-range-preview-disabled { + @if $variant == 'bootstrap' { + %date-inner { + color: var-get($theme, 'date-special-range-foreground'); + } + } + } + + + %date-special-current { + %date-inner { + @if $variant != 'fluent' { + border-radius: var-get($theme, 'date-current-border-radius'); + } + + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + + @if $variant == 'bootstrap' { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + @if $variant == 'material' or $variant == 'bootstrap' { + &::after { + width: $date-inner-size; + height: $date-inner-size; + } + } + + @if $variant == 'indigo' { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + + &:hover { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + + &::after { + width: calc($date-inner-size - #{rem(4px)}); + height: calc($date-inner-size - #{rem(4px)}); + } + } + + @if $variant == 'fluent' { + color: var-get($theme, 'date-current-foreground'); + + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + width: sizable(rem(22px), rem(24px), rem(28px)); + height: sizable(rem(22px), rem(24px), rem(28px)); + } + } + } + } + + @if $variant == 'indigo' { + %date-special-current-active { + %date-inner { + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + + %date-special-current-selected { + %date-inner { + &::after { + width: calc($date-inner-size - #{rem(4px)}); + height: calc($date-inner-size - #{rem(4px)}); + } + } + } + } + + @if $variant == 'fluent' { + %date-special-current-selected { + %date-inner { + &::after { + border-color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); + } + + &:hover { + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + } + } + } + } + } + + %date-special-current-selected-active { + %date-inner { + &::after { + @if $variant == 'fluent' { + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + } + + @if $variant != 'fluent' { + border-color: var-get($theme, 'date-selected-special-border-color'); } } } @@ -1133,34 +1479,148 @@ %date-inner { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); - border-color: var-get($theme, 'date-selected-border-color'); + + @if $variant != 'bootstrap' { + border-color: var-get($theme, 'date-selected-border-color'); + } &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); + + @if $variant != 'bootstrap' { + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + } + } + } + + %date-selected-not-in-range { + %date-inner { + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { border-color: var-get($theme, 'date-selected-hover-border-color'); } } } + %date-selected-first-last { + @if $variant == 'fluent' { + %date-inner { + border-color: var-get($theme, 'date-range-preview-border-color'); + + &:hover { + border-color: var-get($theme, 'date-range-preview-border-color'); + } + } + } + } + + %date-selected-first-last-active { + @if $variant == 'fluent' { + %date-inner { + border-color: var-get($theme, 'date-range-preview-border-color'); + } + } + } + + %date-selected-first-last-not-special-currnet { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'content-foreground'); + + &:hover { + color: var-get($theme, 'content-foreground'); + } + } + } + } + + %date-selected-first-last-active-not-special-currnet { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'content-foreground'); + + &:hover { + color: var-get($theme, 'content-foreground'); + } + } + } + } + + %date-selected-weekend-first-last-not-special-currnet { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'weekend-color'); + } + } + } + } + + %date-selected-weekend-first-last-active-not-special-currnet { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'weekend-color'); + } + } + } + } + %date-selected-active { %date-inner { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); + + @if $variant != 'bootstrap' { + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + } + + %date-selected-active-not-in-range { + %date-inner { border-color: var-get($theme, 'date-selected-focus-border-color'); } } + %date-selected-current { %date-inner { color: var-get($theme, 'date-selected-current-foreground'); - background: var-get($theme, 'date-selected-current-background') ; - border-color: var-get($theme, 'date-selected-current-border-color'); + &:hover { color: var-get($theme, 'date-selected-current-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-current-background') ; + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } @else { + &::before { + background: var-get($theme, 'date-selected-current-background') ; + border-color: var-get($theme, 'date-selected-current-border-color'); + } + + &:hover { + /* stylelint-disable-next-line max-nesting-depth */ + &::before { + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } } } } @@ -1168,8 +1628,17 @@ %date-selected-current-active { %date-inner { color: var-get($theme, 'date-selected-current-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } @else { + &::before { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } } } @@ -1198,32 +1667,36 @@ } } - @if $variant == 'fluent' { - %date-selected-current-special { - %date-inner { - &::after { - border-color: var-get($theme, 'date-selected-current-background'); - } - } - } - } + //@if $variant == 'fluent' { + // %date-selected-current-special { + // %date-inner { + // &::after { + // border-color: var-get($theme, 'date-selected-current-background'); + // } + // } + // } + //} %date-inactive { cursor: default; %date-inner { color: var-get($theme, 'inactive-color'); + border-color: transparent; &:hover { - color: var-get($theme, 'inactive-color'); + color: var-get($theme, 'date-hover-foreground'); + border-color: transparent; } } } - %date-inactive-special { - %date-inner { - &::after { - border-color: transparent; + @if $variant == 'fluent' { + %date-inactive-range-preview { + %date-inner { + &:hover { + color: var-get($theme, 'inactive-color'); + } } } } @@ -1231,36 +1704,46 @@ %date-selected-current-range { %date-inner { color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); - @if $variant == 'material' or $variant == 'bootstrap' { - border-color: var-get($theme, 'date-selected-current-border-color'); + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-current-range-background'); } @if $variant == 'indigo' { - border-color: transparent; + border-color: var-get($theme, 'date-selected-current-border-color'); + } - &::after { - border-color: var-get($theme, 'date-current-border-color'); + @if $variant == 'fluent' { + &::before { + background: var-get($theme, 'date-selected-current-range-background'); } } + @if $variant == 'material' or $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-border-color'); + } + &:hover { color: var-get($theme, 'date-selected-current-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); - @if $variant == 'material' or $variant == 'bootstrap' { + @if $variant == 'indigo' { border-color: var-get($theme, 'date-selected-current-hover-border-color'); } - @if $variant == 'indigo' { - border-color: transparent; - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-current-hover-border-color'); + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-current-range-hover-background'); + } + + @if $variant == 'fluent' { + /* stylelint-disable-next-line max-nesting-depth */ + &::before { + background: var-get($theme, 'date-selected-current-range-hover-background'); } } + + @if $variant == 'material' or $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } } } } @@ -1268,20 +1751,61 @@ %date-selected-current-range-active { %date-inner { color: var-get($theme, 'date-selected-current-range-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); + + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-current-range-focus-background'); + } + + @if $variant == 'fluent' { + &::before { + background: var-get($theme, 'date-selected-current-range-focus-background'); + } + } @if $variant == 'material' or $variant == 'bootstrap' { border-color: var-get($theme, 'date-selected-current-focus-border-color'); } + } + } - @if $variant == 'indigo' { - border-color: transparent; + @if $variant == 'bootstrap' or $variant == 'indigo' { + %date-selected-current-range-not-first-last { + %date-inner { + border-color: var-get($theme, 'date-current-border-color'); - &::after { - border-color: var-get($theme, 'date-current-focus-border-color'); + &:hover { + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + } + + %date-selected-current-range-active-not-first-last { + %date-inner { + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + + @if $variant == 'indigo' { + %date-selected-current-range-not-first-last { + %date-inner { + color: var-get($theme, 'date-current-foreground'); + + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); } } } + + %date-selected-current-range-active-not-first-last { + %date-inner { + color: var-get($theme, 'date-current-focus-foreground'); + } + } } %date-selected-current-range-first, @@ -1303,34 +1827,41 @@ } %date-selected-current-range-special { - %date-inner { - @if $variant != 'fluent' { - color: var-get($theme, 'date-special-range-foreground'); - } @else { - color: var-get($theme, 'date-selected-current-range-foreground'); - } - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-current-border-color'); - } - - &:hover { - @if $variant == 'fluent' { - color: var-get($theme, 'date-selected-current-range-foreground'); - } @else { - color: var-get($theme, 'date-special-hover-foreground'); + @if $variant == 'fluent' { + %date-inner { + &::after { + background: var-get($theme, 'date-selected-current-range-background'); + } - // stylelint-disable-next-line + &:hover { + /* stylelint-disable-next-line max-nesting-depth */ &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + background: var-get($theme, 'date-selected-current-range-hover-background'); } } + } + } + } - @if $variant == 'indigo' { - background: var-get($theme, 'date-selected-current-range-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); + %date-selected-current-range-special-active { + @if $variant == 'fluent' { + %date-inner { + &::after { + background: var-get($theme, 'date-selected-current-range-focus-background'); } } + } + } + + %date-selected-current-range-special-not-first-last { + %date-inner { + @if $variant == 'material' or $variant == 'indigo' { + color: var-get($theme, 'date-special-range-foreground'); + } + + @if $variant == 'fluent' or $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-current-range-foreground'); + } &::after { @if $variant != 'fluent' { @@ -1344,30 +1875,80 @@ @if $variant == 'indigo' { width: calc($date-inner-size - #{rem(4px)}); height: calc($date-inner-size - #{rem(4px)}); + border-color: var-get($theme, 'date-special-range-border-color'); } @if $variant == 'fluent' { - border-color: var-get($theme, 'date-current-foreground'); + border-color: var-get($theme, 'date-selected-current-foreground'); } - @if $variant == 'material' or $variant == 'bootstrap' { + @if $variant == 'material' { border-color: var-get($theme, 'date-special-range-border-color'); } - @if $variant == 'indigo' { + @if $variant == 'bootstrap' { border-color: var-get($theme, 'date-special-range-border-color'); } } + + &:hover { + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-current-range-foreground'); + + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + } + } + + @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + } + + @if $variant == 'material' or $variant == 'indigo' { + color: var-get($theme, 'date-special-hover-foreground'); + + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-special-hover-border-color'); + } + } + + @if $variant == 'indigo' { + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + + @if $variant == 'material' or $variant == 'bootstrap' { + + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + } + } } } - %date-selected-current-range-special-active:not(%date-selected-current-range-special-first), - %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) { + %date-selected-current-range-special-active-not-first-last { %date-inner { - @if not $bootstrap-theme and not $variant == 'fluent' { + @if $variant == 'material' or $variant == 'indigo' { color: var-get($theme, 'date-special-focus-foreground'); } + @if $variant == 'fluent' { + &::after { + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } + } + + @if $variant == 'bootstrap' { + &::after { + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } + } + + @if $variant == 'indigo' { background: var-get($theme, 'date-selected-current-range-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); @@ -1376,6 +1957,13 @@ border-color: var-get($theme, 'date-special-hover-border-color'); } } + + @if $variant == 'material' { + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } + } } } @@ -1404,6 +1992,7 @@ %date-inner { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); &::after { width: calc($date-inner-size - #{rem(4px)}); @@ -1414,6 +2003,7 @@ &:hover { color: var-get($theme, 'date-selected-hover-foreground'); background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); // stylelint-disable-next-line &::after { @@ -1430,6 +2020,7 @@ %date-inner { color: var-get($theme, 'date-selected-focus-foreground') !important; background: var-get($theme, 'date-selected-focus-background') !important; + border-color: var-get($theme, 'date-selected-current-focus-border-color'); &::after { width: calc($date-inner-size - #{rem(4px)}); @@ -1446,17 +2037,73 @@ } } - %date-range-selected-active-first { + %date-range-selected-special { + @if $variant == 'fluent' { + %date-inner { + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + + /* stylelint-disable-next-line max-nesting-depth */ + &::after { + background: var-get($theme, 'date-special-range-hover-background'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + } + } + } + } + + %date-range-selected-special-active { + @if $variant == 'fluent' { + %date-inner { + color: var-get($theme, 'date-special-range-focus-foreground'); + + &::after { + background: var-get($theme, 'date-special-range-focus-background'); + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } + } + } + } + + %date-range-selected-special-current { %date-inner { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + &::after { + border-color: var-get($theme, 'date-selected-current-foreground'); + } + + &:hover { + &::after { + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + } + } + } + } + + %date-range-selected-special-current-active { + %date-inner { + &::after { + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } } } + %date-range-selected-active-first, %date-range-selected-active-last { %date-inner { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + @if $variant != 'fluent' { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } + + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } } } @@ -1471,12 +2118,19 @@ @if $variant == 'fluent' { height: 100%; + border-radius: var-get($theme, 'date-range-border-radius'); } @else { height: $date-height; } } } + %date-range-not-first-last-current-special { + %date-inner { + border-color: transparent; + } + } + %date-range-hover { border-top-color: var-get($theme, 'date-range-border-color'); border-bottom-color: var-get($theme, 'date-range-border-color'); @@ -1484,8 +2138,7 @@ %date-range-selected-first, %date-range-selected-last { - background: transparent; - border-block-color: transparent; + z-index: 0; @if $variant == 'fluent' { %date-inner { @@ -1498,15 +2151,12 @@ } } - z-index: 0; - &::after { position: absolute; content: ''; z-index: -1; color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-range-background'); - border-block: $border-size solid transparent; } &::before { @@ -1517,6 +2167,12 @@ } } + %date-range-first, + %date-range-last { + background: transparent; + border-block-color: transparent; + } + %date-range-selected-first-disabled, %date-range-selected-last-disabled { %date-inner { @@ -1536,6 +2192,10 @@ %date-range-selected-special-first, %date-range-selected-special-last { %date-inner { + @if $variant == 'fluent' { + color: var-get($theme, 'date-special-range-foreground'); + } + &::after { width: $date-inner-size; height: $date-inner-size; @@ -1569,42 +2229,35 @@ } } - %date-selected-special-first-last { + %date-range-selected-first, + %date-range-selected-last { %date-inner { - &::after { - @if $variant == 'material' or $variant == 'bootstrap' { - border-color: var-get($theme, 'date-selected-foreground'); - } + @if $variant != 'fluent' { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-current-border-color'); + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } } - } - } - %date-range-selected-first { - %date-inner { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - border-radius: var-get($theme, 'date-range-border-radius'); + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-border-color'); - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + &:hover { + border-color: var-get($theme, 'date-selected-hover-border-color'); + } } - } - } - %date-range-selected-last { - %date-inner { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - border-radius: var-get($theme, 'date-range-border-radius'); + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-range-foreground'); + background: var-get($theme, 'date-selected-range-background'); - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } } } } @@ -1622,6 +2275,26 @@ } } + @if $variant == 'bootstrap' { + %date-range-selected-current-first, + %date-range-selected-current-last { + %date-inner { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + %date-range-selected-current-first-active, + %date-range-selected-current-last-active { + %date-inner { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + } + %date-first { &::after { inset-inline-start: 50%; @@ -1634,6 +2307,77 @@ } } + %date-first, + %date-last { + %date-inner { + border-radius: var-get($theme, 'date-range-border-radius'); + } + } + + %date-first-special, + %date-last-special { + %date-inner { + @if $variant != 'fluent' or $variant != 'bootstrap' { + border-radius: var-get($theme, 'date-special-border-radius'); + } + + @if $variant == 'bootstrap' { + border-radius: var-get($theme, 'date-range-border-radius'); + } + + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + } + + &:hover { + @if $variant == 'bootstrap' { + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + } + } + + %date-first-special-active, + %date-last-special-active { + %date-inner { + @if $variant == 'bootstrap' { + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + } + + %date-first-current, + %date-first-special-current, + %date-last-current, + %date-last-special-current { + %date-inner { + @if $variant == 'material' or $variant == 'indigo' { + border-radius: var-get($theme, 'date-current-border-radius'); + } + + @if $variant == 'bootstrap' { + border-radius: var-get($theme, 'date-range-border-radius'); + } + + &::after { + @if $variant == 'bootstrap' { + border-radius: var-get($theme, 'date-special-border-radius'); + } @else { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } + } + } + %date-range-selected { &::after { border-block: $border-size solid var-get($theme, 'date-range-border-color'); @@ -1644,9 +2388,6 @@ border-color: transparent !important; } - @if $variant != 'fluent' and $variant != 'indigo' { - border-inline-color: transparent; - } &:hover { background: var-get($theme, 'date-selected-range-hover-background'); @@ -1693,8 +2434,8 @@ %date-range-selected-first { %date-inner { - border-start-end-radius: var-get($theme, 'date-border-radius'); - border-end-end-radius: var-get($theme, 'date-border-radius'); + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); } &::before { @@ -1706,8 +2447,8 @@ %date-range-selected-last { %date-inner { - border-start-start-radius: var-get($theme, 'date-border-radius'); - border-end-start-radius: var-get($theme, 'date-border-radius'); + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); } &::before { @@ -1752,6 +2493,7 @@ } @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-range-foreground'); background: var-get($theme, 'date-selected-range-background'); &::after { @@ -1760,12 +2502,18 @@ } %date-inner { - color: var-get($theme, 'date-selected-range-foreground'); + @if $variant == 'fluent' { + border-color: transparent; + } &:hover { - @if not $bootstrap-theme { - color: var-get($theme, 'date-selected-range-hover-foreground'); - } @else { + @if $variant == 'fluent' { + color: var-get($theme, 'content-foreground'); + background: transparent; + border-color: transparent; + } + + @if $bootstrap-theme { color: var-get($theme, 'date-selected-foreground'); } } @@ -1774,35 +2522,92 @@ %date-range-preview-inactive { %date-inner { - color: var-get($theme, 'inactive-color'); + @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-range-foreground'); + } } } - %date-range-preview-current { + %date-range-preview-active { %date-inner { - color: var-get($theme, 'date-selected-current-range-foreground'); + @if $variant == 'fluent' { + color: var-get($theme, 'content-foreground'); + background: transparent; + } + } + } + %date-range-preview-weekend { + %date-inner { @if $variant == 'bootstrap' { - color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); + color: var-get($theme, 'date-selected-range-foreground'); + } + + &:hover { + color: var-get($theme, 'weekend-color'); } } } - %date-range-preview-special { + %date-range-preview-weekend-first, + %date-range-preview-weekend-last { + @if $variant == 'bootstrap' { + %date-inner { + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + } + } + } + } + + %date-range-preview-weekend-active { %date-inner { - color: var-get($theme, 'date-special-foreground'); + @if $variant == 'fluent' { + color: var-get($theme, 'weekend-color'); + background: transparent; + } } } - @if $variant == 'fluent' { - %date-range-preview-special-current { - %date-inner { - color: var-get($theme, 'date-selected-current-range-foreground'); + %date-range-preview-current { + %date-inner { + @if $variant == 'bootstrap' { + color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } + + + @if $variant == 'fluent' { + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + } + } + } + } + + %date-range-preview-current-active { + %date-inner { + @if $variant == 'fluent' { + color: var-get($theme, 'date-current-focus-foreground'); } } } + %date-range-preview-special { + %date-inner { + color: var-get($theme, 'date-special-foreground'); + } + } + + //@if $variant == 'fluent' { + // %date-range-preview-special-current { + // %date-inner { + // color: var-get($theme, 'date-selected-current-range-foreground'); + // } + // } + //} + %date-first-preview, %date-last-preview { &::after { @@ -1837,9 +2642,22 @@ } %date-inner { - @if $variant == 'bootstrap' { + @if $variant != 'indigo' { + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + + @if $variant == 'bootstrap' { + %date-inner { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } } } } @@ -1847,7 +2665,19 @@ %date-first-preview-selected, %date-last-preview-selected { %date-inner { - color: var-get($theme, 'date-selected-foreground'); + @if $variant != 'fluent' { + color: var-get($theme, 'date-selected-foreground'); + } + } + } + + %date-first-preview-selected-active, + %date-last-preview-selected-active { + %date-inner { + @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } } } @@ -1860,6 +2690,46 @@ } } + @if $variant == 'bootstrap' { + %date-first-preview-current, + %date-last-preview-current { + %date-inner { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + %date-first-preview-current-active, + %date-last-preview-current-active { + %date-inner { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + } + + @if $variant == 'material' { + %date-first-preview-current, + %date-last-preview-current { + %date-inner { + border-color: var-get($theme, 'date-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + } + + %date-first-preview-current-active, + %date-last-preview-current-active { + %date-inner { + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + %date-first-preview { background: transparent; border-block-color: transparent ; @@ -1877,24 +2747,13 @@ } } - %date-first-preview-special { + %date-first-preview-special, + %date-last-preview-special { %date-inner { &::after { - @if $variant == 'material' or $variant == 'bootstrap' { + @if $variant == 'bootstrap' { width: var-get($theme, 'inner-size'); height: var-get($theme, 'inner-size'); - border-color: var-get($theme, 'date-selected-foreground'); - } - } - - &:hover { - &::after { - /* stylelint-disable-next-line */ - @if $variant == 'material' { - width: $date-size; - height: $date-size; - border-color: var-get($theme, 'date-special-border-color'); - } } } } @@ -1925,33 +2784,18 @@ } } - %date-last-preview-special { + %date-first-preview-special-current, + %date-last-preview-special-current { %date-inner { - &::after { - @if $variant == 'material' or $variant == 'bootstrap' { - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); - border-color: var-get($theme, 'date-selected-foreground'); - } + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-border-color'); } &:hover { - &::after { - /* stylelint-disable-next-line */ - @if $variant == 'material' { - width: $date-size; - height: $date-size; - border-color: var-get($theme, 'date-special-border-color'); - } + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } - } - } - } - %date-first-preview-special-current, - %date-last-preview-special-current { - %date-inner { - &:hover { &::after { /* stylelint-disable-next-line */ @if $variant == 'material' { @@ -1970,7 +2814,6 @@ @if $variant == 'material' { width: $date-size; height: $date-size; - border-color: var-get($theme, 'date-special-border-color'); } } } @@ -1979,11 +2822,14 @@ %date-first-preview-special-active-selected, %date-last-preview-special-active-selected { %date-inner { + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + &::after { @if $variant == 'material' { width: $date-inner-size; height: $date-inner-size; - border-color: var-get($theme, 'date-selected-foreground'); } } } @@ -2004,7 +2850,9 @@ %date-disabled { pointer-events: none; cursor: not-allowed; + } + %only-date-disabled { %date-inner { color: var-get($theme, 'date-disabled-foreground'); } @@ -2013,10 +2861,6 @@ %date-disabled-range { %date-inner { color: var-get($theme, 'date-disabled-range-foreground'); - - @if $variant == 'fluent' { - opacity: .38; - } } } @@ -2037,14 +2881,19 @@ %date-disabled-inactive { %date-inner { - color: var-get($theme, 'inactive-color'); opacity: 1; } } + %date-disabled-current { + %date-inner { + color: var-get($theme, 'date-current-foreground'); + opacity: .38; + } + } + %date-disabled-special { %date-inner { - color: var-get($theme, 'date-special-foreground'); opacity: .38; } } @@ -2057,13 +2906,6 @@ } } - %date-disabled-current { - %date-inner { - color: var-get($theme, 'date-current-foreground'); - opacity: .38; - } - } - %date-disabled-current-special { @if $variant == 'indigo' { %date-inner { diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html index eb41b90a0d9..b381413e398 100644 --- a/src/app/calendar/calendar.sample.html +++ b/src/app/calendar/calendar.sample.html @@ -47,10 +47,22 @@
+ + + + Currently disabled + selected is not possible combination! + + + @for (option of ['narrow', 'short', 'long']; track option) { diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts index 6d4827504a6..b24ae47380c 100644 --- a/src/app/calendar/calendar.sample.ts +++ b/src/app/calendar/calendar.sample.ts @@ -141,7 +141,7 @@ export class CalendarSampleComponent implements OnInit { label: 'Show Week Numbers', control: { type: 'boolean', - defaultValue: false + defaultValue: true } }, monthsViewNumber: { @@ -235,28 +235,45 @@ export class CalendarSampleComponent implements OnInit { }; } - protected disabledDates = [ - { - type: DateRangeType.Specific, - dateRange: [ - new Date(this._today.getFullYear(), this._today.getMonth(), 0), - new Date(this._today.getFullYear(), this._today.getMonth(), 20), - new Date(this._today.getFullYear(), this._today.getMonth(), 21), - ], - }, - ]; + // DISABLED DATES + private _disabledRange: DateRange = { + start: new Date(this._today.getFullYear(), this._today.getMonth(), 15), + end: new Date(this._today.getFullYear(), this._today.getMonth(), 17), + }; + + protected set disabledRange(value: DateRange) { + this.disabledDates = value; + this._disabledRange = value; + } + + protected get disabledRange(): DateRange { + return this._disabledRange; + } - protected mySpecialDates = [ + private _disabledDates: DateRangeDescriptor[] = [ { - type: DateRangeType.Specific, + type: DateRangeType.Between, dateRange: [ - new Date(this._today.getFullYear(), this._today.getMonth(), 1), - new Date(this._today.getFullYear(), this._today.getMonth(), 3), - new Date(this._today.getFullYear(), this._today.getMonth(), 7), + this.disabledRange.start as Date, + this.disabledRange.end as Date, ], }, ]; + protected get disabledDates(): DateRangeDescriptor[] { + return this._disabledDates; + } + + protected set disabledDates(dates: DateRange) { + this._disabledDates = [ + { + type: DateRangeType.Between, + dateRange: [dates.start as Date, dates.end as Date] + } + ]; + } + + // SPECIAL DATES private _specialRange: DateRange = { start: new Date(this._today.getFullYear(), this._today.getMonth(), 8), end: new Date(this._today.getFullYear(), this._today.getMonth(), 10),