From 9ea525c76e6c020213b7a88ab133621bccaa6fcb Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 27 Oct 2025 09:46:58 +0200 Subject: [PATCH 01/16] fix(calendar): fix material and indigo theme styles to match webC --- .../calendar/_calendar-component.scss | 125 ++++- .../components/calendar/_calendar-theme.scss | 449 ++++++++++-------- 2 files changed, 352 insertions(+), 222 deletions(-) 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..482d49c0a8f 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,26 +110,22 @@ @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, 'active') { @extend %date-active !optional; } @@ -146,6 +142,18 @@ @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', 'active')) { @extend %date-selected-special-active !optional; } @@ -175,12 +183,12 @@ } } - @include e(date, 'range-preview') { - @extend %date-range-preview !optional; + @include e(date, 'range', $not: ('first', 'last', 'current', 'special')) { + @extend %date-range-not-first-last-current-special !optional; } - @include e(date, $mods: ('range-preview', 'inactive')) { - @extend %date-range-preview-inactive !optional; + @include e(date, 'range-preview') { + @extend %date-range-preview !optional; } @include e(date, $mods: ('range-preview', 'current')) { @@ -199,10 +207,6 @@ @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; } @@ -219,10 +223,22 @@ @extend %date-range-selected-current-last !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', 'last')) { @extend %date-range-selected-special-last !optional; } @@ -236,11 +252,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,11 +279,11 @@ @extend %date-selected-current-range-active !optional; } - @include e(date, $mods: ('range', 'selected', 'current', 'special')) { + @include e(date, $mods: ('range', 'selected', 'current', 'special'), $not: ('first', 'last')) { @extend %date-selected-current-range-special !optional; } - @include e(date, $mods: ('range', 'selected', 'current', 'special', 'active')) { + @include e(date, $mods: ('range', 'selected', 'current', 'special', 'active'), $not: ('first', 'last')) { @extend %date-selected-current-range-special-active !optional; } @@ -319,6 +335,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 +371,10 @@ @extend %date-special !optional; } + @include e(date, $mods: ('special', 'range')) { + @extend %date-special-range !optional; + } + @include e(date, $mods: ('special', 'current')) { @extend %date-special-current !optional; } @@ -343,12 +387,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 +408,18 @@ @extend %date-first !optional; } + @include e(date, $mods: ('first', 'special')) { + @extend %date-first-special !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; } @@ -441,6 +500,18 @@ @extend %date-last !optional; } + @include e(date, $mods: ('last', 'special')) { + @extend %date-last-special !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 +533,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 +582,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..840b2174ba3 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 @@ -769,23 +769,6 @@ 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; @@ -795,10 +778,6 @@ // 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; @@ -862,11 +841,20 @@ %date-selected-special { %date-inner { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); + &::after { + width: $date-inner-size; + height: $date-inner-size; + border-color: var-get($theme, 'date-selected-special-border-color'); } &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + &::after { border-color: var-get($theme, 'date-selected-special-hover-border-color'); } @@ -876,6 +864,9 @@ %date-selected-special-active { %date-inner { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + &::after { @if $variant != 'fluent' { border-color: var-get($theme, 'date-selected-special-focus-border-color'); @@ -904,14 +895,11 @@ background: var-get($theme, 'date-special-range-background'); &:hover { - color: var-get($theme, 'date-special-hover-foreground'); + color: var-get($theme, 'date-special-range-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'); - } + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); } } @@ -919,20 +907,11 @@ &::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'); - } - } } @if $variant == 'bootstrap' or $variant == 'indigo' { &::after { - border-color: var-get($theme, 'date-special-border-color'); + border-color: var-get($theme, 'date-special-range-border-color'); } } } @@ -952,11 +931,11 @@ %date-selected-special-range-active { %date-inner { - color: var-get($theme, 'date-special-focus-foreground'); + 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'); } } } @@ -965,6 +944,7 @@ %date-inner { color: var-get($theme, 'date-current-foreground'); border-color: var-get($theme, 'date-current-border-color'); + border-radius: var-get($theme, 'date-current-border-radius'); @if $variant != 'fluent' { background: var-get($theme, 'date-current-background'); @@ -1004,6 +984,63 @@ } } + %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'); + } + } + } + } + + %date-selected-current-first, + %date-selected-current-last, + %date-selected-current-first-last { + @if $variant == 'material' or $variant == 'bootstrap' { + %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-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'); + } + } + } + + %date-selected-current-first-active, + %date-selected-current-last-active, + %date-selected-current-first-last-active, { + @if $variant == 'material' or $variant == 'bootstrap' { + %date-inner { + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + %date-current-range { %date-inner { color: var-get($theme, 'date-current-foreground'); @@ -1034,9 +1071,22 @@ color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-special-border-radius'); &::after { - border-color: var-get($theme, 'date-special-border-color'); + content: ''; + position: absolute; + z-index: 0; + border: $border-size solid var-get($theme, 'date-special-border-color'); + border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); + + @if $variant == 'fluent' { + width: $date-inner-size; + height: $date-inner-size; + } @else { + width: $date-size; + height: $date-size; + } @if $variant == 'bootstrap' or $variant == 'fluent' { border-radius: calc(var-get($theme, 'date-special-border-radius') - ($border-size * 2)); @@ -1054,20 +1104,64 @@ } } + %date-special-range { + %date-inner { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); + + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); + } + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + } + } + } + %date-special-active { %date-inner { background: var-get($theme, 'date-special-focus-background'); color: var-get($theme, 'date-special-focus-foreground'); &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); + border-color: var-get($theme, 'date-special-focus-border-color'); + } + } + } + + %date-special-range-active { + %date-inner { + background: var-get($theme, 'date-special-range-focus-background'); + color: var-get($theme, 'date-special-range-focus-foreground'); + + &::after { + border-color: var-get($theme, 'date-special-range-focus-border-color'); } } } %date-special-current { %date-inner { - @if $variant == 'material' or $variant == 'indigo' { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + } + + @if $variant == 'material' { + &::after { + width: $date-inner-size; + height: $date-inner-size; + } + } + + @if $variant == 'indigo' { &:hover { color: var-get($theme, 'date-special-hover-foreground'); } @@ -1213,16 +1307,10 @@ %date-inner { color: var-get($theme, 'inactive-color'); + border-color: transparent; &:hover { - color: var-get($theme, 'inactive-color'); - } - } - } - - %date-inactive-special { - %date-inner { - &::after { + color: var-get($theme, 'date-hover-foreground'); border-color: transparent; } } @@ -1237,13 +1325,6 @@ border-color: var-get($theme, 'date-selected-current-border-color'); } - @if $variant == 'indigo' { - border-color: transparent; - - &::after { - border-color: var-get($theme, 'date-current-border-color'); - } - } &:hover { color: var-get($theme, 'date-selected-current-range-hover-foreground'); @@ -1252,15 +1333,6 @@ @if $variant == 'material' or $variant == 'bootstrap' { 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'); - } - } } } } @@ -1273,14 +1345,6 @@ @if $variant == 'material' or $variant == 'bootstrap' { border-color: var-get($theme, 'date-selected-current-focus-border-color'); } - - @if $variant == 'indigo' { - border-color: transparent; - - &::after { - border-color: var-get($theme, 'date-current-focus-border-color'); - } - } } } @@ -1310,28 +1374,6 @@ 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'); - - // 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'); - } - } - &::after { @if $variant != 'fluent' { width: $date-inner-size; @@ -1358,11 +1400,36 @@ border-color: var-get($theme, 'date-special-range-border-color'); } } + + &:hover { + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-current-range-foreground'); + } @else { + 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 { %date-inner { @if not $bootstrap-theme and not $variant == 'fluent' { color: var-get($theme, 'date-special-focus-foreground'); @@ -1376,6 +1443,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'); + } + } } } @@ -1446,13 +1520,7 @@ } } - %date-range-selected-active-first { - %date-inner { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } - } - + %date-range-selected-active-first, %date-range-selected-active-last { %date-inner { color: var-get($theme, 'date-selected-focus-foreground'); @@ -1477,6 +1545,12 @@ } } + %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,9 +1558,6 @@ %date-range-selected-first, %date-range-selected-last { - background: transparent; - border-block-color: transparent; - @if $variant == 'fluent' { %date-inner { background: transparent; @@ -1506,7 +1577,6 @@ 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 +1587,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 { @@ -1569,38 +1645,22 @@ } } - %date-selected-special-first-last { - %date-inner { - &::after { - @if $variant == 'material' or $variant == 'bootstrap' { - border-color: var-get($theme, 'date-selected-foreground'); - } - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-current-border-color'); - } - } - } - } - - %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'); + //%date-selected-special-first-last { + // %date-inner { + // &::after { + // @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-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'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); @@ -1634,6 +1694,49 @@ } } + %date-first, + %date-last { + %date-inner { + border-radius: var-get($theme, 'date-range-border-radius'); + } + } + + + %date-first-special, + %date-last-special { + %date-inner { + border-radius: var-get($theme, 'date-special-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + } + + %date-first-current, + %date-last-current { + %date-inner { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-current-border-radius'); + } + } + } + + %date-first-current, + %date-first-special-current, + %date-last-current, + %date-last-special-current { + %date-inner { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + 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,7 +1747,7 @@ border-color: transparent !important; } - @if $variant != 'fluent' and $variant != 'indigo' { + @if $variant == 'bootstrap' { border-inline-color: transparent; } @@ -1760,28 +1863,16 @@ } %date-inner { - color: var-get($theme, 'date-selected-range-foreground'); - &:hover { - @if not $bootstrap-theme { - color: var-get($theme, 'date-selected-range-hover-foreground'); - } @else { + @if $bootstrap-theme { color: var-get($theme, 'date-selected-foreground'); } } } } - %date-range-preview-inactive { - %date-inner { - color: var-get($theme, 'inactive-color'); - } - } - %date-range-preview-current { %date-inner { - color: var-get($theme, 'date-selected-current-range-foreground'); - @if $variant == 'bootstrap' { color: var-get($theme, 'date-selected-current-range-foreground'); background: var-get($theme, 'date-selected-current-range-background'); @@ -1877,24 +1968,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,29 +2005,6 @@ } } - %date-last-preview-special { - %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'); - } - } - - &:hover { - &::after { - /* stylelint-disable-next-line */ - @if $variant == 'material' { - width: $date-size; - height: $date-size; - border-color: var-get($theme, 'date-special-border-color'); - } - } - } - } - } - %date-first-preview-special-current, %date-last-preview-special-current { %date-inner { @@ -1970,7 +2027,6 @@ @if $variant == 'material' { width: $date-size; height: $date-size; - border-color: var-get($theme, 'date-special-border-color'); } } } @@ -1983,7 +2039,6 @@ @if $variant == 'material' { width: $date-inner-size; height: $date-inner-size; - border-color: var-get($theme, 'date-selected-foreground'); } } } @@ -2004,7 +2059,9 @@ %date-disabled { pointer-events: none; cursor: not-allowed; + } + %only-date-disabled { %date-inner { color: var-get($theme, 'date-disabled-foreground'); } @@ -2037,14 +2094,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 +2119,6 @@ } } - %date-disabled-current { - %date-inner { - color: var-get($theme, 'date-current-foreground'); - opacity: .38; - } - } - %date-disabled-current-special { @if $variant == 'indigo' { %date-inner { From 46b31a6d73fe1fd784463c450b964de940a466ca Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 30 Oct 2025 11:33:34 +0200 Subject: [PATCH 02/16] fix(calendar): update Fluent theme styles to align with design guidelines - Adjust date selection, hover, and focus styles. - Add support for range previews and various states specific to Fluent theme. - Refactor styles to accommodate Fluent theme-specific variants. --- .../calendar/_calendar-component.scss | 123 +++- .../components/calendar/_calendar-theme.scss | 697 +++++++++++++++--- src/app/calendar/calendar.sample.html | 12 + src/app/calendar/calendar.sample.ts | 49 +- 4 files changed, 761 insertions(+), 120 deletions(-) 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 482d49c0a8f..01a0990b79d 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 @@ -126,6 +126,10 @@ @extend %date-inactive !optional; } + @include e(date, $mods: ('inactive', 'range-preview')) { + @extend %date-inactive-range-preview !optional; + } + @include e(date, 'active') { @extend %date-active !optional; } @@ -134,6 +138,46 @@ @extend %date-selected !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; } @@ -191,10 +235,28 @@ @extend %date-range-preview !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', 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', 'current', 'active')) { + @extend %date-range-preview-current-active !optional; + } + @include e(date, $mods: ('range-preview', 'special')) { @extend %date-range-preview-special !optional; } @@ -239,6 +301,22 @@ @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; } @@ -279,12 +357,21 @@ @extend %date-selected-current-range-active !optional; } + + @include e(date, $mods: ('range', 'selected', 'current', 'special')) { + @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 !optional; + @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 !optional; + @extend %date-selected-current-range-special-active-not-first-last !optional; } @include e(date, $mods: ('range', 'selected', 'current', 'first')) { @@ -375,6 +462,38 @@ @extend %date-special-range !optional; } + @include e(date, $mods: ('special', 'range-preview')) { + @extend %date-special-range-preview !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; } 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 840b2174ba3..4cdc7859540 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 @@ -842,20 +842,36 @@ %date-selected-special { %date-inner { color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); + + @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'); - background: var-get($theme, 'date-selected-special-hover-background'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-special-hover-background'); + } &::after { + + @if $variant == 'fluent' { + background: var-get($theme, 'date-selected-special-hover-background'); + } + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } } @@ -865,12 +881,17 @@ %date-selected-special-active { %date-inner { color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-special-focus-background'); + + @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'); } } } @@ -891,25 +912,23 @@ %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-range-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - - &::after { - border-color: var-get($theme, 'date-special-range-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'); + 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-range-border-color'); } @@ -931,8 +950,10 @@ %date-selected-special-range-active { %date-inner { - color: var-get($theme, 'date-special-range-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-range-focus-border-color'); @@ -943,18 +964,19 @@ %date-current { %date-inner { color: var-get($theme, 'date-current-foreground'); - border-color: var-get($theme, 'date-current-border-color'); - border-radius: var-get($theme, 'date-current-border-radius'); + @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'); } } @@ -968,11 +990,19 @@ 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 { + &::before { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } } @if $variant == 'indigo' { @@ -1017,6 +1047,41 @@ } } + %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'); + + &::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, @@ -1050,8 +1115,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'); + } + } } } @@ -1065,40 +1138,53 @@ %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'); - border-radius: var-get($theme, 'date-special-border-radius'); + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-special-border-radius'); + } &::after { content: ''; position: absolute; - z-index: 0; border: $border-size solid var-get($theme, 'date-special-border-color'); - border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); @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'); + + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-hover-background'); + } } } } @@ -1107,18 +1193,32 @@ %date-special-range { %date-inner { color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-range-background'); + } &::after { border-color: var-get($theme, 'date-special-range-border-color'); + + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-range-background'); + } } &:hover { color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); + + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-range-hover-background'); + } &::after { border-color: var-get($theme, 'date-special-range-hover-border-color'); + + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-range-hover-background'); + } } } } @@ -1126,10 +1226,17 @@ %date-special-active { %date-inner { - background: var-get($theme, 'date-special-focus-background'); color: var-get($theme, 'date-special-focus-foreground'); + @if $variant != 'fluent' { + background: var-get($theme, 'date-special-focus-background'); + } + &::after { + @if $variant == 'fluent' { + background: var-get($theme, 'date-special-focus-background'); + } + border-color: var-get($theme, 'date-special-focus-border-color'); } } @@ -1137,18 +1244,99 @@ %date-special-range-active { %date-inner { - background: var-get($theme, 'date-special-range-focus-background'); 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; + + &::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; + + &::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-current { %date-inner { - border-radius: var-get($theme, 'date-current-border-radius'); + @if $variant != 'fluent' { + border-radius: var-get($theme, 'date-current-border-radius'); + } &::after { border-radius: var-get($theme, 'date-current-border-radius'); @@ -1161,12 +1349,6 @@ } } - @if $variant == 'indigo' { - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - } - } - @if $variant == 'indigo' { background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); @@ -1186,6 +1368,7 @@ 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)); @@ -1213,9 +1396,32 @@ } } + @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 { + &::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'); } @@ -1237,6 +1443,74 @@ } } + %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'); @@ -1248,13 +1522,32 @@ %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 { + &::before { + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } } } } @@ -1262,8 +1555,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'); + } + } } } @@ -1292,15 +1594,15 @@ } } - @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; @@ -1316,10 +1618,29 @@ } } + @if $variant == 'fluent' { + %date-inactive-range-preview { + %date-inner { + &:hover { + color: var-get($theme, 'inactive-color'); + } + } + } + } + %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 != 'fluent' { + background: var-get($theme, 'date-selected-current-range-background'); + } + + @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'); @@ -1328,7 +1649,17 @@ &:hover { color: var-get($theme, 'date-selected-current-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); + + + @if $variant != 'fluent' { + background: var-get($theme, 'date-selected-current-range-hover-background'); + } + + @if $variant == 'fluent' { + &::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'); @@ -1340,7 +1671,16 @@ %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 != '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'); @@ -1367,6 +1707,32 @@ } %date-selected-current-range-special { + @if $variant == 'fluent' { + %date-inner { + &::after { + background: var-get($theme, 'date-selected-current-range-background'); + } + + &:hover { + &::after { + background: var-get($theme, 'date-selected-current-range-hover-background'); + } + } + } + } + } + + %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 != 'fluent' { color: var-get($theme, 'date-special-range-foreground'); @@ -1389,7 +1755,7 @@ } @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' { @@ -1404,6 +1770,11 @@ &:hover { @if $variant == 'fluent' { color: var-get($theme, 'date-selected-current-range-foreground'); + + &::after { + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + } + } @else { color: var-get($theme, 'date-special-hover-foreground'); @@ -1429,12 +1800,18 @@ } } - %date-selected-current-range-special-active { + %date-selected-current-range-special-active-not-first-last { %date-inner { @if not $bootstrap-theme and not $variant == 'fluent' { color: var-get($theme, 'date-special-focus-foreground'); } + @if $variant == 'fluent' { + &::after { + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } + } + @if $variant == 'indigo' { background: var-get($theme, 'date-selected-current-range-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); @@ -1520,11 +1897,68 @@ } } + %date-range-selected-special { + @if $variant == 'fluent' { + %date-inner { + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + + &::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 { + &::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 == 'fluent' { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } } } @@ -1539,6 +1973,7 @@ @if $variant == 'fluent' { height: 100%; + border-radius: var-get($theme, 'date-range-border-radius'); } @else { height: $date-height; } @@ -1558,6 +1993,8 @@ %date-range-selected-first, %date-range-selected-last { + z-index: 0; + @if $variant == 'fluent' { %date-inner { background: transparent; @@ -1569,8 +2006,6 @@ } } - z-index: 0; - &::after { position: absolute; content: ''; @@ -1612,6 +2047,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; @@ -1645,26 +2084,27 @@ } } - //%date-selected-special-first-last { - // %date-inner { - // &::after { - // @if $variant == 'indigo' { - // border-color: var-get($theme, 'date-current-border-color'); - // } - // } - // } - //} - - %date-range-selected-first, %date-range-selected-last { %date-inner { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); + @if $variant != 'fluent' { + 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'); + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + } + } + + @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-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } } } } @@ -1701,11 +2141,12 @@ } } - %date-first-special, %date-last-special { %date-inner { - border-radius: var-get($theme, 'date-special-border-radius'); + @if $variant != 'fluent' { + border-radius: var-get($theme, 'date-special-border-radius'); + } &::after { border-radius: var-get($theme, 'date-special-border-radius'); @@ -1716,7 +2157,9 @@ %date-first-current, %date-last-current { %date-inner { - border-radius: var-get($theme, 'date-current-border-radius'); + @if $variant != 'fluent' { + border-radius: var-get($theme, 'date-current-border-radius'); + } &::after { border-radius: var-get($theme, 'date-current-border-radius'); @@ -1729,7 +2172,9 @@ %date-last-current, %date-last-special-current { %date-inner { - border-radius: var-get($theme, 'date-current-border-radius'); + @if $variant != 'fluent' { + border-radius: var-get($theme, 'date-current-border-radius'); + } &::after { border-radius: var-get($theme, 'date-current-border-radius'); @@ -1796,8 +2241,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 { @@ -1809,8 +2254,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 { @@ -1863,7 +2308,17 @@ } %date-inner { + @if $variant == 'fluent' { + border-color: transparent; + } + &:hover { + @if $variant == 'fluent' { + color: var-get($theme, 'content-foreground'); + background: transparent; + border-color: transparent; + } + @if $bootstrap-theme { color: var-get($theme, 'date-selected-foreground'); } @@ -1871,29 +2326,69 @@ } } + %date-range-preview-active { + %date-inner { + @if $variant == 'fluent' { + color: var-get($theme, 'content-foreground'); + background: transparent; + } + } + } + + %date-range-preview-weekend { + %date-inner { + &:hover { + color: var-get($theme, 'weekend-color'); + } + } + } + + %date-range-preview-weekend-active { + %date-inner { + @if $variant == 'fluent' { + color: var-get($theme, 'weekend-color'); + background: transparent; + } + } + } + %date-range-preview-current { %date-inner { - @if $variant == 'bootstrap' { + @if $variant == 'bootstrap' { color: var-get($theme, 'date-selected-current-range-foreground'); background: var-get($theme, 'date-selected-current-range-background'); } + + @if $variant == 'fluent' { + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + } + } } } - %date-range-preview-special { + %date-range-preview-current-active { %date-inner { - color: var-get($theme, 'date-special-foreground'); + @if $variant == 'fluent' { + color: var-get($theme, 'date-current-focus-foreground'); + } } } - @if $variant == 'fluent' { - %date-range-preview-special-current { - %date-inner { - color: var-get($theme, 'date-selected-current-range-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 { @@ -1938,7 +2433,9 @@ %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'); + } } } @@ -2070,10 +2567,6 @@ %date-disabled-range { %date-inner { color: var-get($theme, 'date-disabled-range-foreground'); - - @if $variant == 'fluent' { - opacity: .38; - } } } 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), From 1aff4d708d1343a314da0c19d4b8bc71a741d46e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 3 Nov 2025 16:14:27 +0200 Subject: [PATCH 03/16] fix(calendar): fix calendar bootstrap theme parity with web components --- .../calendar/_calendar-component.scss | 95 +++++- .../components/calendar/_calendar-theme.scss | 298 ++++++++++++++++-- 2 files changed, 353 insertions(+), 40 deletions(-) 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 01a0990b79d..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 @@ -138,6 +138,10 @@ @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; } @@ -182,6 +186,10 @@ @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; } @@ -198,6 +206,18 @@ @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; } @@ -235,19 +255,29 @@ @extend %date-range-preview !optional; } + @include e(date, $mods: ('range-preview', 'inactive')) { + @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', active)) { - @extend %date-range-preview-weekend-active !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; @@ -261,10 +291,6 @@ @extend %date-range-preview-special !optional; } - @include e(date, $mods: ('range-preview', 'special', 'current')) { - @extend %date-range-preview-special-current !optional; - } - @include e(date, $mods: ('range', 'selected')) { @extend %date-range-selected !optional; } @@ -277,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; } @@ -285,6 +315,10 @@ @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; } @@ -357,6 +391,13 @@ @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; @@ -466,6 +507,10 @@ @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; } @@ -531,6 +576,10 @@ @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; } @@ -551,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; } @@ -623,6 +694,10 @@ @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; } 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 4cdc7859540..4e56c15a379 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 @@ -843,6 +843,10 @@ %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'); } @@ -867,7 +871,7 @@ } &::after { - + /* stylelint-disable-next-line max-nesting-depth */ @if $variant == 'fluent' { background: var-get($theme, 'date-selected-special-hover-background'); } @@ -998,6 +1002,7 @@ } &: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'); @@ -1031,12 +1036,22 @@ } } } + + @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' or $variant == 'bootstrap' { + @if $variant == 'material' { %date-inner { border-color: var-get($theme, 'date-current-border-color'); @@ -1060,6 +1075,7 @@ &: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'); @@ -1094,12 +1110,18 @@ 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' or $variant == 'bootstrap' { + @if $variant == 'material' { %date-inner { border-color: var-get($theme, 'date-current-focus-border-color'); } @@ -1144,11 +1166,16 @@ font-weight: 700; } - @if $variant != 'fluent' { + @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 { content: ''; position: absolute; @@ -1182,6 +1209,7 @@ &::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'); } @@ -1216,6 +1244,7 @@ &::after { border-color: var-get($theme, 'date-special-range-hover-border-color'); + /* stylelint-disable-next-line max-nesting-depth */ @if $variant == 'fluent' { background: var-get($theme, 'date-special-range-hover-background'); } @@ -1277,6 +1306,7 @@ 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'); @@ -1310,6 +1340,7 @@ 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'); @@ -1331,6 +1362,14 @@ } } + %date-special-range-preview-disabled { + @if $variant == 'bootstrap' { + %date-inner { + color: var-get($theme, 'date-special-range-foreground'); + } + } + } + %date-special-current { %date-inner { @@ -1340,9 +1379,13 @@ &::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' { + @if $variant == 'material' or $variant == 'bootstrap' { &::after { width: $date-inner-size; height: $date-inner-size; @@ -1405,6 +1448,7 @@ } &: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'); @@ -1433,11 +1477,27 @@ %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'); } } @@ -1515,10 +1575,20 @@ %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'); @@ -1543,6 +1613,7 @@ } &: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'); @@ -1646,7 +1717,6 @@ border-color: var-get($theme, 'date-selected-current-border-color'); } - &:hover { color: var-get($theme, 'date-selected-current-range-hover-foreground'); @@ -1656,6 +1726,7 @@ } @if $variant == 'fluent' { + /* stylelint-disable-next-line max-nesting-depth */ &::before { background: var-get($theme, 'date-selected-current-range-hover-background'); } @@ -1688,6 +1759,24 @@ } } + @if $variant == 'bootstrap' { + %date-selected-current-range-not-first-last { + %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-range-active-not-first-last { + %date-inner { + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + } + %date-selected-current-range-first, %date-selected-current-range-last { %date-inner { @@ -1714,6 +1803,7 @@ } &:hover { + /* stylelint-disable-next-line max-nesting-depth */ &::after { background: var-get($theme, 'date-selected-current-range-hover-background'); } @@ -1734,9 +1824,11 @@ %date-selected-current-range-special-not-first-last { %date-inner { - @if $variant != 'fluent' { + @if $variant == 'material' or $variant == 'indigo' { color: var-get($theme, 'date-special-range-foreground'); - } @else { + } + + @if $variant == 'fluent' or $variant == 'bootstrap' { color: var-get($theme, 'date-selected-current-range-foreground'); } @@ -1752,17 +1844,18 @@ @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-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'); } } @@ -1771,11 +1864,17 @@ @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'); } + } - } @else { + @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 @@ -1802,7 +1901,7 @@ %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'); } @@ -1812,6 +1911,13 @@ } } + @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'); @@ -1903,6 +2009,7 @@ &: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'); @@ -1955,6 +2062,10 @@ 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'); @@ -2097,6 +2208,14 @@ } } + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + } + @if $variant == 'fluent' { color: var-get($theme, 'date-selected-range-foreground'); background: var-get($theme, 'date-selected-range-background'); @@ -2122,6 +2241,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%; @@ -2144,25 +2283,40 @@ %date-first-special, %date-last-special { %date-inner { - @if $variant != 'fluent' { + @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-current, - %date-last-current { + %date-first-special-active, + %date-last-special-active { %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' { + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } } } } @@ -2172,12 +2326,20 @@ %date-last-current, %date-last-special-current { %date-inner { - @if $variant != 'fluent' { + @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 { - border-radius: var-get($theme, 'date-current-border-radius'); + @if $variant == 'bootstrap' { + border-radius: var-get($theme, 'date-special-border-radius'); + } @else { + border-radius: var-get($theme, 'date-current-border-radius'); + } } } } @@ -2192,9 +2354,6 @@ border-color: transparent !important; } - @if $variant == 'bootstrap' { - border-inline-color: transparent; - } &:hover { background: var-get($theme, 'date-selected-range-hover-background'); @@ -2300,6 +2459,7 @@ } @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-range-foreground'); background: var-get($theme, 'date-selected-range-background'); &::after { @@ -2326,6 +2486,14 @@ } } + %date-range-preview-inactive { + %date-inner { + @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-range-foreground'); + } + } + } + %date-range-preview-active { %date-inner { @if $variant == 'fluent' { @@ -2337,12 +2505,27 @@ %date-range-preview-weekend { %date-inner { + @if $variant == 'bootstrap' { + color: var-get($theme, 'date-selected-range-foreground'); + } + &:hover { color: var-get($theme, 'weekend-color'); } } } + %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 { @if $variant == 'fluent' { @@ -2355,10 +2538,12 @@ %date-range-preview-current { %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-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'); @@ -2423,9 +2608,20 @@ } %date-inner { - @if $variant == 'bootstrap' { + 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'); + } } } } @@ -2439,6 +2635,16 @@ } } + %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'); + } + } + } + @if $variant == 'fluent' { %date-first-preview-current-selected, %date-last-preview-current-selected { @@ -2448,6 +2654,26 @@ } } + @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'); + } + } + } + %date-first-preview { background: transparent; border-block-color: transparent ; @@ -2505,7 +2731,15 @@ %date-first-preview-special-current, %date-last-preview-special-current { %date-inner { + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-border-color'); + } + &:hover { + @if $variant == 'bootstrap' { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + &::after { /* stylelint-disable-next-line */ @if $variant == 'material' { @@ -2532,6 +2766,10 @@ %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; From a32ed95c91ab110718f7bf03b0f0234bbb33bb7c Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 5 Nov 2025 15:56:22 +0200 Subject: [PATCH 04/16] fix(calendar): update Indigo theme styles for improved consistency --- .../components/calendar/_calendar-theme.scss | 76 ++++++++++++++++--- 1 file changed, 66 insertions(+), 10 deletions(-) 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 4e56c15a379..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; } } @@ -775,15 +774,18 @@ 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'); - &::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; } } @@ -1707,6 +1709,10 @@ background: var-get($theme, 'date-selected-current-range-background'); } + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-selected-current-border-color'); + } + @if $variant == 'fluent' { &::before { background: var-get($theme, 'date-selected-current-range-background'); @@ -1720,6 +1726,9 @@ &:hover { color: var-get($theme, 'date-selected-current-range-hover-foreground'); + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } @if $variant != 'fluent' { background: var-get($theme, 'date-selected-current-range-hover-background'); @@ -1743,6 +1752,10 @@ %date-inner { color: var-get($theme, 'date-selected-current-range-focus-foreground'); + @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'); } @@ -1759,7 +1772,7 @@ } } - @if $variant == 'bootstrap' { + @if $variant == 'bootstrap' or $variant == 'indigo' { %date-selected-current-range-not-first-last { %date-inner { border-color: var-get($theme, 'date-current-border-color'); @@ -1777,6 +1790,24 @@ } } + @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, %date-selected-current-range-last { %date-inner { @@ -1961,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)}); @@ -1971,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 { @@ -1987,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)}); @@ -2608,7 +2642,9 @@ } %date-inner { - border-color: var-get($theme, 'date-selected-focus-border-color'); + @if $variant != 'indigo' { + border-color: var-get($theme, 'date-selected-focus-border-color'); + } } @if $variant == 'bootstrap' { @@ -2674,6 +2710,26 @@ } } + @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 ; From f7c353f4c97049f57fa366947e86d38b85bbaaee Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 12 Nov 2025 14:35:42 +0200 Subject: [PATCH 05/16] fix(calendar): refine bootstrap theme styles for date range and selection states --- .../calendar/_calendar-component.scss | 17 +++-- .../components/calendar/_calendar-theme.scss | 68 +++++++++++++++---- 2 files changed, 65 insertions(+), 20 deletions(-) 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 e0904be7154..f1e935acf91 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 @@ -138,7 +138,7 @@ @extend %date-selected !optional; } - @include e(date, 'selected', $not: ('range')) { + @include e(date, 'selected', $not: ('range', 'range-preview')) { @extend %date-selected-not-in-range !optional; } @@ -186,7 +186,7 @@ @extend %date-selected-active !optional; } - @include e(date, $mods: ('selected', 'active'), $not: ('range')) { + @include e(date, $mods: ('selected', 'active'), $not: ('range', 'range-preview')) { @extend %date-selected-active-not-in-range !optional; } @@ -226,7 +226,7 @@ @extend %date-selected-range !optional; } - @include e(date, $mods: ('selected', 'special','range')) { + @include e(date, $mods: ('selected', 'special', 'range')) { @extend %date-selected-special-range !optional; } @@ -235,6 +235,15 @@ @extend %date-selected-special-range-active !optional; } + + @include e(date, $mods: ('selected', 'special', 'range'), $not: ('current')) { + @extend %date-selected-special-range-not-current !optional; + } + + @include e(date, $mods: ('selected', 'special', 'active', 'range'), $not: ('current')) { + @extend %date-selected-special-active-range-not-current !optional; + } + @include e(date, 'hidden') { @extend %date-hidden !optional; } @@ -624,8 +633,6 @@ @extend %date-last-preview-current-selected !optional; } - - @include e(date, $mods: ('last', 'range-preview', 'current')) { @extend %date-last-preview-current !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 0f1d3709e8a..6bc3e186f68 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 @@ -663,10 +663,7 @@ %calendar-view__item-inner { color: var-get($theme, 'ym-selected-foreground'); background: var-get($theme, 'ym-selected-background'); - - @if not $bootstrap-theme and $variant != 'fluent' { - box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-outline-color'); - } + box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-outline-color'); &:hover { color: var-get($theme, 'ym-selected-hover-foreground'); @@ -773,6 +770,7 @@ width: $date-size; color: var-get($theme, 'week-number-foreground'); background: var-get($theme, 'week-number-background'); + border-color: transparent; &::before { content: ''; @@ -942,6 +940,26 @@ } } + %date-selected-special-range-not-current { + %date-inner { + @if $variant == 'bootstrap' { + border-color: transparent; + + &:hover { + border-color: transparent + } + } + } + } + + %date-selected-special-active-range-not-current { + %date-inner { + @if $variant == 'bootstrap' { + border-color: transparent + } + } + } + %date-selected-special-current-first, %date-selected-special-current-last, %date-selected-special-current-first-last { @@ -1395,6 +1413,13 @@ } @if $variant == 'indigo' { + &::after { + width: calc($date-inner-size - #{rem(4px)}); + height: calc($date-inner-size - #{rem(4px)}); + } + } + + @if $variant == 'indigo' or $variant == 'bootstrap' { background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); @@ -1402,10 +1427,13 @@ 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 == 'bootstrap' { + color: var-get($theme, 'date-current-foreground'); + + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); } } @@ -1422,17 +1450,25 @@ } } - @if $variant == 'indigo' { - %date-special-current-active { - %date-inner { + %date-special-current-active { + %date-inner { + @if $variant == 'indigo' { 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'); } + + @if $variant == 'bootstrap' { + 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'); + } } + } - %date-special-current-selected { - %date-inner { + %date-special-current-selected { + %date-inner { + @if $variant == 'indigo' { &::after { width: calc($date-inner-size - #{rem(4px)}); height: calc($date-inner-size - #{rem(4px)}); @@ -2502,7 +2538,7 @@ } %date-inner { - @if $variant == 'fluent' { + @if $variant == 'fluent' or $variant == 'bootstrap' { border-color: transparent; } @@ -2514,7 +2550,8 @@ } @if $bootstrap-theme { - color: var-get($theme, 'date-selected-foreground'); + color: var-get($theme, 'date-selected-range-foreground'); + border-color: transparent; } } } @@ -2674,9 +2711,10 @@ %date-first-preview-selected-active, %date-last-preview-selected-active { %date-inner { - @if $variant == 'bootstrap' { + @if $variant == 'bootstrap' { color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); } } } From ba24941c87bad19365ffcd26e15c8680c6589a09 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 09:50:20 +0200 Subject: [PATCH 06/16] fix(calendar): update styles for Fluent theme range and preview --- .../calendar/_calendar-component.scss | 8 +- .../components/calendar/_calendar-theme.scss | 91 +++++++++++++------ 2 files changed, 69 insertions(+), 30 deletions(-) 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 f1e935acf91..d3415986b1c 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 @@ -272,7 +272,7 @@ @extend %date-range-preview-active !optional; } - @include e(date, $mods: ('range-preview', 'weekend')) { + @include e(date, $mods: ('range-preview', 'weekend'), $not: ('current', 'special')) { @extend %date-range-preview-weekend !optional; } @@ -284,7 +284,7 @@ @extend %date-range-preview-weekend-last !optional; } - @include e(date, $mods: ('range-preview', 'weekend', 'active')) { + @include e(date, $mods: ('range-preview', 'weekend', 'active'), $not: ('current', 'special')) { @extend %date-range-preview-weekend-active !optional; } @@ -468,6 +468,10 @@ @extend %date-selected-current !optional; } + @include e(date, $mods: ('current', 'selected', 'range-preview')) { + @extend %date-selected-current-range-preview !optional; + } + @include e(date, $mods: ('current', 'selected', 'active')) { @extend %date-selected-current-active !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 6bc3e186f68..f8b9b3b70e3 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 @@ -1098,7 +1098,7 @@ /* 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'); + border-color: var-get($theme, 'date-current-border-color'); } } } @@ -1112,7 +1112,7 @@ &::before { background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); + border-color: var-get($theme, 'date-current-border-color'); } } } @@ -1446,6 +1446,15 @@ width: sizable(rem(22px), rem(24px), rem(28px)); height: sizable(rem(22px), rem(24px), rem(28px)); } + + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + + &::after { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-foreground'); + } + } } } } @@ -1463,6 +1472,15 @@ background: var-get($theme, 'date-current-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); } + + @if $variant == 'fluent' { + color: var-get($theme, 'date-current-focus-foreground'); + + &::after { + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-foreground'); + } + } } } @@ -1499,10 +1517,10 @@ %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-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'); @@ -1626,12 +1644,10 @@ } } - %date-selected-current { %date-inner { color: var-get($theme, 'date-selected-current-foreground'); - &:hover { color: var-get($theme, 'date-selected-current-hover-foreground'); } @@ -1703,16 +1719,6 @@ } } - //@if $variant == 'fluent' { - // %date-selected-current-special { - // %date-inner { - // &::after { - // border-color: var-get($theme, 'date-selected-current-background'); - // } - // } - // } - //} - %date-inactive { cursor: default; @@ -1735,6 +1741,17 @@ } } } + + %date-selected-current-range-preview { + %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'); + } + } + } } %date-selected-current-range { @@ -2230,6 +2247,10 @@ %date-inner { @if $variant == 'fluent' { color: var-get($theme, 'date-special-range-foreground'); + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground') + } } &::after { @@ -2472,6 +2493,8 @@ %date-inner { border-start-end-radius: var-get($theme, 'date-range-border-radius'); border-end-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: 0; + border-start-start-radius: 0; } &::before { @@ -2485,6 +2508,8 @@ %date-inner { border-start-start-radius: var-get($theme, 'date-range-border-radius'); border-end-start-radius: var-get($theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; } &::before { @@ -2617,7 +2642,12 @@ @if $variant == 'fluent' { &:hover { - color: var-get($theme, 'date-current-hover-foreground'); + color: var-get($theme, 'date-current-foreground'); + + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } } } } @@ -2626,7 +2656,12 @@ %date-range-preview-current-active { %date-inner { @if $variant == 'fluent' { - color: var-get($theme, 'date-current-focus-foreground'); + color: var-get($theme, 'date-current-foreground'); + + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } } } } @@ -2719,14 +2754,14 @@ } } - @if $variant == 'fluent' { - %date-first-preview-current-selected, - %date-last-preview-current-selected { - %date-inner { - color: var-get($theme, 'date-selected-current-range-foreground'); - } - } - } + //@if $variant == 'fluent' { + // %date-first-preview-current-selected, + // %date-last-preview-current-selected { + // %date-inner { + // color: var-get($theme, 'date-selected-current-range-foreground'); + // } + // } + //} @if $variant == 'bootstrap' { %date-first-preview-current, From 69c58786367ff6476d87e0c27d07d599c32440e7 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 13 Nov 2025 16:18:01 +0200 Subject: [PATCH 07/16] fix(calendar): enhance Material theme styles for range and selection states --- .../calendar/_calendar-component.scss | 20 +++ .../components/calendar/_calendar-theme.scss | 133 ++++++++++++++++-- 2 files changed, 143 insertions(+), 10 deletions(-) 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 d3415986b1c..c2c77724013 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 @@ -372,6 +372,26 @@ @extend %date-selected-special-current-first-last !optional; } + @include e(date, $mods: ('selected', 'special', 'current', 'active', 'first', 'last')) { + @extend %date-selected-special-current-active-first-last !optional; + } + + @include e(date, $mods: ('selected', 'special', 'current', 'first', 'range-preview')) { + @extend %date-selected-special-current-first-range-preview !optional; + } + + @include e(date, $mods: ('selected', 'special', 'current', 'active', 'first', 'range-preview')) { + @extend %date-selected-special-current-active-first-range-preview !optional; + } + + @include e(date, $mods: ('selected', 'special', 'current', 'last', 'range-preview')) { + @extend %date-selected-special-current-last-range-preview !optional; + } + + @include e(date, $mods: ('selected', 'special', 'current', 'active', 'last', 'range-preview')) { + @extend %date-selected-special-current-active-last-range-preview !optional; + } + @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) { @extend %date-selected-special-current-first !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 f8b9b3b70e3..c6eeae639aa 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 @@ -972,6 +972,49 @@ } } + %date-selected-special-current-first-last, + %date-selected-special-current-active-first-last, + %date-selected-special-current-first-range-preview, + %date-selected-special-current-last-range-preview { + %date-inner { + @if $variant == 'material' { + 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 { + border-color: var-get($theme, 'date-selected-special-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-current-hover-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + } + } + + %date-selected-special-current-active-first-last, + %date-selected-special-current-active-first-range-preview, + %date-selected-special-current-active-last-range-preview { + %date-inner { + @if $variant == 'material' { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme,'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } + } + } + %date-selected-special-range-active { %date-inner { @if $variant != 'fluent' { @@ -1719,16 +1762,48 @@ } } + @if $variant == 'material' { + %date-selected-current-special { + %date-inner { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + } + + %date-selected-current-special-active { + %date-inner { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } + } + } + %date-inactive { cursor: default; %date-inner { color: var-get($theme, 'inactive-color'); - border-color: transparent; &:hover { color: var-get($theme, 'date-hover-foreground'); - border-color: transparent; } } } @@ -1912,6 +1987,10 @@ color: var-get($theme, 'date-special-range-foreground'); } + @if $variant == 'material' { + background: var-get($theme, 'date-special-range-background'); + } + @if $variant == 'fluent' or $variant == 'bootstrap' { color: var-get($theme, 'date-selected-current-range-foreground'); } @@ -1958,7 +2037,7 @@ color: var-get($theme, 'date-selected-current-range-hover-foreground'); } - @if $variant == 'material' or $variant == 'indigo' { + @if $variant == 'indigo' { color: var-get($theme, 'date-special-hover-foreground'); // stylelint-disable-next-line @@ -1967,6 +2046,11 @@ } } + @if $variant == 'material' { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-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'); @@ -1985,7 +2069,7 @@ %date-selected-current-range-special-active-not-first-last { %date-inner { - @if $variant == 'material' or $variant == 'indigo' { + @if $variant == 'indigo' { color: var-get($theme, 'date-special-focus-foreground'); } @@ -2001,7 +2085,6 @@ } } - @if $variant == 'indigo' { background: var-get($theme, 'date-selected-current-range-focus-background'); border-color: var-get($theme, 'date-current-focus-border-color'); @@ -2012,6 +2095,9 @@ } @if $variant == 'material' { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); + // stylelint-disable-next-line &::after { border-color: var-get($theme, 'date-special-range-focus-border-color'); @@ -2041,8 +2127,8 @@ } } - @if $variant == 'indigo' { - %date-inner { + %date-inner { + @if $variant == 'indigo' { color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-color: var-get($theme, 'date-selected-current-border-color'); @@ -2064,13 +2150,26 @@ } } } + + @if $variant == 'material' { + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } } } %date-selected-current-range-special-active-first, %date-selected-current-range-special-active-last { - @if $variant == 'indigo' { - %date-inner { + %date-inner { + @if $variant == 'indigo' { 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'); @@ -2080,6 +2179,12 @@ height: calc($date-inner-size - #{rem(4px)}); } } + + @if $variant == 'material' { + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } } } @@ -2714,7 +2819,7 @@ } %date-inner { - @if $variant != 'indigo' { + @if $variant != 'indigo' and $variant != 'material' { border-color: var-get($theme, 'date-selected-focus-border-color'); } } @@ -2869,6 +2974,10 @@ border-color: var-get($theme, 'date-selected-current-hover-border-color'); } + @if $variant == 'material' { + color: var-get($theme, 'date-special-hover-foreground'); + } + &::after { /* stylelint-disable-next-line */ @if $variant == 'material' { @@ -2883,6 +2992,10 @@ %date-first-preview-special-active, %date-last-preview-special-active { %date-inner { + @if $variant == 'material' { + color: var-get($theme, 'date-special-focus-foreground'); + } + &::after { @if $variant == 'material' { width: $date-size; From 35afa206739f7cb68c49039298362fdbaced5f55 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 17 Nov 2025 11:42:07 +0200 Subject: [PATCH 08/16] fix(calendar): adjust date range border radius styles for fluent theme --- .../components/calendar/_calendar-theme.scss | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) 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 c6eeae639aa..c6db1df78f0 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 @@ -497,7 +497,6 @@ } } - %label-week-number, %date-inner-week-number { position: relative; @@ -2596,10 +2595,10 @@ %date-range-selected-first { %date-inner { - border-start-end-radius: var-get($theme, 'date-range-border-radius'); - border-end-end-radius: var-get($theme, 'date-range-border-radius'); - border-end-start-radius: 0; - border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: var-get($theme, 'date-range-border-radius'); + border-start-start-radius: var-get($theme, 'date-range-border-radius'); } &::before { @@ -2611,10 +2610,10 @@ %date-range-selected-last { %date-inner { - border-start-start-radius: var-get($theme, 'date-range-border-radius'); - border-end-start-radius: var-get($theme, 'date-range-border-radius'); - border-start-end-radius: 0; - border-end-end-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); } &::before { From fac68c821332c38b467f6cbea08a4b49595fb491 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 18 Nov 2025 16:32:54 +0200 Subject: [PATCH 09/16] fix(calendar): theme styles --- .../calendar/_calendar-component.scss | 45 ++- .../components/calendar/_calendar-theme.scss | 347 +++++++++++++++--- 2 files changed, 336 insertions(+), 56 deletions(-) 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 c2c77724013..7dc1a304c19 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 @@ -364,10 +364,18 @@ @extend %date-range-selected-special-last !optional; } + @include e(date, $mods: ('range', 'selected', 'special', 'last', 'active')) { + @extend %date-range-selected-special-last-active !optional; + } + @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last')) { @extend %date-selected-special-first-last !optional; } + @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last', 'active')) { + @extend %date-selected-special-first-last-active !optional; + } + @include e(date, $mods: ('selected', 'special', 'current', 'first', 'last')) { @extend %date-selected-special-current-first-last !optional; } @@ -452,6 +460,14 @@ @extend %date-selected-current-range-last !optional; } + @include e(date, $mods: ('range', 'selected', 'current', 'first', 'active')) { + @extend %date-selected-current-range-first-active !optional; + } + + @include e(date, $mods: ('range', 'selected', 'current', 'last', 'active')) { + @extend %date-selected-current-range-last-active !optional; + } + @include e(date, $mods: ('range', 'selected', 'current', 'first', 'special')) { @extend %date-selected-current-range-special-first !optional; } @@ -653,10 +669,6 @@ @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; } @@ -701,6 +713,15 @@ @extend %date-last-preview-special-active !optional; } + + @include e(date, $mods: ('first', 'range-preview', 'special', 'selected')) { + @extend %date-first-preview-special-selected !optional; + } + + @include e(date, $mods: ('last', 'range-preview', 'special', 'selected')) { + @extend %date-last-preview-special-selected !optional; + } + @include e(date, $mods: ('first', 'range-preview', 'special', 'active', 'selected')) { @extend %date-first-preview-special-active-selected !optional; } @@ -709,6 +730,22 @@ @extend %date-last-preview-special-active-selected !optional; } + @include e(date, $mods: ('first', 'range-preview', 'special', 'current', 'selected')) { + @extend %date-first-preview-special-current-selected !optional; + } + + @include e(date, $mods: ('last', 'range-preview', 'special', 'current', 'selected')) { + @extend %date-last-preview-special-current-selected !optional; + } + + @include e(date, $mods: ('first', 'range-preview', 'special', 'current', 'active', 'selected')) { + @extend %date-first-preview-special-current-active-selected !optional; + } + + @include e(date, $mods: ('last', 'range-preview', 'special', 'current', 'active', 'selected')) { + @extend %date-last-preview-special-current-active-selected !optional; + } + @include e(date, $mods: ('first', 'range-preview', 'special', 'active', 'current')) { @extend %date-first-preview-special-active-current !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 c6db1df78f0..1b1fb894cdf 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 @@ -918,6 +918,14 @@ @if $variant != 'fluent' { color: var-get($theme, 'date-special-range-foreground'); background: var-get($theme, 'date-special-range-background'); + + &::after { + border-color: var-get($theme, 'date-special-range-border-color'); + } + } + + @if $variant == 'indigo' { + border-color: transparent; } &:hover { @@ -926,14 +934,12 @@ background: var-get($theme, 'date-special-range-hover-background'); } - &::after { - border-color: var-get($theme, 'date-special-range-hover-border-color'); + @if $variant == 'indigo' { + border-color: transparent; } - } - @if $variant != 'fluent' { &::after { - border-color: var-get($theme, 'date-special-range-border-color'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); } } } @@ -968,6 +974,12 @@ border-color: var-get($theme, 'date-selected-special-border-color'); } } + + @if $variant == 'indigo' { + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } } } @@ -995,6 +1007,18 @@ } } } + + @if $variant == 'indigo' { + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } } } @@ -1011,6 +1035,16 @@ border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } + + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } } } @@ -1021,6 +1055,10 @@ background: var-get($theme, 'date-special-range-focus-background'); } + @if $variant == 'indigo' { + border-color: transparent; + } + &::after { border-color: var-get($theme, 'date-special-range-focus-border-color'); } @@ -1226,6 +1264,8 @@ @if $variant == 'indigo' { font-weight: 700; + + border-color: var-get($theme, 'date-special-border-color'); } @if $variant == 'material' or $variant == 'indigo' { @@ -1241,7 +1281,8 @@ &::after { content: ''; position: absolute; - border: $border-size solid var-get($theme, 'date-special-border-color'); + + border: $border-size solid if($variant == 'indigo', transparent, var-get($theme, 'date-special-border-color')); @if $variant == 'fluent' { background: var-get($theme, 'date-special-background'); @@ -1268,8 +1309,12 @@ background: var-get($theme, 'date-special-hover-background'); } - &::after { + @if $variant == 'indigo' { border-color: var-get($theme, 'date-special-hover-border-color'); + } + + &::after { + border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-hover-border-color')); /* stylelint-disable-next-line max-nesting-depth */ @if $variant == 'fluent' { @@ -1284,12 +1329,16 @@ %date-inner { color: var-get($theme, 'date-special-range-foreground'); + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-special-range-border-color'); + } + @if $variant != 'fluent' { background: var-get($theme, 'date-special-range-background'); } &::after { - border-color: var-get($theme, 'date-special-range-border-color'); + border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-range-border-color')); @if $variant == 'fluent' { background: var-get($theme, 'date-special-range-background'); @@ -1299,12 +1348,16 @@ &:hover { color: var-get($theme, 'date-special-range-hover-foreground'); + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + @if $variant != 'fluent' { background: var-get($theme, 'date-special-range-hover-background'); } &::after { - border-color: var-get($theme, 'date-special-range-hover-border-color'); + border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-range-hover-border-color')); /* stylelint-disable-next-line max-nesting-depth */ @if $variant == 'fluent' { @@ -1319,16 +1372,20 @@ %date-inner { color: var-get($theme, 'date-special-focus-foreground'); + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-special-focus-border-color'); + } + @if $variant != 'fluent' { background: var-get($theme, 'date-special-focus-background'); } &::after { + border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-focus-border-color')); + @if $variant == 'fluent' { background: var-get($theme, 'date-special-focus-background'); } - - border-color: var-get($theme, 'date-special-focus-border-color'); } } } @@ -1337,21 +1394,24 @@ %date-inner { color: var-get($theme, 'date-special-range-focus-foreground'); + @if $variant == 'indigo' { + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } + @if $variant != 'fluent' { background: var-get($theme, 'date-special-range-focus-background'); } &::after { + border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-range-focus-border-color')); + @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 @@ -1432,7 +1492,6 @@ } } - %date-special-current { %date-inner { @if $variant != 'fluent' { @@ -1458,6 +1517,13 @@ &::after { width: calc($date-inner-size - #{rem(4px)}); height: calc($date-inner-size - #{rem(4px)}); + border-color: var-get($theme, date-special-border-color); + } + + &:hover { + &::after { + border-color: var-get($theme, date-special-hover-border-color); + } } } @@ -1507,6 +1573,10 @@ 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'); + + &::after { + border-color: var-get($theme, date-special-focus-border-color); + } } @if $variant == 'bootstrap' { @@ -1529,10 +1599,20 @@ %date-special-current-selected { %date-inner { @if $variant == 'indigo' { + color: var-get($theme, date-selected-special-foreground); + background: var-get($theme, date-selected-current-background); + border-color: var-get($theme, date-selected-current-border-color); + &::after { width: calc($date-inner-size - #{rem(4px)}); height: calc($date-inner-size - #{rem(4px)}); } + + &:hover { + color: var-get($theme, date-selected-special-hover-foreground); + background: var-get($theme, date-selected-current-hover-background); + border-color: var-get($theme, date-selected-current-hover-border-color); + } } } } @@ -1558,6 +1638,12 @@ %date-special-current-selected-active { %date-inner { + @if $variant == 'indigo' { + color: var-get($theme, date-selected-special-focus-foreground); + background: var-get($theme, date-selected-current-focus-background); + border-color: var-get($theme, date-selected-current-focus-border-color); + } + &::after { //@if $variant == 'fluent' { // border-color: var-get($theme, 'date-selected-current-focus-foreground'); @@ -1899,7 +1985,7 @@ } } - @if $variant == 'bootstrap' or $variant == 'indigo' { + @if $variant == 'bootstrap' { %date-selected-current-range-not-first-last { %date-inner { border-color: var-get($theme, 'date-current-border-color'); @@ -1920,17 +2006,17 @@ @if $variant == 'indigo' { %date-selected-current-range-not-first-last { %date-inner { - color: var-get($theme, 'date-current-foreground'); + border-color: var-get($theme, 'date-selected-current-border-color'); &:hover { - color: var-get($theme, 'date-current-hover-foreground'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } } } %date-selected-current-range-active-not-first-last { %date-inner { - color: var-get($theme, 'date-current-focus-foreground'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } } } @@ -1939,11 +2025,19 @@ %date-selected-current-range-last { %date-inner { @if $variant == 'indigo' { + 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'); + &::after { border-color: var-get($theme, 'date-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'); + // stylelint-disable-next-line &::after { border-color: var-get($theme, 'date-current-hover-border-color'); @@ -1953,6 +2047,17 @@ } } + %date-selected-current-range-first-active, + %date-selected-current-range-last-active { + %date-inner { + @if $variant == 'indigo' { + 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'); + } + } + } + %date-selected-current-range-special { @if $variant == 'fluent' { %date-inner { @@ -1986,6 +2091,11 @@ color: var-get($theme, 'date-special-range-foreground'); } + @if $variant == 'indigo' { + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + } + @if $variant == 'material' { background: var-get($theme, 'date-special-range-background'); } @@ -2037,11 +2147,13 @@ } @if $variant == 'indigo' { - color: var-get($theme, 'date-special-hover-foreground'); + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); // 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'); } } @@ -2050,11 +2162,6 @@ background: var-get($theme, 'date-special-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'); - } - @if $variant == 'material' or $variant == 'bootstrap' { // stylelint-disable-next-line @@ -2086,7 +2193,7 @@ @if $variant == 'indigo' { background: var-get($theme, 'date-selected-current-range-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); &::after { border-color: var-get($theme, 'date-special-hover-border-color'); @@ -2107,16 +2214,14 @@ %date-selected-current-range-special-first, %date-selected-current-range-special-last { - @if $variant != 'fluent' { - %date-inner { + %date-inner { + @if $variant != 'fluent' { color: var-get($theme, 'date-selected-foreground'); &::after { border-color: var-get($theme, 'date-selected-foreground'); } - } - } @else { - %date-inner { + } @else { color: var-get($theme, 'date-selected-current-range-foreground'); &::after { @@ -2124,12 +2229,10 @@ height: sizable(rem(22px), rem(24px), rem(28px)); } } - } - %date-inner { @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-current-background'); border-color: var-get($theme, 'date-selected-current-border-color'); &::after { @@ -2139,8 +2242,8 @@ } &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - background: var-get($theme, 'date-selected-hover-background'); + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); border-color: var-get($theme, 'date-selected-current-hover-border-color'); // stylelint-disable-next-line @@ -2169,8 +2272,8 @@ %date-selected-current-range-special-active-last { %date-inner { @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-focus-foreground') !important; - background: var-get($theme, 'date-selected-focus-background') !important; + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); border-color: var-get($theme, 'date-selected-current-focus-border-color'); &::after { @@ -2240,7 +2343,11 @@ %date-range-selected-special-current-active { %date-inner { &::after { - border-color: var-get($theme, 'date-selected-current-focus-foreground'); + @if $variant != 'indigo' { + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } @else { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } } } } @@ -2270,7 +2377,6 @@ background: var-get($theme, 'date-selected-range-background'); %date-inner { - background: transparent; color: var-get($theme, 'date-selected-range-foreground'); @if $variant == 'fluent' { @@ -2284,6 +2390,7 @@ %date-range-not-first-last-current-special { %date-inner { + background: transparent; border-color: transparent; } } @@ -2357,6 +2464,18 @@ } } + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + } + } + &::after { width: $date-inner-size; height: $date-inner-size; @@ -2368,6 +2487,19 @@ } } + + %date-range-selected-special-first-active, + %date-range-selected-special-last-active { + %date-inner { + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + } + + @if $variant == 'fluent' { %date-first-preview-active { %date-inner { @@ -2772,7 +2904,9 @@ %date-range-preview-special { %date-inner { - color: var-get($theme, 'date-special-foreground'); + @if $variant != 'indigo' { + color: var-get($theme, 'date-special-foreground'); + } } } @@ -2841,7 +2975,7 @@ %date-first-preview-selected, %date-last-preview-selected { %date-inner { - @if $variant != 'fluent' { + @if $variant != 'fluent' and $variant != 'indigo' { color: var-get($theme, 'date-selected-foreground'); } } @@ -2855,6 +2989,10 @@ background: var-get($theme, 'date-selected-focus-background'); border-color: var-get($theme, 'date-selected-focus-border-color'); } + + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-focus-foreground'); + } } } @@ -2933,6 +3071,18 @@ height: var-get($theme, 'inner-size'); } } + + @if $variant == 'indigo' { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-special-hover-background'); + border-color: var-get($theme, 'date-special-hover-border-color'); + } + } } } @@ -2968,6 +3118,12 @@ border-color: var-get($theme, 'date-selected-current-border-color'); } + //@if $variant == 'indigo' { + // color: var-get($theme, 'date-selected-special-foreground'); + // background: var-get($theme, 'date-current-background'); + // border-color: var-get($theme, 'date-current-border-color'); + //} + &:hover { @if $variant == 'bootstrap' { border-color: var-get($theme, 'date-selected-current-hover-border-color'); @@ -2977,6 +3133,12 @@ color: var-get($theme, 'date-special-hover-foreground'); } + //@if $variant == 'indigo' { + // color: var-get($theme, 'date-special-hover-foreground'); + // background: var-get($theme, 'date-current-hover-background'); + // border-color: var-get($theme, 'date-current-hover-border-color'); + //} + &::after { /* stylelint-disable-next-line */ @if $variant == 'material' { @@ -2988,6 +3150,17 @@ } } + //%date-first-preview-special-current-active, + //%date-last-preview-special-current-active { + // %date-inner { + // @if $variant == 'indigo' { + // 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-first-preview-special-active, %date-last-preview-special-active { %date-inner { @@ -2995,6 +3168,12 @@ color: var-get($theme, 'date-special-focus-foreground'); } + @if $variant == 'indigo' { + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-special-focus-background'); + border-color: var-get($theme, 'date-special-focus-border-color'); + } + &::after { @if $variant == 'material' { width: $date-size; @@ -3004,17 +3183,41 @@ } } + %date-first-preview-special-selected, + %date-last-preview-special-selected { + %date-inner { + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + } + } + %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'); - } + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); - &::after { - @if $variant == 'material' { - width: $date-inner-size; - height: $date-inner-size; + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } } @@ -3032,6 +3235,46 @@ } } + %date-first-preview-special-current-selected, + %date-last-preview-special-current-selected { + %date-inner { + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + } + } + + %date-first-preview-special-current-selected-active, + %date-last-preview-special-current-selected-active { + %date-inner { + @if $variant == 'indigo' { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } + } + } + %date-disabled { pointer-events: none; cursor: not-allowed; @@ -3092,7 +3335,7 @@ } %date-disabled-current-special { - @if $variant == 'indigo' { + @if $variant == 'indigo' or $variant == 'material' { %date-inner { color: var-get($theme, 'date-special-foreground'); } From 022bbdc947bb7768751242007fd4de476f140efd Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 20 Nov 2025 11:17:34 +0200 Subject: [PATCH 10/16] fix(calendar): update theme styles for improved consistency across variants --- .../calendar/_calendar-component.scss | 28 +++ .../components/calendar/_calendar-theme.scss | 159 +++++++++++++----- 2 files changed, 143 insertions(+), 44 deletions(-) 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 7dc1a304c19..556420e2667 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 @@ -320,6 +320,10 @@ @extend %date-range-selected-special-first !optional; } + @include e(date, $mods: ('range', 'selected', 'special', 'first', 'active')) { + @extend %date-range-selected-special-first-active !optional; + } + @include e(date, $mods: ('range', 'selected', 'current', 'last')) { @extend %date-range-selected-current-last !optional; } @@ -360,6 +364,14 @@ @extend %date-range-selected-special-current-active !optional; } + @include e(date, $mods: ('range', 'selected', 'special', 'current', 'active', 'first')) { + @extend %date-range-selected-special-current-active-first !optional; + } + + @include e(date, $mods: ('range', 'selected', 'special', 'current', 'active', 'last')) { + @extend %date-range-selected-special-current-active-last !optional; + } + @include e(date, $mods: ('range', 'selected', 'special', 'last')) { @extend %date-range-selected-special-last !optional; } @@ -600,6 +612,10 @@ @extend %date-special-current-selected-active !optional; } + @include e(date, $mods: ('special', 'current', 'selected', 'active'), $not: ('first', 'last')) { + @extend %date-special-current-selected-active-not-first-last !optional; + } + @include e(date, $mods: ('special', 'active')) { @extend %date-special-active !optional; } @@ -823,10 +839,22 @@ @extend %date-disabled-current !optional; } + @include e(date, $mods: ('disabled', 'current')) { + @extend %date-disabled-current !optional; + } + + @include e(date, $mods: ('disabled', 'current', 'range')) { + @extend %date-disabled-current-range !optional; + } + @include e(date, $mods: ('disabled', 'current', 'special')) { @extend %date-disabled-current-special !optional; } + @include e(date, $mods: ('disabled', 'current', 'special', 'range')) { + @extend %date-disabled-current-special-range !optional; + } + @include e(date, $mods: ('disabled', 'single', 'current', 'special', 'selected')) { @extend %date-disabled-current-special-selected !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 1b1fb894cdf..cd0d64ba525 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 @@ -1092,7 +1092,7 @@ z-index: -1; width: $date-inner-size; height: $date-inner-size; - border-radius: calc(var-get($theme, 'date-current-border-radius') - ($border-size * 2)); + border-radius: var-get($theme, 'date-current-border-radius'); background: var-get($theme, 'date-current-background'); border: $border-size solid var-get($theme, 'date-current-border-color'); } @@ -1297,6 +1297,10 @@ border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); } + @if $variant == 'material' { + border-radius: var-get($theme, 'date-special-border-radius'); + } + @if $variant == 'bootstrap' { border-radius: calc(var-get($theme, 'date-special-border-radius') - ($border-size * 2)); } @@ -1645,11 +1649,6 @@ } &::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'); } @@ -1657,6 +1656,17 @@ } } + %date-special-current-selected-active-not-first-last { + %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'); + } + } + } + } + %date-selected { %date-inner { color: var-get($theme, 'date-selected-foreground'); @@ -2055,6 +2065,19 @@ background: var-get($theme, 'date-selected-current-focus-background'); border-color: var-get($theme, 'date-selected-current-focus-border-color'); } + + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + } + } + } + + %date-range-selected-special-current-active-first, + %date-range-selected-special-current-active-last { + %date-inner { + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + } } } @@ -2078,6 +2101,8 @@ %date-selected-current-range-special-active { @if $variant == 'fluent' { %date-inner { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + &::after { background: var-get($theme, 'date-selected-current-range-focus-background'); } @@ -2134,7 +2159,7 @@ &:hover { @if $variant == 'fluent' { - color: var-get($theme, 'date-selected-current-range-foreground'); + color: var-get($theme, 'date-selected-current-range-hover-foreground'); /* stylelint-disable-next-line max-nesting-depth */ &::after { @@ -2259,6 +2284,8 @@ } &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + // stylelint-disable-next-line &::after { border-color: var-get($theme, 'date-selected-special-hover-border-color'); @@ -2283,6 +2310,8 @@ } @if $variant == 'material' { + color: var-get($theme, 'date-selected-focus-foreground'); + &::after { border-color: var-get($theme, 'date-selected-special-focus-border-color'); } @@ -2480,7 +2509,7 @@ width: $date-inner-size; height: $date-inner-size; - @if $variant != 'fluent' { + @if $variant != 'fluent' and $variant != 'material' { border-color: var-get($theme, 'date-selected-special-border-color'); } } @@ -2491,8 +2520,11 @@ %date-range-selected-special-first-active, %date-range-selected-special-last-active { %date-inner { - @if $variant == 'indigo' { + @if $variant == 'indigo' or $variant == 'fluent' { color: var-get($theme, 'date-selected-special-focus-foreground'); + } + + @if $variant == 'indigo' { background: var-get($theme, 'date-selected-special-focus-background'); border-color: var-get($theme, 'date-selected-focus-border-color'); } @@ -2562,7 +2594,7 @@ color: var-get($theme, 'date-selected-current-range-foreground'); &:hover { - color: var-get($theme, 'date-selected-current-range-foreground'); + color: var-get($theme, 'date-selected-current-range-hover-foreground'); } } } @@ -2619,7 +2651,11 @@ } &::after { - border-radius: var-get($theme, 'date-special-border-radius'); + @if $variant == 'indigo' { + border-radius:calc(var-get($theme, 'date-special-border-radius') - $border-size) + } @else { + border-radius: var-get($theme, 'date-special-border-radius'); + } @if $variant == 'bootstrap' { border-color: var-get($theme, 'date-selected-special-border-color'); @@ -2678,10 +2714,10 @@ %date-inner { @if $variant == 'fluent' { - border-color: transparent !important; + border-color: transparent; + background: transparent; } - &:hover { background: var-get($theme, 'date-selected-range-hover-background'); color: var-get($theme, 'date-selected-range-hover-foreground'); @@ -2710,6 +2746,10 @@ @if $variant == 'fluent' { %date-range-selected-first, %date-range-selected-last { + %date-inner { + border-radius: var-get($theme, 'date-range-border-radius'); + } + &::after { border-block-color: var-get($theme, 'date-range-border-color'); } @@ -2726,13 +2766,6 @@ } %date-range-selected-first { - %date-inner { - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: var-get($theme, 'date-range-border-radius'); - border-start-start-radius: var-get($theme, 'date-range-border-radius'); - } - &::before { border-inline-end-color: transparent; border-start-start-radius: var-get($theme, 'date-range-border-radius'); @@ -2741,13 +2774,6 @@ } %date-range-selected-last { - %date-inner { - border-start-start-radius: 0; - border-end-start-radius: 0; - border-start-end-radius: var-get($theme, 'date-range-border-radius'); - border-end-end-radius: var-get($theme, 'date-range-border-radius'); - } - &::before { border-inline-start-color: transparent; border-start-end-radius: var-get($theme, 'date-range-border-radius'); @@ -2907,6 +2933,12 @@ @if $variant != 'indigo' { color: var-get($theme, 'date-special-foreground'); } + + @if $variant == 'material' { + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + } + } } } @@ -2948,6 +2980,7 @@ border-style: solid; } + border-block-color: var-get($theme, 'date-range-preview-border-color'); } @@ -2955,6 +2988,12 @@ @if $variant != 'indigo' and $variant != 'material' { border-color: var-get($theme, 'date-selected-focus-border-color'); } + + @if $variant == 'material' { + &::after { + border-color: transparent; + } + } } @if $variant == 'bootstrap' { @@ -2975,7 +3014,7 @@ %date-first-preview-selected, %date-last-preview-selected { %date-inner { - @if $variant != 'fluent' and $variant != 'indigo' { + @if $variant == 'bootstrap' { color: var-get($theme, 'date-selected-foreground'); } } @@ -2996,15 +3035,6 @@ } } - //@if $variant == 'fluent' { - // %date-first-preview-current-selected, - // %date-last-preview-current-selected { - // %date-inner { - // color: var-get($theme, 'date-selected-current-range-foreground'); - // } - // } - //} - @if $variant == 'bootstrap' { %date-first-preview-current, %date-last-preview-current { @@ -3164,11 +3194,7 @@ %date-first-preview-special-active, %date-last-preview-special-active { %date-inner { - @if $variant == 'material' { - color: var-get($theme, 'date-special-focus-foreground'); - } - - @if $variant == 'indigo' { + @if $variant == 'indigo' or $variant == 'material' { color: var-get($theme, 'date-special-focus-foreground'); background: var-get($theme, 'date-special-focus-background'); border-color: var-get($theme, 'date-special-focus-border-color'); @@ -3176,8 +3202,8 @@ &::after { @if $variant == 'material' { - width: $date-size; - height: $date-size; + width: $date-inner-size; + height: $date-inner-size; } } } @@ -3323,6 +3349,10 @@ %date-disabled-special { %date-inner { opacity: .38; + + @if $variant == 'fluent' { + border-color: transparent; + } } } @@ -3380,6 +3410,47 @@ outline: none; } } + + %date-disabled-current-range { + %date-inner { + @if $variant == 'material' { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + } + + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-current-range-foreground'); + border-color: transparent; + background: transparent; + + &::before { + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + } + } + } + } + + %date-disabled-current-special-range { + %date-inner { + @if $variant == 'fluent' { + color: var-get($theme, 'date-selected-current-range-foreground'); + border-color: transparent; + background: transparent; + + &::before { + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + } + + &::after { + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-special-range-border-color'); + } + } + } + } } /// Adds typography styles for the igx-calendar component. From b0c2bb598688854ed48ea6d0d86a2c580deba333 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 24 Nov 2025 11:39:08 +0200 Subject: [PATCH 11/16] fix(calendar): refactor and simplify theme styles - Remove `$bootstrap-theme` variable and use `$variant` for conditionals. - Consolidate redundant styles and improve readability. - Enhance support for theme-specific behaviors across all variants. --- .../calendar/_calendar-component.scss | 1100 +++--- .../components/calendar/_calendar-theme.scss | 3156 ++++------------- 2 files changed, 1260 insertions(+), 2996 deletions(-) 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 556420e2667..25d5f314d32 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,770 +110,836 @@ @extend %days-view-row !optional; } - @include e(date-inner) { - @extend %date-inner !optional; - } - - @include e(date) { + // LABEL + @include e(label) { @extend %date !optional; + @extend %weekday-label !optional; } - @include e(date, 'week-number') { - @extend %date-week-number !optional; - } - - @include e(date, 'inactive', $not: (range, selected, first, last, current, special, disabled)) { - @extend %date-inactive !optional; + @include e(label, 'week-number') { + @extend %label-week-number !optional; } - @include e(date, $mods: ('inactive', 'range-preview')) { - @extend %date-inactive-range-preview !optional; + @include e(label-inner) { + @extend %weekday-label-inner !optional; } - @include e(date, 'active') { - @extend %date-active !optional; + // DATE + @include e(date) { + @extend %date !optional; } - @include e(date, 'selected') { - @extend %date-selected !optional; + @include e(date-inner) { + @extend %date-inner !optional; } - @include e(date, 'selected', $not: ('range', 'range-preview')) { - @extend %date-selected-not-in-range !optional; + @include e(date-inner, 'week-number') { + @extend %date-inner-week-number !optional; } - @include e(date, $mods: ('selected', 'first', 'last')) { - @extend %date-selected-first-last !optional; + @include e(date, 'week-number') { + @extend %date-week-number !optional; } - @include e(date, $mods: ('selected', 'first', 'last', 'active')) { - @extend %date-selected-first-last-active !optional; + @include e(date, 'weekend') { + %date-inner { + @extend %date-weekend !optional; + } } - @include e(date, $mods: ('selected', 'first', 'last'), $not: ('special', 'current')) { - @extend %date-selected-first-last-not-special-currnet !optional; + @include e(date, 'inactive') { + %date-inner { + @extend %date-inactive !optional; + } } - @include e(date, $mods: ('selected', 'first', 'range-preview'), $not: ('special', 'current')) { - @extend %date-selected-first-last-not-special-currnet !optional; + // HIDDEN + @include e(date, 'hidden') { + @extend %date-hidden !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', 'range-preview')) { - @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; - } + // STATE STYLES + // ----------------------------------------------------------------------------------- - @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; + // ACTIVE PLAYS ROLE FOR FOCUS + @include e(date, 'active') { + %date-inner { + @extend %date-focus !optional; + } } - @include e(date, $mods: ('selected', 'range')) { - @extend %date-selected-range !optional; + // SELECTED + @include e(date, 'selected') { + %date-inner { + @extend %date-selected !optional; + } } - @include e(date, $mods: ('selected', 'special', 'range')) { - @extend %date-selected-special-range !optional; + @include e(date, $mods: ('selected', 'active')) { + %date-inner { + @extend %date-selected--focus !optional; + } } - @include e(date, $mods: ('selected', 'special', 'active', 'range')) { - @extend %date-selected-special-range !optional; - @extend %date-selected-special-range-active !optional; + // CURRENT + @include e(date, 'current') { + %date-inner { + @extend %date-current !optional; + @extend %date-current-border-radius !optional; + } } - - @include e(date, $mods: ('selected', 'special', 'range'), $not: ('current')) { - @extend %date-selected-special-range-not-current !optional; + @include e(date, $mods: ('current', 'active')) { + %date-inner { + @extend %date-current--focus !optional; + } } - @include e(date, $mods: ('selected', 'special', 'active', 'range'), $not: ('current')) { - @extend %date-selected-special-active-range-not-current !optional; + @include e(date, $mods: ('current', 'first', 'last')) { + @extend %date-current-border-radius !optional; } - @include e(date, 'hidden') { - @extend %date-hidden !optional; + @include e(date, $mods: ('current', 'selected'), $not: ('range')) { + %date-inner { + @extend %date-current--selected !optional; + } } - @include e(date, 'range') { - @extend %date-range !optional; - - &:hover { - @extend %date-range-hover !optional; + @include e(date, $mods: ('current', 'selected', 'active'), $not: ( 'range')) { + %date-inner { + @extend %date-current--selected-focus !optional; } } - @include e(date, 'range', $not: ('first', 'last', 'current', 'special')) { - @extend %date-range-not-first-last-current-special !optional; + @include e(date, $mods: ('current', 'selected', 'first')) { + %date-inner { + @extend %date-current--selected !optional; + @extend %date-current--selected-first !optional; + } } - @include e(date, 'range-preview') { - @extend %date-range-preview !optional; + @include e(date, $mods: ('current', 'selected', 'active', 'first')) { + %date-inner { + @extend %date-current--selected-focus !optional; + @extend %date-current--selected-first-focus !optional; + } } - @include e(date, $mods: ('range-preview', 'inactive')) { - @extend %date-range-preview-inactive !optional; + @include e(date, $mods: ('current', 'selected', 'last')) { + %date-inner { + @extend %date-current--selected !optional; + @extend %date-current--selected-last !optional; + } } - @include e(date, $mods: ('range-preview', 'active')) { - @extend %date-range-preview-active !optional; + @include e(date, $mods: ('current', 'selected', 'active', 'last')) { + %date-inner { + @extend %date-current--selected-focus !optional; + @extend %date-current--selected-last-focus !optional; + } } - @include e(date, $mods: ('range-preview', 'weekend'), $not: ('current', 'special')) { - @extend %date-range-preview-weekend !optional; + @include e(date, $mods: ('current', 'selected', 'range', 'first')) { + &::before { + @extend %date-current-border-radius !optional; + } } - @include e(date, $mods: ('range-preview', 'weekend', 'first')) { - @extend %date-range-preview-weekend-first !optional; + @include e(date, $mods: ('current', 'selected', 'range', 'last')) { + &::before { + @extend %date-current-border-radius !optional; + } } - @include e(date, $mods: ('range-preview', 'weekend', 'last')) { - @extend %date-range-preview-weekend-last !optional; + @include e(date, $mods: ('current', 'range'), $not: ('first', 'last')) { + %date-inner { + @extend %date-selected-current-range !optional; + } } - @include e(date, $mods: ('range-preview', 'weekend', 'active'), $not: ('current', 'special')) { - @extend %date-range-preview-weekend-active !optional; + @include e(date, $mods: ('current', 'range', 'active'), $not: ('first', 'last')) { + %date-inner { + @extend %date-selected-current-focus !optional; + } } - @include e(date, $mods: ('range-preview', 'current')) { - @extend %date-range-preview-current !optional; + // SPECIAL + @include e(date, 'special') { + %date-inner { + @extend %date-special !optional; + @extend %date-special-border-radius !optional; + } } - @include e(date, $mods: ('range-preview', 'current', 'active')) { - @extend %date-range-preview-current-active !optional; + @include e(date, $mods: ('special', 'first', 'last')) { + @extend %date-special-border-radius !optional; } - @include e(date, $mods: ('range-preview', 'special')) { - @extend %date-range-preview-special !optional; + @include e(date, $mods: ('special', 'active')) { + %date-inner { + @extend %date-special--focus !optional; + } } - @include e(date, $mods: ('range', 'selected')) { - @extend %date-range-selected !optional; + @include e(date, $mods: ('special', 'selected'), $not: ('range')) { + %date-inner { + @extend %date-special--selected !optional; + } } - @include e(date, $mods: ('first', 'last')) { - @extend %date-first-last !optional; + @include e(date, $mods: ('special', 'selected', 'first')) { + %date-inner { + @extend %date-special--selected !optional; + @extend %date-special--selected-first !optional; + } } - @include e(date, $mods: ('range', 'selected', 'current', 'first')) { - @extend %date-range-selected-current-first !optional; + @include e(date, $mods: ('special', 'selected', 'last')) { + %date-inner { + @extend %date-special--selected !optional; + @extend %date-special--selected-last !optional; + } } - @include e(date, $mods: ('range', 'selected', 'current', 'first', 'active')) { - @extend %date-range-selected-current-first-active !optional; + @include e(date, $mods: ('special', 'selected', 'active'), $not: ('range')) { + %date-inner { + @extend %date-special--selected-focus !optional; + } } - @include e(date, $mods: ('range', 'selected', 'special', 'first')) { - @extend %date-range-selected-special-first !optional; + @include e(date, $mods: ('special', 'selected', 'active', 'first')) { + %date-inner { + @extend %date-special--selected-focus !optional; + @extend %date-special--selected-first-focus !optional; + } } - @include e(date, $mods: ('range', 'selected', 'special', 'first', 'active')) { - @extend %date-range-selected-special-first-active !optional; + @include e(date, $mods: ('special', 'selected', 'active', 'last')) { + %date-inner { + @extend %date-special--selected-focus !optional; + @extend %date-special--selected-last-focus !optional; + } } - @include e(date, $mods: ('range', 'selected', 'current', 'last')) { - @extend %date-range-selected-current-last !optional; + @include e(date, $mods: ('special', 'selected', 'range', 'first')) { + &::before { + @extend %date-special-border-radius !optional; + } } - @include e(date, $mods: ('range', 'selected', 'current', 'last', 'active')) { - @extend %date-range-selected-current-last-active !optional; + @include e(date, $mods: ('special', 'selected', 'range', 'last')) { + &::before { + @extend %date-special-border-radius !optional; + } } - @include e(date, $mods: ('range', 'selected', 'first')) { - @extend %date-range-selected-first !optional; + @include e(date, $mods: ('special', 'range'), $not: ('range-preview', 'first', 'last')) { + %date-inner { + @extend %date-special-range-not-preview !optional; + } } - @include e(date, $mods: ('range', 'selected', 'last')) { - @extend %date-range-selected-last !optional; + @include e(date, $mods: ('special', 'range', 'active'), $not: ('range-preview', 'first', 'last')) { + %date-inner { + @extend %date-special-range-not-preview-focus !optional; + } } - @include e(date, $mods: ('range', 'first')) { - @extend %date-range-first !optional; + @include e(date, $mods: ('special', 'range'), $not: ('first', 'last')) { + %date-inner { + @extend %date-special-range !optional; + } } - @include e(date, $mods: ('range', 'last')) { - @extend %date-range-last !optional; + @include e(date, $mods: ('special', 'range', 'active'), $not: ('first', 'last')) { + %date-inner { + @extend %date-special-range-focus !optional; + } } - @include e(date, $mods: ('range', 'selected', 'special')) { - @extend %date-range-selected-special !optional; + // SPECIAL + CURRENT + @include m(material) { + @include e(date, $mods: ('special', 'current')) { + %date-inner { + @extend %material-date-special-current !optional; + } + } } - @include e(date, $mods: ('range', 'selected', 'special', 'active')) { - @extend %date-range-selected-special-active !optional; + // RANGE STYLES + @include e(date, 'range') { + @extend %date-range !optional; } - @include e(date, $mods: ('range', 'selected', 'special', 'current')) { - @extend %date-range-selected-special-current !optional; + @include e(date, 'first') { + @extend %date-first !optional; } - @include e(date, $mods: ('range', 'selected', 'special', 'current', 'active')) { - @extend %date-range-selected-special-current-active !optional; + @include e(date, 'last') { + @extend %date-last !optional; } - @include e(date, $mods: ('range', 'selected', 'special', 'current', 'active', 'first')) { - @extend %date-range-selected-special-current-active-first !optional; + @include e(date, 'first', $not: ( 'current', 'special')) { + %date-inner { + @extend %date-range-border !optional; + } } - @include e(date, $mods: ('range', 'selected', 'special', 'current', 'active', 'last')) { - @extend %date-range-selected-special-current-active-last !optional; + @include e(date, 'last', $not: ( 'current', 'special')) { + %date-inner { + @extend %date-range-border !optional; + } } - @include e(date, $mods: ('range', 'selected', 'special', 'last')) { - @extend %date-range-selected-special-last !optional; + @include e(date, $mods: ('range', 'first')) { + @extend %date-range--first !optional; } - @include e(date, $mods: ('range', 'selected', 'special', 'last', 'active')) { - @extend %date-range-selected-special-last-active !optional; + @include e(date, $mods: ('range', 'last')) { + @extend %date-range--last !optional; } - @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last')) { - @extend %date-selected-special-first-last !optional; + @include e(date, $mods: ('range', 'first'), $not: ( 'current', 'special')) { + @extend %date-wrapper-range-border !optional; } - @include e(date, $mods: ('range', 'selected', 'special', 'first', 'last', 'active')) { - @extend %date-selected-special-first-last-active !optional; + @include e(date, $mods: ('range', 'last'), $not: ( 'current', 'special')) { + @extend %date-wrapper-range-border !optional; } - @include e(date, $mods: ('selected', 'special', 'current', 'first', 'last')) { - @extend %date-selected-special-current-first-last !optional; + @include e(date, 'range', $not: ('first', 'last', 'current', 'special')) { + %date-inner { + @extend %date-range-middle !optional; + } } - @include e(date, $mods: ('selected', 'special', 'current', 'active', 'first', 'last')) { - @extend %date-selected-special-current-active-first-last !optional; + @include e(date, $mods: ('range', 'active'), $not: ('first', 'last', 'current', 'special', 'range-preview')) { + %date-inner { + @extend %date-range-middle--focus !optional; + } } - @include e(date, $mods: ('selected', 'special', 'current', 'first', 'range-preview')) { - @extend %date-selected-special-current-first-range-preview !optional; + // PREVIEW STYLES + @include e(date, 'range-preview') { + @extend %date-range-preview !optional; } - @include e(date, $mods: ('selected', 'special', 'current', 'active', 'first', 'range-preview')) { - @extend %date-selected-special-current-active-first-range-preview !optional; + @include e(date, $mods:('range-preview', 'first')) { + @extend %date-preview--first !optional; } - @include e(date, $mods: ('selected', 'special', 'current', 'last', 'range-preview')) { - @extend %date-selected-special-current-last-range-preview !optional; + @include e(date, $mods:('range-preview', 'last')) { + @extend %date-preview--last !optional; } - @include e(date, $mods: ('selected', 'special', 'current', 'active', 'last', 'range-preview')) { - @extend %date-selected-special-current-active-last-range-preview !optional; + @include e(date, 'disabled') { + pointer-events: none; + cursor: not-allowed; } - @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'first')) { - @extend %date-selected-special-current-first !optional; + // DISABLED + @include e(date, $mods: ('disabled', 'special')) { + %date-inner { + opacity: .38; + } } - @include e(date, $mods: ('selected', 'special', 'current', 'preview', 'last')) { - @extend %date-selected-special-current-last !optional; + @include e(date, $mods: ('disabled', 'current')) { + %date-inner { + opacity: .38; + } } - @include e(date, $mods: ('range', 'selected', 'active')) { - @extend %date-range-selected-active !optional; + @include e(date, 'disabled', $not: ('special', 'current', 'range', 'first', 'last')) { + %date-inner { + @extend %date-disabled !optional; + } } - @include e(date, $mods: ('range', 'selected', 'active', 'first')) { - @extend %date-range-selected-active-first !optional; + @include e(date, $mods: ('disabled', 'range'), $not: ('selected', 'special', 'current', 'range-preview', 'first', 'last')) { + %date-inner { + @extend %date-disabled-range !optional; + } } - @include e(date, $mods: ('range', 'selected', 'active', 'last')) { - @extend %date-range-selected-active-last !optional; - } - @include e(date, $mods: ('range', 'selected', 'current')) { - @extend %date-selected-current-range !optional; - } - @include e(date, $mods: ('range', 'selected', 'current', 'active')) { - @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 m(bootstrap) { + // SPECIAL + @include e(date, 'special') { + %date-inner { + @extend %bootstrap-date-special !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: ('special', 'first')) { + %date-inner { + @extend %bootstrap-date-special-first-last !optional; + } + } - @include e(date, $mods: ('range', 'selected', 'current', 'special')) { - @extend %date-selected-current-range-special!optional; - } + @include e(date, $mods: ('special', 'last')) { + %date-inner { + @extend %bootstrap-date-special-first-last !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: ('special', 'range'), $not: ('range-preview', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-special-range !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: ('special', 'range', 'active'), $not: ('range-preview', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-special-range-focus !optional; + } + } - @include e(date, $mods: ('range', 'selected', 'current', 'first')) { - @extend %date-selected-current-range-first !optional; - } + // CURRENT + SPECIAL + @include e(date, $mods: ('current', 'special'), $not: ('first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-special !optional; + } + } - @include e(date, $mods: ('range', 'selected', 'current', 'last')) { - @extend %date-selected-current-range-last !optional; - } + @include e(date, $mods: ('current', 'special', 'active'), $not: ('first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-special-focus !optional; + } + } - @include e(date, $mods: ('range', 'selected', 'current', 'first', 'active')) { - @extend %date-selected-current-range-first-active !optional; - } - @include e(date, $mods: ('range', 'selected', 'current', 'last', 'active')) { - @extend %date-selected-current-range-last-active !optional; - } + // CURRENT + SPECIAL + RANGE + @include e(date, $mods: ('current', 'special', 'range'), $not: ('first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-special-range !optional; + } + } - @include e(date, $mods: ('range', 'selected', 'current', 'first', 'special')) { - @extend %date-selected-current-range-special-first !optional; - } + @include e(date, $mods: ('current', 'special', 'range', 'active'), $not: ('first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-special-range-focus !optional; + } + } - @include e(date, $mods: ('range', 'selected', 'current', 'first', 'special', 'active')) { - @extend %date-selected-current-range-special-active-first !optional; - } + // PREVIEW + @include e(date, 'range-preview') { + @extend %bootstrap-date-range-preview !optional; + } - @include e(date, $mods: ('range', 'selected', 'current', 'last', 'special')) { - @extend %date-selected-current-range-special-last !optional; - } + @include e(date, $mods:('range-preview', 'first')) { + @extend %bootstrap-date-preview--first-last !optional; + } - @include e(date, $mods: ('range', 'selected', 'current', 'last', 'special', 'active')) { - @extend %date-selected-current-range-special-active-last !optional; - } + @include e(date, $mods:('range-preview', 'last')) { + @extend %bootstrap-date-preview--first-last !optional; + } - @include e(date, 'weekend') { - @extend %date-weekend !optional; - } + @include e(date, $mods:('range-preview', 'first', 'active')) { + @extend %bootstrap-date-preview--first-last-focus !optional; + } - @include e(date, 'current') { - @extend %date-current !optional; - } + @include e(date, $mods:('range-preview', 'last', 'active')) { + @extend %bootstrap-date-preview--first-last-focus !optional; + } - @include e(date, $mods: ('current', 'active')) { - @extend %date-current-active !optional; - } + @include e(date, $mods: ('range-preview', 'current')) { + %date-inner { + @extend %bootstrap-date-range-preview-current !optional; + } + } - @include e(date, $mods: ('current', 'range')) { - @extend %date-current-range !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'active')) { + %date-inner { + @extend %bootstrap-date-range-preview-current-focus !optional; + } + } - @include e(date, $mods: ('current', 'selected')) { - @extend %date-selected-current !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'first')) { + %date-inner { + @extend %bootstrap-date-range-preview-current-first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'range-preview')) { - @extend %date-selected-current-range-preview !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'last')) { + %date-inner { + @extend %bootstrap-date-range-preview-current-first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'active')) { - @extend %date-selected-current-active !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'active', 'first')) { + %date-inner { + @extend %bootstrap-date-range-preview-current-focus-first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'first')) { - @extend %date-selected-current-first !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'active', 'last')) { + %date-inner { + @extend %bootstrap-date-range-preview-current-focus-first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'last')) { - @extend %date-selected-current-last !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'first')) { + %date-inner { + @extend %bootstrap-date-preview-special--first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'first', 'last')) { - @extend %date-selected-current-first-last !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-special--first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'first', 'active')) { - @extend %date-selected-current-first-active !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'active', 'first')) { + %date-inner { + @extend %bootstrap-date-preview-special-focus--first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'last', 'active')) { - @extend %date-selected-current-last-active !optional; - } + @include e(date, $mods: ('range-preview', 'current', 'active', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-special-focus--first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'first', 'last', 'active')) { - @extend %date-selected-current-first-last-active !optional; - } + @include e(date, $mods: ('range-preview', 'special', 'first')) { + %date-inner { + @extend %bootstrap-date-preview-special--first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'special')) { - @extend %date-selected-current-special !optional; - } + @include e(date, $mods: ('range-preview', 'special', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-special--first-last !optional; + } + } - @include e(date, $mods: ('current', 'selected', 'special', 'active')) { - @extend %date-selected-current-special-active !optional; - } + @include e(date, $mods: ('range-preview', 'special', 'active', 'first')) { + %date-inner { + @extend %bootstrap-date-preview-special-focus--first-last !optional; + } + } - @include e(date, 'special') { - @extend %date-special !optional; - } + @include e(date, $mods: ('range-preview', 'special', 'active', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-special-focus--first-last !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: ('range-preview', 'weekend'), $not: ('special', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-weekend-inactive !optional; + } + } - @include e(date, $mods: ('special', 'range-preview', 'disabled')) { - @extend %date-special-range-preview-disabled !optional; - } + @include e(date, $mods: ('range-preview', 'weekend', 'active'), $not: ('special', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-weekend-inactive-focus !optional; + } + } - @include e(date, $mods: ('special', 'current', 'range-preview')) { - @extend %date-special-current-range-preview !optional; - } + @include e(date, $mods: ('range-preview', 'inactive'), $not: ('special', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-weekend-inactive !optional; + } + } - @include e(date, $mods: ('special', 'selected', 'first', 'last')) { - @extend %date-special-range-preview !optional; - } + @include e(date, $mods: ('range-preview', 'inactive', 'active'), $not: ('special', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-preview-weekend-inactive-focus !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; - } + // RANGE - @include e(date, $mods: ('special', 'current', 'range-preview', 'active')) { - @extend %date-special-current-range-preview-active !optional; - } + @include e(date, $mods: ('range', 'current', 'first')) { + %date-inner { + @extend %bootstrap-date-range-radius !optional; + } + } - @include e(date, $mods: ('special', 'selected', 'active', 'first', 'last')) { - @extend %date-special-range-preview-active !optional; - } + @include e(date, $mods: ('range', 'current', 'last')) { + %date-inner { + @extend %bootstrap-date-range-radius !optional; + } + } - @include e(date, $mods: ('special', 'current', 'selected', 'active', 'first', 'last')) { - @extend %date-special-current-range-preview-active !optional; - } + @include e(date, $mods: ('range', 'special', 'first')) { + %date-inner { + @extend %bootstrap-date-range-radius !optional; + } + } - @include e(date, $mods: ('special', 'current')) { - @extend %date-special-current !optional; - } + @include e(date, $mods: ('range', 'special', 'last')) { + %date-inner { + @extend %bootstrap-date-range-radius !optional; + } + } - @include e(date, $mods: ('special', 'current', 'selected')) { - @extend %date-special-current-selected !optional; - } - @include e(date, $mods: ('special', 'current', 'selected', 'active')) { - @extend %date-special-current-selected-active !optional; + // DISABLED PREVIEW + @include e(date, $mods: ('disabled', 'range-preview'), $not: ('special', 'current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-disabled-range-preview !optional; + } + } } - @include e(date, $mods: ('special', 'current', 'selected', 'active'), $not: ('first', 'last')) { - @extend %date-special-current-selected-active-not-first-last !optional; - } - @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-active !optional; - } - @include e(date, $mods: ('special', 'current', 'active', 'range')) { - @extend %date-special-current !optional; - @extend %date-special-current-active !optional; - } - @include e(date, 'first') { - @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; - } - @include e(date, $mods: ('last', 'range-preview')) { - @extend %date-last-preview !optional; - } - @include e(date, $mods: ('first', 'range-preview', 'selected')) { - @extend %date-first-preview-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 m(indigo) { + @include e(label, 'week-number') { + @extend %indigo-label-week-number !optional; + } - @include e(date, $mods: ('last', 'range-preview', 'selected')) { - @extend %date-last-preview-selected !optional; - } + @include e(date-inner, 'week-number') { + @extend %indigo-date-inner-week-number !optional; + } - @include e(date, $mods: ('last', 'range-preview', 'selected', 'active')) { - @extend %date-last-preview-selected-active !optional; - } + @include e(date, 'special') { + %date-inner { + font-weight: 700; + } + } - @include e(date, $mods: ('last', 'range-preview', 'current')) { - @extend %date-last-preview-current !optional; - } + // SELECTED + CURRENT + FIRST/ LAST + @include e(date, $mods: ('current', 'selected', 'first')) { + %date-inner { + @extend %indigo-current-selected-first-last !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'current', 'active')) { - @extend %date-last-preview-current-active !optional; - } + @include e(date, $mods: ('current', 'selected', 'last')) { + %date-inner { + @extend %indigo-current-selected-first-last !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'special')) { - @extend %date-first-preview-special !optional; - } + @include e(date, $mods: ('current', 'selected', 'first', 'active')) { + %date-inner { + @extend %indigo-current-selected-first-last-focus !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'special')) { - @extend %date-last-preview-special !optional; - } + @include e(date, $mods: ('current', 'selected', 'last', 'active')) { + %date-inner { + @extend %indigo-current-selected-first-last-focus !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'active')) { - @extend %date-first-preview-active !optional; - } + // CURRENT + SELECTED RANGE + FIRST/ LAST + @include e(date, $mods: ('current', 'selected', 'range', 'first')) { + %date-inner { + @extend %indigo-current-selected-range-first-last !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'active')) { - @extend %date-last-preview-active !optional; - } + @include e(date, $mods: ('current', 'selected', 'range', 'last')) { + %date-inner { + @extend %indigo-current-selected-range-first-last !optional; + } + } - @include e(date, $mods: ('first', 'last', 'selected')) { - @extend %date-first-last-selected !optional; - } + @include e(date, $mods: ('current', 'selected', 'range', 'first', 'active')) { + %date-inner { + @extend %indigo-current-selected-range-first-last-focus !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'special', 'current')) { - @extend %date-first-preview-special-current !optional; - } + @include e(date, $mods: ('current', 'selected', 'range', 'last', 'active')) { + %date-inner { + @extend %indigo-current-selected-range-first-last-focus !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'special', 'current')) { - @extend %date-last-preview-special-current !optional; - } + // SPECIAL + SELECTED FIRST/ LAST + @include e(date, $mods: ('special', 'selected', 'first')) { + %date-inner { + @extend %indigo-special-selected-first-last !optional; - @include e(date, $mods: ('first', 'range-preview', 'special', 'active')) { - @extend %date-first-preview-special-active !optional; - } + // stylelint-disable-next-line max-nesting-depth + &::after { + @extend %indigo-date-special-selected-inner-radius !optional; + } + } + } - @include e(date, $mods: ('last', 'range-preview', 'special', 'active')) { - @extend %date-last-preview-special-active !optional; - } + @include e(date, $mods: ('special', 'selected', 'last')) { + %date-inner { + @extend %indigo-special-selected-first-last !optional; + // stylelint-disable-next-line max-nesting-depth + &::after { + @extend %indigo-date-special-selected-inner-radius !optional; + } + } + } - @include e(date, $mods: ('first', 'range-preview', 'special', 'selected')) { - @extend %date-first-preview-special-selected !optional; - } + @include e(date, $mods: ('special', 'selected', 'first', 'active')) { + %date-inner { + @extend %indigo-special-selected-first-last-focus !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'special', 'selected')) { - @extend %date-last-preview-special-selected !optional; - } + @include e(date, $mods: ('special', 'selected', 'last', 'active')) { + %date-inner { + @extend %indigo-special-selected-first-last-focus !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'special', 'active', 'selected')) { - @extend %date-first-preview-special-active-selected !optional; - } + // SPECIAL + SELECTED + @include e(date, $mods: ('special', 'selected'), $not: ( 'range', 'range-preview')) { + %date-inner { + // stylelint-disable-next-line max-nesting-depth + &::after { + @extend %indigo-date-special-selected-inner-radius !optional; + } + } + } - @include e(date, $mods: ('last', 'range-preview', 'special', 'active', 'selected')) { - @extend %date-last-preview-special-active-selected !optional; - } + // SPECIAL + CURRENT + RANGE + @include e(date, $mods: ('special', 'current')) { + %date-inner { + @extend %indigo-special-current !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'special', 'current', 'selected')) { - @extend %date-first-preview-special-current-selected !optional; - } + @include e(date, $mods: ('special', 'current', 'range')) { + %date-inner { + @extend %indigo-special-current-range !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'special', 'current', 'selected')) { - @extend %date-last-preview-special-current-selected !optional; - } + @include e(date, $mods: ('special', 'current', 'range', 'active')) { + %date-inner { + @extend %indigo-special-current-range-focus !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'special', 'current', 'active', 'selected')) { - @extend %date-first-preview-special-current-active-selected !optional; - } + @include e(date, $mods: ('special', 'current', 'range'), $not: ('first', 'last')) { + %date-inner { + @extend %indigo-special-current-range-not-first-last !optional; + } + } - @include e(date, $mods: ('last', 'range-preview', 'special', 'current', 'active', 'selected')) { - @extend %date-last-preview-special-current-active-selected !optional; - } + @include e(date, $mods: ('special', 'current', 'range', 'active'), $not: ('first', 'last')) { + %date-inner { + @extend %indigo-special-current-range-not-first-last-focus !optional; + } + } - @include e(date, $mods: ('first', 'range-preview', 'special', 'active', 'current')) { - @extend %date-first-preview-special-active-current !optional; - } - @include e(date, $mods: ('last', 'range-preview', 'special', 'active', 'current')) { - @extend %date-last-preview-special-active-current !optional; - } + @include e(date, $mods: ('special', 'current', 'range', 'first')) { + %date-inner { + @extend %indigo-special-current-range-first-last !optional; + } + } - @include e(date, 'last') { - @extend %date-last !optional; - } + @include e(date, $mods: ('special', 'current', 'range', 'last')) { + %date-inner { + @extend %indigo-special-current-range-first-last !optional; + } + } - @include e(date, $mods: ('last', 'special')) { - @extend %date-last-special !optional; - } + @include e(date, $mods: ('special', 'current', 'range', 'active', 'first')) { + %date-inner { + @extend %indigo-special-current-range-first-last-focus !optional; + } + } - @include e(date, $mods: ('last', 'special', 'active')) { - @extend %date-last-special-active !optional; - } + @include e(date, $mods: ('special', 'current', 'range', 'active', 'last')) { + %date-inner { + @extend %indigo-special-current-range-first-last-focus !optional; + } + } - @include e(date, $mods: ('last', 'current')) { - @extend %date-last-current !optional; - } + // SPECIAL + CURRENT + @include e(date, $mods: ('special', 'current'), $not: ('range')) { + %date-inner { + @extend %indigo-date-special-current-indented !optional; - @include e(date, $mods: ('last', 'special', 'current')) { - @extend %date-last-special-current !optional; - } + // stylelint-disable-next-line max-nesting-depth + &::after { + @extend %indigo-date-special-selected-inner-radius !optional; + } + } + } - @include e(label) { - @extend %date !optional; - @extend %weekday-label !optional; - } + @include e(date, $mods: ('special', 'current', 'active'), $not: ('range')) { + %date-inner { + @extend %indigo-date-special-current-focus !optional; + } + } - @include e(label-inner) { - @extend %weekday-label-inner !optional; - } + @include e(date, $mods: ('special', 'current'), $not: ('selected', 'range')) { + %date-inner { + @extend %indigo-date-special-current-not-selected !optional; + } + } - @include e(label, 'week-number') { - @extend %label-week-number !optional; - } + @include e(date, $mods: ('special', 'current', 'active'), $not: ('selected', 'range')) { + %date-inner { + @extend %indigo-date-special-current-focus-not-selected !optional; + } + } - @include e(date-inner, 'week-number') { - @extend %date-inner-week-number !optional; - } + @include e(date, $mods: ('special', 'current', 'selected'), $not: ( 'range')) { + %date-inner { + @extend %indigo-date-special-current-selected !optional; + } + } - @include e(date, 'disabled') { - @extend %date-disabled !optional; + @include e(date, $mods: ('special', 'current', 'selected', active), $not: ( 'range')) { + %date-inner { + @extend %indigo-date-special-current-selected-focus !optional; + } + } } - @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; - } - @include e(date, $mods: ('disabled', 'range-preview')) { - @extend %date-disabled-range-preview !optional; - } - @include e(date, $mods: ('disabled', 'special')) { - @extend %date-disabled-special !optional; - } - @include e(date, $mods: ('disabled', 'special', 'selected')) { - @extend %date-disabled-special-selected !optional; - } - @include e(date, $mods: ('disabled', 'selected')) { - @extend %date-disabled-selected !optional; - } - @include e(date, $mods: ('disabled', 'current')) { - @extend %date-disabled-current !optional; - } - @include e(date, $mods: ('disabled', 'current')) { - @extend %date-disabled-current !optional; - } - @include e(date, $mods: ('disabled', 'current', 'range')) { - @extend %date-disabled-current-range !optional; - } - @include e(date, $mods: ('disabled', 'current', 'special')) { - @extend %date-disabled-current-special !optional; - } - @include e(date, $mods: ('disabled', 'current', 'special', 'range')) { - @extend %date-disabled-current-special-range !optional; - } - @include e(date, $mods: ('disabled', 'single', 'current', 'special', 'selected')) { - @extend %date-disabled-current-special-selected !optional; - } - @include e(date, $mods: ('disabled', 'current', 'selected')) { - @extend %date-disabled-current-selected !optional; - } - @include e(date, $mods: ('disabled', 'inactive')) { - @extend %date-disabled-inactive !optional; - } - @include e(date, $mods: ('range', 'selected', 'first', 'disabled')) { - @extend %date-range-selected-first-disabled !optional; - } - @include e(date, $mods: ('range', 'selected', 'last', 'disabled')) { - @extend %date-range-selected-last-disabled !optional; - } + //@include m(fluent) {} } @include b(igx-calendar-view) { 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 cd0d64ba525..51d45e3b99a 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 @@ -9,7 +9,6 @@ @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); - $bootstrap-theme: $variant == 'bootstrap'; $cal-picker-padding: map.get(( 'material': rem(16px), @@ -132,7 +131,7 @@ align-items: center; } - @if $bootstrap-theme { + @if $variant == 'bootstrap' { %days-view { padding-block-end: pad-block(rem(16px)); padding-block-start: 0; @@ -171,9 +170,7 @@ top: $cal-picker-padding; } } - } - - @if not $bootstrap-theme { + } @else { %body-display:not(%body-display--vertical) { %days-view + %days-view { padding-inline-start: 0; @@ -202,9 +199,10 @@ border-radius: 0; } - %views-navigation { - @if $bootstrap-theme { + @if $variant == 'bootstrap' { + %views-navigation { border-block-end: rem(1px) solid var-get($theme, 'border-color'); + } } } @@ -241,13 +239,8 @@ } %header-display-vertical { - @if $variant == 'indigo' { - min-width: rem(136px); - width: rem(136px); - } @else { - min-width: rem(168px); - width: rem(168px); - } + min-width: if($variant == 'indigo', rem(136px), rem(168px)); + width: if($variant == 'indigo', rem(136px), rem(168px)); @if $variant == 'indigo' { &::after { @@ -261,18 +254,17 @@ %header-year { margin: 0; + color: currentColor; - @if $bootstrap-theme { + @if $variant == 'bootstrap' { min-height: rem(24px); } - - color: currentColor; } %header-date { display: flex; - @if $bootstrap-theme { + @if $variant == 'bootstrap' { padding-block-end: pad-block(rem(8px)); } @else { margin: 0; @@ -302,7 +294,7 @@ %calendar-wrapper--vertical { display: grid; - grid-template-rows: repeat(calc(var(--calendar-months) * 2), auto); + grid-template-rows: repeat(#{calc(var(--calendar-months) * 2), auto}); %days-view { grid-row: var(--calendar-row-start); @@ -324,20 +316,18 @@ } } - %body-display { + %body-display, + %pickers-display--days { display: grid; grid-template-columns: repeat(var(--calendar-months), 1fr); + } - @if not $bootstrap-theme { + @if $variant != 'bootstrap' { + %body-display { column-gap: rem(44px); } - } - - %pickers-display--days { - display: grid; - grid-template-columns: repeat(var(--calendar-months), 1fr); - @if not $bootstrap-theme { + %pickers-display--days { gap: rem(40px); } } @@ -382,12 +372,6 @@ } %days-view { - @if not $bootstrap-theme { - padding-inline: pad-inline(rem(12px)); - } - - gap: $date-view-row-gap; - @if $variant == 'bootstrap' { %days-view-row { // This is the weekday labels row @@ -396,7 +380,11 @@ border-block-end: rem(1px) solid var-get($theme, 'border-color'); } } + } @else { + padding-inline: pad-inline(rem(12px)); } + + gap: $date-view-row-gap; } %picker__nav { @@ -415,11 +403,15 @@ outline: none; cursor: pointer; + [dir='rtl'] & { + transform: scaleX(-1); + } + @if $variant == 'indigo' { padding: pad(rem(5px)); } - @if $bootstrap-theme { + @if $variant == 'bootstrap' { top: math.div($cal-picker-padding, 2); } @@ -430,10 +422,6 @@ &:focus { color: var-get($theme, 'navigation-focus-color'); } - - [dir='rtl'] & { - transform: scaleX(-1); - } } %picker-date { @@ -467,6 +455,11 @@ border-start-end-radius: var-get($theme, 'week-number-border-radius'); } } + padding-inline: pad-inline(rem(12px)); + + &:last-of-type { + margin-block-end: 0; + } } &:last-of-type { @@ -478,22 +471,6 @@ display: none; } } - - @if $bootstrap-theme { - margin-block-end: 0; - } - } - - // TODO Hide the 7th row only if all its children have the hidden class. - // To implement this, we need to know if the calendar is in multi-view state. - //&:nth-child(7) { - // > %date:has(:not(%date-hidden)) { - // display: none; - // } - //} - - @if $bootstrap-theme { - padding-inline: pad-inline(rem(12px)); } } @@ -504,7 +481,7 @@ pointer-events: none; z-index: 1; - @if $bootstrap-theme { + @if $variant == 'bootstrap' { font-style: italic !important; } } @@ -533,19 +510,13 @@ width: $date-size; height: $date-height; position: relative; - - @if $bootstrap-theme { - color: var-get($theme, 'weekday-color'); - } @else { - color: var-get($theme, 'week-number-foreground'); - background: var-get($theme, 'week-number-background'); - } - border-top-left-radius: var-get($theme, 'week-number-border-radius'); border-top-right-radius: var-get($theme, 'week-number-border-radius'); border: rem(1px) solid transparent; - @if not $bootstrap-theme { + @if $variant == 'bootstrap' { + color: var-get($theme, 'weekday-color'); + } @else { &::before { content: ''; position: absolute; @@ -554,6 +525,9 @@ height: $date-view-row-gap; width: $date-size; } + + color: var-get($theme, 'week-number-foreground'); + background: var-get($theme, 'week-number-background'); } @if $variant == 'indigo' { @@ -710,6 +684,7 @@ } } + // DATE, LABEL and WEEK NUMBERS %date { position: relative; display: flex; @@ -721,28 +696,13 @@ width: 100%; border-block-start: rem(1px) solid transparent; border-block-end: rem(1px) solid transparent; + } - &%label-week-number, - &%date-week-number { - margin-inline-end: rem(4px); - justify-content: flex-start; - width: var-get($theme, 'size'); - } - - %date-inner-week-number { - border-radius: 0; - - @if $variant == 'indigo' { - border: 0; - - &::before { - height: $date-view-row-gap; - inset-block-start: 100%; - inset-inline-start: 0; - border: 0; - } - } - } + %label-week-number, + %date-week-number { + margin-inline-end: rem(4px); + justify-content: flex-start; + width: var-get($theme, 'size'); } %date-inner { @@ -756,51 +716,35 @@ border-radius: var-get($theme, 'date-border-radius'); border: $border-size solid var-get($theme, 'date-border-color'); z-index: 2; + } - &:hover { - color: var-get($theme, 'date-hover-foreground'); - background: var-get($theme, 'date-hover-background'); - border-color: var-get($theme, 'date-hover-border-color'); - cursor: pointer; - } + %date-inner-week-number { + min-width: auto; + width: $date-size; + color: var-get($theme, 'week-number-foreground'); + background: var-get($theme, 'week-number-background'); + border-color: transparent; + border-radius: 0; - &%date-inner-week-number { - min-width: auto; - width: $date-size; - color: var-get($theme, 'week-number-foreground'); + &::before { + content: ''; + position: absolute; background: var-get($theme, 'week-number-background'); - border-color: transparent; - - &::before { - content: ''; - position: absolute; - background: var-get($theme, 'week-number-background'); - @if $variant != 'indigo' { - inset-block-start: calc(100% + #{$border-size}); - } @else { - inset-block-start: 100%; - } - - height: $date-view-row-gap; - width: $date-size; + @if $variant != 'indigo' { + inset-block-start: calc(100% + #{$border-size}); + } @else { + inset-block-start: 100%; } - } - } - - %date-weekend { - %date-inner { - color: var-get($theme, 'weekend-color'); - &:hover { - color: var-get($theme, 'date-hover-foreground'); - } + height: $date-view-row-gap; + width: $date-size; } } // Has to be after the %date placeholder do to specificity %weekday-label { - @if not $bootstrap-theme { + @if $variant != 'bootstrap' { height: $date-height; } @@ -815,7 +759,7 @@ border-radius: 0; - @if $bootstrap-theme { + @if $variant == 'bootstrap' { cursor: default; // Important is needed in order to override the typography styles font-style: italic !important; @@ -826,2631 +770,884 @@ @include ellipsis(); } + + // DATE AND DATE STATES STYLES + // ---------------------------------------------------------------------------------------------- + %date-weekend { + color: var-get($theme, 'weekend-color'); + } + + %date-inactive { + color: var-get($theme, 'inactive-color'); + } + + %date-inner { + &:hover { + color: var-get($theme, 'date-hover-foreground'); + background: var-get($theme, 'date-hover-background'); + border-color: var-get($theme, 'date-hover-border-color'); + cursor: pointer; + } + } + + // ACTIVE + %date-focus { + color: var-get($theme, 'date-focus-foreground'); + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + } + + // SELECTED %date-current, %date-selected { - %date-inner { - &::after { - @if $variant != 'fluent' { - width: $date-inner-size; - height: $date-inner-size; - } + &::after { + @if $variant != 'fluent' { + width: $date-inner-size; + height: $date-inner-size; } } } - %date-selected-special { - %date-inner { - color: var-get($theme, 'date-selected-special-foreground'); + %date-selected { + 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-radius: var-get($theme, 'date-border-radius'); - } + &: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'); + } + } - @if $variant != 'fluent' { - background: var-get($theme, 'date-selected-special-background'); - } + %date-selected--focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + // CURRENT + %date-current { + color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + border-radius: inherit; - &::after { - width: $date-inner-size; - height: $date-inner-size; + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + 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-selected-special-background'); - } + %date-current-border-radius { + border-radius: var-get($theme, 'date-current-border-radius'); + } - border-color: var-get($theme, 'date-selected-special-border-color'); - } + %date-current--focus { + 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'); + } - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); + %date-current--selected { + 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'); - @if $variant != 'fluent' { - background: var-get($theme, 'date-selected-special-hover-background'); - } + &: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'); + } + } - &::after { - /* stylelint-disable-next-line max-nesting-depth */ - @if $variant == 'fluent' { - background: var-get($theme, 'date-selected-special-hover-background'); - } + %date-current--selected-first, + %date-current--selected-last { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); } } - %date-selected-special-active { - %date-inner { - color: var-get($theme, 'date-selected-special-focus-foreground'); + %date-current--selected-focus { + 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-special-focus-background'); - } + %date-current--selected-first-focus, + %date-current--selected-last-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } - &::after { - @if $variant == 'fluent' { - background: var-get($theme, 'date-selected-special-focus-background'); - } + %date-selected-current-range { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } } - %date-selected-range { - %date-inner { - &::after { - @if $variant != 'fluent' { - width: $date-size; - height: $date-size; - } @else { - width: $date-inner-size; - height: $date-inner-size; - } - } + %date-selected-current-focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + + %wrapper-date-current--selected-range { + &::before { + border-radius: var-get($theme, 'date-current-border-radius'); } } - %date-selected-special-range { - %date-inner { - @if $variant != 'fluent' { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); + // SPECIAL + %date-special { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-special-background'); - &::after { - border-color: var-get($theme, 'date-special-range-border-color'); - } - } + &::after { + content: ''; + position: absolute; + z-index: 0; + border: $border-size solid var-get($theme, 'date-special-border-color'); + border-radius: inherit; + width: var-get($theme, 'size'); + height: var-get($theme, 'size'); + box-sizing: border-box; + } - @if $variant == 'indigo' { - border-color: transparent; + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-special-hover-background'); + + &::after { + border-color: var-get($theme, 'date-special-hover-border-color') } + } + } - &:hover { - @if $variant != 'fluent' { - color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - } + %date-special-border-radius { + border-radius: var-get($theme, 'date-special-border-radius'); + } - @if $variant == 'indigo' { - border-color: transparent; - } + %date-special--focus { + color: var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-special-focus-background'); - &::after { - border-color: var-get($theme, 'date-special-range-hover-border-color'); - } - } + &::after { + border-color: var-get($theme, 'date-special-focus-border-color') } } - %date-selected-special-range-not-current { - %date-inner { - @if $variant == 'bootstrap' { - border-color: transparent; + %date-special--selected { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); - &:hover { - border-color: transparent - } + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + border-color: var-get($theme, 'date-selected-special-border-color'); + } + + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } } } - %date-selected-special-active-range-not-current { - %date-inner { - @if $variant == 'bootstrap' { - border-color: transparent - } + %date-special--selected-first, + %date-special--selected-last { + 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'); } } - %date-selected-special-current-first, - %date-selected-special-current-last, - %date-selected-special-current-first-last { - %date-inner { - &::after { - @if $variant != 'fluent' { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - } + %date-special--selected-focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); - @if $variant == 'indigo' { - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } - %date-selected-special-current-first-last, - %date-selected-special-current-active-first-last, - %date-selected-special-current-first-range-preview, - %date-selected-special-current-last-range-preview { - %date-inner { - @if $variant == 'material' { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme,'date-selected-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); + %date-special--selected-first-focus, + %date-special--selected-last-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + &::after { + border-color: var-get($theme, 'date-selected-special-focus-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-current-hover-border-color'); + %date-special-range { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } - - @if $variant == 'indigo' { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } - } - } - - %date-selected-special-current-active-first-last, - %date-selected-special-current-active-first-range-preview, - %date-selected-special-current-active-last-range-preview { - %date-inner { - @if $variant == 'material' { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme,'date-selected-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); - - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } - - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); - - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } - } - } - - %date-selected-special-range-active { - %date-inner { - @if $variant != 'fluent' { - color: var-get($theme, 'date-special-range-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); - } - - @if $variant == 'indigo' { - border-color: transparent; - } - - &::after { - border-color: var-get($theme, 'date-special-range-focus-border-color'); - } - } - } - - %date-current { - %date-inner { - color: var-get($theme, 'date-current-foreground'); - - - @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'); - - @if $variant != 'fluent' { - border-color: var-get($theme, 'date-current-hover-border-color'); - background: var-get($theme, 'date-current-hover-background'); - } - } - - @if $variant == 'fluent' { - &::before { - content: ''; - position: absolute; - z-index: -1; - width: $date-inner-size; - height: $date-inner-size; - border-radius: var-get($theme, 'date-current-border-radius'); - 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' { - &::after { - width: $date-size; - height: $date-size; - } - } - } - } - - %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-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-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'); - } - } - - %date-current-active { - %date-inner { - color: var-get($theme, 'date-current-focus-foreground'); - - @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'); - } - } - } - } - - %date-active { - %date-inner { - color: var-get($theme, 'date-focus-foreground'); - background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); - } - } - - %date-special { - %date-inner { - color: var-get($theme, 'date-special-foreground'); - - @if $variant == 'indigo' { - font-weight: 700; - - border-color: var-get($theme, 'date-special-border-color'); - } - - @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 { - content: ''; - position: absolute; - - border: $border-size solid if($variant == 'indigo', transparent, 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 == 'material' { - border-radius: var-get($theme, 'date-special-border-radius'); - } - - @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'); - - @if $variant != 'fluent' { - background: var-get($theme, 'date-special-hover-background'); - } - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-special-hover-border-color'); - } - - &::after { - border-color: if($variant == 'indigo', transparent, 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-range { - %date-inner { - color: var-get($theme, 'date-special-range-foreground'); - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-special-range-border-color'); - } - - @if $variant != 'fluent' { - background: var-get($theme, 'date-special-range-background'); - } - - &::after { - border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-range-border-color')); - - @if $variant == 'fluent' { - background: var-get($theme, 'date-special-range-background'); - } - } - - &:hover { - color: var-get($theme, 'date-special-range-hover-foreground'); - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-special-range-hover-border-color'); - } - - @if $variant != 'fluent' { - background: var-get($theme, 'date-special-range-hover-background'); - } - - &::after { - border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-range-hover-border-color')); - - /* stylelint-disable-next-line max-nesting-depth */ - @if $variant == 'fluent' { - background: var-get($theme, 'date-special-range-hover-background'); - } - } - } - } - } - - %date-special-active { - %date-inner { - color: var-get($theme, 'date-special-focus-foreground'); - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-special-focus-border-color'); - } - - @if $variant != 'fluent' { - background: var-get($theme, 'date-special-focus-background'); - } - - &::after { - border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-focus-border-color')); - - @if $variant == 'fluent' { - background: var-get($theme, 'date-special-focus-background'); - } - } - } - } - - %date-special-range-active { - %date-inner { - color: var-get($theme, 'date-special-range-focus-foreground'); - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-special-range-focus-border-color'); - } - - @if $variant != 'fluent' { - background: var-get($theme, 'date-special-range-focus-background'); - } - - &::after { - border-color: if($variant == 'indigo', transparent, var-get($theme, 'date-special-range-focus-border-color')); - - @if $variant == 'fluent' { - background: var-get($theme, 'date-special-range-focus-background'); - } - } - } - } - - @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' { - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($theme, date-special-border-color); - } - - &:hover { - &::after { - border-color: var-get($theme, date-special-hover-border-color); - } - } - } - - @if $variant == 'indigo' or $variant == 'bootstrap' { - 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'); - } - } - - @if $variant == 'bootstrap' { - color: var-get($theme, 'date-current-foreground'); - - &:hover { - color: var-get($theme, 'date-current-hover-foreground'); - } - } - - @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)); - } - - &:hover { - color: var-get($theme, 'date-current-hover-foreground'); - - &::after { - background: var-get($theme, 'date-current-hover-background'); - border-color: var-get($theme, 'date-current-hover-foreground'); - } - } - } - } - } - - %date-special-current-active { - %date-inner { - @if $variant == 'indigo' { - 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'); - - &::after { - border-color: var-get($theme, date-special-focus-border-color); - } - } - - @if $variant == 'bootstrap' { - 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' { - color: var-get($theme, 'date-current-focus-foreground'); - - &::after { - background: var-get($theme, 'date-current-focus-background'); - border-color: var-get($theme, 'date-current-focus-foreground'); - } - } - } - } - - %date-special-current-selected { - %date-inner { - @if $variant == 'indigo' { - color: var-get($theme, date-selected-special-foreground); - background: var-get($theme, date-selected-current-background); - border-color: var-get($theme, date-selected-current-border-color); - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - - &:hover { - color: var-get($theme, date-selected-special-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' { - %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 { - @if $variant == 'indigo' { - color: var-get($theme, date-selected-special-focus-foreground); - background: var-get($theme, date-selected-current-focus-background); - border-color: var-get($theme, date-selected-current-focus-border-color); - } - - &::after { - @if $variant != 'fluent' { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - } - } - } - - %date-special-current-selected-active-not-first-last { - %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'); - } - } - } - } - - %date-selected { - %date-inner { - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-background'); - - @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'); - - &:hover { - color: var-get($theme, 'date-selected-current-hover-foreground'); - } - - @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'); - } - } - } - } - } - - %date-selected-current-active { - %date-inner { - color: var-get($theme, 'date-selected-current-focus-foreground'); - - @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'); - } - } - } - } - - @if $variant == 'indigo' { - %date-selected-current-special { - %date-inner { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } - } - - %date-selected-current-special-active { - %date-inner { - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } - } - } - - @if $variant == 'material' { - %date-selected-current-special { - %date-inner { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); - - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-special-hover-background'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } - } - - %date-selected-current-special-active { - %date-inner { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-special-focus-background'); - - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } - } - } - - %date-inactive { - cursor: default; - - %date-inner { - color: var-get($theme, 'inactive-color'); - - &:hover { - color: var-get($theme, 'date-hover-foreground'); - } - } - } - - @if $variant == 'fluent' { - %date-inactive-range-preview { - %date-inner { - &:hover { - color: var-get($theme, 'inactive-color'); - } - } - } - - %date-selected-current-range-preview { - %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'); - } - } - } - } - - %date-selected-current-range { - %date-inner { - color: var-get($theme, 'date-selected-current-range-foreground'); - - @if $variant != 'fluent' { - background: var-get($theme, 'date-selected-current-range-background'); - } - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-selected-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'); - - @if $variant == 'indigo' { - border-color: var-get($theme, 'date-selected-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'); - } - } - } - } - - %date-selected-current-range-active { - %date-inner { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - - @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 == 'bootstrap' { - %date-selected-current-range-not-first-last { - %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-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 { - 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-range-active-not-first-last { - %date-inner { - border-color: var-get($theme, 'date-selected-current-focus-border-color'); - } - } - } - - %date-selected-current-range-first, - %date-selected-current-range-last { - %date-inner { - @if $variant == 'indigo' { - 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'); - - &::after { - border-color: var-get($theme, 'date-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'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-current-hover-border-color'); - } - } - } - } - } - - %date-selected-current-range-first-active, - %date-selected-current-range-last-active { - %date-inner { - @if $variant == 'indigo' { - 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' { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - } - } - } - - %date-range-selected-special-current-active-first, - %date-range-selected-special-current-active-last { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - } - } - } - - %date-selected-current-range-special { - @if $variant == 'fluent' { - %date-inner { - &::after { - background: var-get($theme, 'date-selected-current-range-background'); - } - - &:hover { - /* stylelint-disable-next-line max-nesting-depth */ - &::after { - background: var-get($theme, 'date-selected-current-range-hover-background'); - } - } - } - } - } - - %date-selected-current-range-special-active { - @if $variant == 'fluent' { - %date-inner { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - - &::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 == 'indigo' { - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); - } - - @if $variant == 'material' { - background: var-get($theme, 'date-special-range-background'); - } - - @if $variant == 'fluent' or $variant == 'bootstrap' { - color: var-get($theme, 'date-selected-current-range-foreground'); - } - - &::after { - @if $variant != 'fluent' { - width: $date-inner-size; - height: $date-inner-size; - } @else { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); - } - - @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-selected-current-foreground'); - } - - @if $variant == 'material' { - border-color: var-get($theme, 'date-special-range-border-color'); - } - - @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-hover-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 == 'indigo' { - color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-range-hover-border-color'); - } - } - - @if $variant == 'material' { - color: var-get($theme, 'date-special-range-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - } - - @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-first-last { - %date-inner { - @if $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-selected-current-focus-border-color'); - - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } - } - - @if $variant == 'material' { - color: var-get($theme, 'date-special-range-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-special-range-focus-border-color'); - } - } - } - } - - %date-selected-current-range-special-first, - %date-selected-current-range-special-last { - %date-inner { - @if $variant != 'fluent' { - color: var-get($theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($theme, 'date-selected-foreground'); - } - } @else { - color: var-get($theme, 'date-selected-current-range-foreground'); - - &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); - } - } - - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-current-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } - - @if $variant == 'material' { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - color: var-get($theme, 'date-selected-hover-foreground'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } - } - } - - %date-selected-current-range-special-active-first, - %date-selected-current-range-special-active-last { - %date-inner { - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - } - - @if $variant == 'material' { - color: var-get($theme, 'date-selected-focus-foreground'); - - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } - } - } - - %date-range-selected-active { - %date-inner { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); - } - } - - %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 { - &::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 { - @if $variant != 'indigo' { - border-color: var-get($theme, 'date-selected-current-focus-foreground'); - } @else { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } - } - } - - %date-range-selected-active-first, - %date-range-selected-active-last { - %date-inner { - @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'); - } - } - } - - %date-range { - border-top-color: var-get($theme, 'date-range-border-color'); - border-bottom-color: var-get($theme, 'date-range-border-color'); - background: var-get($theme, 'date-selected-range-background'); - - %date-inner { - color: var-get($theme, 'date-selected-range-foreground'); - - @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 { - background: transparent; - 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'); - } - - %date-range-selected-first, - %date-range-selected-last { - z-index: 0; - - @if $variant == 'fluent' { - %date-inner { - background: transparent; - border-color: transparent; - - &:hover { - border-color: transparent; - } - } - } - - &::after { - position: absolute; - content: ''; - z-index: -1; - color: var-get($theme, 'date-selected-foreground'); - background: var-get($theme, 'date-selected-range-background'); - } - - &::before { - content: ''; - position: absolute; - height: $date-size; - width: $date-size; - } - } - - %date-range-first, - %date-range-last { - background: transparent; - border-block-color: transparent; - } - - %date-range-selected-first-disabled, - %date-range-selected-last-disabled { - %date-inner { - opacity: .38; - } - - &::before { - @if $variant == 'fluent' { - background: var-get($theme, 'date-selected-range-background'); - z-index: -1; - } @else { - background: var-get($theme, 'content-background'); - } - } - } - - %date-range-selected-special-first, - %date-range-selected-special-last { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'date-special-range-foreground'); - - &:hover { - color: var-get($theme, 'date-special-range-hover-foreground') - } - } - - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); - border-color: var-get($theme, 'date-selected-border-color'); - - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-special-hover-background'); - border-color: var-get($theme, 'date-selected-hover-border-color'); - } - } - - &::after { - width: $date-inner-size; - height: $date-inner-size; - - @if $variant != 'fluent' and $variant != 'material' { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - } - } - } - - - %date-range-selected-special-first-active, - %date-range-selected-special-last-active { - %date-inner { - @if $variant == 'indigo' or $variant == 'fluent' { - color: var-get($theme, 'date-selected-special-focus-foreground'); - } - - @if $variant == 'indigo' { - background: var-get($theme, 'date-selected-special-focus-background'); - border-color: var-get($theme, 'date-selected-focus-border-color'); - } - } - } - - - @if $variant == 'fluent' { - %date-first-preview-active { - %date-inner { - background: transparent; - border-inline-end-color: transparent; - } - } - - %date-last-preview-active { - %date-inner { - background: transparent; - border-inline-start-color: transparent; - } - } - - %date-first-last-selected { - %date-inner { - background: transparent; - } - } - } - - %date-range-selected-first, - %date-range-selected-last { - %date-inner { - @if $variant != 'fluent' { - 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' { - border-color: var-get($theme, 'date-selected-border-color'); - - &:hover { - border-color: var-get($theme, 'date-selected-hover-border-color'); - } - } - - @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-range-hover-foreground'); - background: var-get($theme, 'date-selected-range-hover-background'); - } - } - } - } - - @if $variant == 'fluent' { - %date-range-selected-current-first, - %date-range-selected-current-last { - %date-inner { - color: var-get($theme, 'date-selected-current-range-foreground'); - - &:hover { - color: var-get($theme, 'date-selected-current-range-hover-foreground'); - } - } - } - } - - @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'); - } - } + &::after { + border-color: var-get($theme, 'date-special-range-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'); + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); + + // stylelint-disable-next-line + &::after { + border-color: var-get($theme, 'date-special-range-hover-border-color'); } } } - %date-first { - &::after { - inset-inline-start: 50%; - } - } + %date-special-range-focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); - %date-last { + // stylelint-disable-next-line &::after { - inset-inline-end: 50%; + border-color: var-get($theme, 'date-special-range-focus-border-color'); } } - %date-first, - %date-last { - %date-inner { - border-radius: var-get($theme, 'date-range-border-radius'); + %date-special-range-not-preview { + color: var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-special-range-background'); + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-special-range-hover-background'); } } - %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 { - @if $variant == 'indigo' { - border-radius:calc(var-get($theme, 'date-special-border-radius') - $border-size) - } @else { - 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-special-range-not-preview-focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-special-range-focus-background'); } - %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'); - } - } + %wrapper-date-special--selected-range { + &::before { + border-radius: var-get($theme, 'date-special-border-radius'); } } - %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'); - } + %date-special--selected-range-all { + border-radius: var-get($theme, 'date-special-border-radius'); + } - @if $variant == 'bootstrap' { - border-radius: var-get($theme, 'date-range-border-radius'); - } + // SPECIAL + CURRENT + %material-date-special-current { + border-radius: var-get($theme, 'date-current-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'); - } - } + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + border-radius: var-get($theme, 'date-special-border-radius'); } } - %date-range-selected { - &::after { - border-block: $border-size solid var-get($theme, 'date-range-border-color'); - } + // RANGE + %date-range { + border-block-color: var-get($theme, 'date-range-border-color'); + background: var-get($theme, 'date-selected-range-background'); %date-inner { @if $variant == 'fluent' { - border-color: transparent; - background: transparent; - } - - &:hover { - background: var-get($theme, 'date-selected-range-hover-background'); - color: var-get($theme, 'date-selected-range-hover-foreground'); + height: 100%; + } @else { + height: $date-height; } } } - %date-range-selected-first, - %date-range-selected-last, - %date-first-preview, - %date-last-preview { + %date-first { &::after { - content: ''; - position: absolute; - height: $date-size; - width: 50%; - - @if $variant == 'indigo' { - border-width: calc(#{$border-size} / 2); - } @else { - border-width: $border-size; - } + inset-inline-start: 50%; } } - @if $variant == 'fluent' { - %date-range-selected-first, - %date-range-selected-last { - %date-inner { - border-radius: var-get($theme, 'date-range-border-radius'); - } - - &::after { - border-block-color: var-get($theme, 'date-range-border-color'); - } - - &::before { - content: ''; - position: absolute; - height: $date-size; - width: $date-size; - border: rem(1px) solid var-get($theme, 'date-range-border-color'); - z-index: 3; - pointer-events: none; - } - } - - %date-range-selected-first { - &::before { - border-inline-end-color: transparent; - border-start-start-radius: var-get($theme, 'date-range-border-radius'); - border-end-start-radius: var-get($theme, 'date-range-border-radius'); - } - } - - %date-range-selected-last { - &::before { - border-inline-start-color: transparent; - border-start-end-radius: var-get($theme, 'date-range-border-radius'); - border-end-end-radius: var-get($theme, 'date-range-border-radius'); - } - } - - - %date-first-preview { - %date-inner { - border-start-start-radius: var-get($theme, 'date-range-border-radius'); - border-end-start-radius: var-get($theme, 'date-range-border-radius'); - border-start-end-radius: 0; - border-end-end-radius: 0; - } - } - - %date-last-preview { - %date-inner { - border-start-end-radius: var-get($theme, 'date-range-border-radius'); - border-end-end-radius: var-get($theme, 'date-range-border-radius'); - border-start-start-radius: 0; - border-end-start-radius: 0; - } - } - - %date-first-last { - %date-inner { - border-radius: var-get($theme, 'date-range-border-radius'); - } + %date-last { + &::after { + inset-inline-end: 50%; } } - %date-range-preview { - position: relative; - border-block-color: var-get($theme, 'date-range-preview-border-color'); - - @if $variant == 'material' or $variant == 'indigo' { - border-block-style: dashed; + %date-first, + %date-last { + &::after { + width: 50%; + height: var-get($theme, 'size'); } + } - @if $variant == 'bootstrap' { - color: var-get($theme, 'date-selected-range-foreground'); - background: var-get($theme, 'date-selected-range-background'); + %date-range-border { + border-radius: var-get($theme, 'date-range-border-radius'); + } - &::after { - background: var-get($theme, 'date-selected-range-background'); - } - } + // You can have first and last without range that's why we need this selector + %date-range--first, + %date-range--last { + background: transparent; + border-block-color: transparent; - %date-inner { - @if $variant == 'fluent' or $variant == 'bootstrap' { + @if $variant == 'fluent' { + %date-inner { + background: transparent; border-color: transparent; - } - - &:hover { - @if $variant == 'fluent' { - color: var-get($theme, 'content-foreground'); - background: transparent; - border-color: transparent; - } - @if $bootstrap-theme { - color: var-get($theme, 'date-selected-range-foreground'); + &:hover { border-color: transparent; } } } - } - %date-range-preview-inactive { - %date-inner { - @if $variant == 'bootstrap' { - color: var-get($theme, 'date-selected-range-foreground'); - } - } - } + z-index: 0; - %date-range-preview-active { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'content-foreground'); - background: transparent; - } + &::after { + position: absolute; + content: ''; + z-index: -1; + background: var-get($theme, 'date-selected-range-background'); + border-block: rem(1px) solid var-get($theme, 'date-range-border-color'); } - } - - %date-range-preview-weekend { - %date-inner { - @if $variant == 'bootstrap' { - color: var-get($theme, 'date-selected-range-foreground'); - } - &:hover { - color: var-get($theme, 'weekend-color'); - } + &::before { + content: ''; + position: absolute; + height: $date-size; + width: $date-size; + background: var-get($theme, 'content-background'); } } - %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-wrapper-range-border { + &::before { + border-radius: var-get($theme, 'date-range-border-radius'); } } - %date-range-preview-weekend-active { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'weekend-color'); - background: transparent; - } + %date-range-middle { + color: var-get($theme, 'date-selected-range-foreground'); + background: transparent; + border-color: transparent; + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); } } - %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-foreground'); - - &::before { - background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-border-color'); - } - } - } - } + %date-range-middle--focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } - %date-range-preview-current-active { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'date-current-foreground'); + // PREVIEW + %date-range-preview { + position: relative; + border-block-color: var-get($theme, 'date-range-preview-border-color'); + border-block-style: dashed; - &::before { - background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-border-color'); - } - } - } - } + @if $variant == 'fluent' { + border-block-style: solid; - %date-range-preview-special { - %date-inner { - @if $variant != 'indigo' { - color: var-get($theme, 'date-special-foreground'); - } + %date-inner { + border-color: transparent; - @if $variant == 'material' { &:hover { - color: var-get($theme, 'date-special-hover-foreground'); + color: var-get($theme, 'content-foreground'); + background: transparent; + border-color: transparent; } } } } - //@if $variant == 'fluent' { - // %date-range-preview-special-current { - // %date-inner { - // color: var-get($theme, 'date-selected-current-range-foreground'); - // } - // } - //} + %date-preview--first, + %date-preview--last { + border-block-color: transparent; - %date-first-preview, - %date-last-preview { &::after { content: ''; position: absolute; + height: $date-size; + border-block-color: var-get($theme, 'date-range-preview-border-color'); + width: calc(50% + #{rem(1px)}); + border-width: rem(1px); + border-style: dashed; + border-inline-color: transparent; @if $variant == 'fluent' { width: calc(50% + #{rem(2px)}); + border-style: solid; + border-inline-color: transparent; } + } + } - @if $variant == 'material' or $variant == 'indigo' { - width: calc(50% + #{rem(1px)}); - } - - @if $variant == 'bootstrap' { - width: 50%; - } + // DISABLED + %date-disabled { + color: var-get($theme, 'date-disabled-foreground'); + } - @if not $bootstrap-theme { - border-inline-color: transparent; - } @else { - border-inline: 0; - } + %date-disabled-range { + color: var-get($theme, 'date-disabled-range-foreground'); + } - @if $variant == 'material' or $variant == 'indigo' { - border-style: dashed; - } @else { - border-style: solid; - } + // OTHER + %date-hidden { + cursor: default; + visibility: hidden; + } + %calendar__aria-off-screen { + position: absolute !important; + border: none !important; + height: 1px !important; + width: 1px !important; + inset-inline-start: 0 !important; + top: 0 !important; + overflow: hidden !important; + padding: 0 !important; + margin: 0 !important; + user-select: none; + pointer-events: none; - border-block-color: var-get($theme, 'date-range-preview-border-color'); + &:focus { + outline: none; } + } - %date-inner { - @if $variant != 'indigo' and $variant != 'material' { - border-color: var-get($theme, 'date-selected-focus-border-color'); - } - @if $variant == 'material' { - &::after { - border-color: transparent; - } - } - } + /////////////////////////////////// + ////////// BOOTSTRAP THEME /////// + ///////////////////////////////// - @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'); + // SPECIAL + %bootstrap-date-special { + border-radius: var-get($theme, 'date-border-radius'); - &: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'); - } - } + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); } } - %date-first-preview-selected, - %date-last-preview-selected { - %date-inner { - @if $variant == 'bootstrap' { - color: var-get($theme, 'date-selected-foreground'); - } - } + %bootstrap-date-special-first-last { + border-radius: var-get($theme, 'date-range-border-radius'); } - %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'); - border-color: var-get($theme, 'date-selected-focus-border-color'); - } + %bootstrap-date-special-range { + border-color: transparent; - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-focus-foreground'); - } + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); } } - @if $variant == 'bootstrap' { - %date-first-preview-current, - %date-last-preview-current { - %date-inner { - border-color: var-get($theme, 'date-selected-current-border-color'); + %bootstrap-date-special-range-focus { + border-color: var-get($theme, 'date-focus-border-color'); + } - &:hover { - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - } - } + // CURRENT + SPECIAL + %bootstrap-date-current-special { + color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + background: var-get($theme, 'date-current-hover-background'); + 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-selected-current-focus-border-color'); - } + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); } } - @if $variant == 'material' { - %date-first-preview-current, - %date-last-preview-current { - %date-inner { - border-color: var-get($theme, 'date-current-border-color'); + %bootstrap-date-current-special-focus { + 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'); + } - &:hover { - border-color: var-get($theme, 'date-current-hover-border-color'); - } - } - } + %bootstrap-date-current-special-range { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-current-border-color'); - %date-first-preview-current-active, - %date-last-preview-current-active { - %date-inner { - border-color: var-get($theme, 'date-current-focus-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); } } - %date-first-preview { - background: transparent; - border-block-color: transparent ; + %bootstrap-date-current-special-range-focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } - %date-inner { - @if $variant == 'fluent' { - background: transparent; - border-color: var-get($theme, 'date-range-preview-border-color'); - border-inline-end-color: transparent; - } - } + // PREVIEW + %bootstrap-date-range-preview { + color: var-get($theme, 'date-selected-range-foreground'); + background: var-get($theme, 'date-selected-range-background'); + border-block-style: solid; &::after { - inset-inline-start: 50%; + background: var-get($theme, 'date-selected-range-background'); } - } - %date-first-preview-special, - %date-last-preview-special { %date-inner { - &::after { - @if $variant == 'bootstrap' { - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); - } - } - - @if $variant == 'indigo' { - color: var-get($theme, 'date-special-foreground'); - background: var-get($theme, 'date-special-background'); - border-color: var-get($theme, 'date-special-border-color'); + border-color: transparent; - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-hover-background'); - border-color: var-get($theme, 'date-special-hover-border-color'); - } + &:hover { + color: var-get($theme, 'date-selected-range-foreground'); + border-color: transparent; } } } - %date-last-preview { + %bootstrap-date-preview--first-last { background: transparent; - border-block-color: transparent ; - - %date-inner { - @if $variant == 'fluent' { - background: transparent ; - border-color: var-get($theme, 'date-range-preview-border-color'); - border-inline-start-color: transparent; - } - } &::after { - inset-inline-end: 50%; + width: 50%; + border-style: solid; + border-inline: 0; } - } - %date-first-last { %date-inner { - @if $variant == 'fluent' { - background: transparent; + 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'); + } + + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); } } } - %date-first-preview-special-current, - %date-last-preview-special-current { + %bootstrap-date-preview--first-last-focus { %date-inner { - @if $variant == 'bootstrap' { - border-color: var-get($theme, 'date-selected-current-border-color'); - } + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } - //@if $variant == 'indigo' { - // color: var-get($theme, 'date-selected-special-foreground'); - // background: var-get($theme, 'date-current-background'); - // border-color: var-get($theme, 'date-current-border-color'); - //} + // range preview current + %bootstrap-date-range-preview-current { + color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); - &:hover { - @if $variant == 'bootstrap' { - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - } + &:hover { + color: var-get($theme, 'date-current-hover-foreground'); + background: var-get($theme, 'date-current-hover-background'); + } + } - @if $variant == 'material' { - color: var-get($theme, 'date-special-hover-foreground'); - } + %bootstrap-date-range-preview-current-focus { + color: var-get($theme, 'date-current-focus-foreground'); + background: var-get($theme, 'date-current-focus-background'); + } - //@if $variant == 'indigo' { - // color: var-get($theme, 'date-special-hover-foreground'); - // background: var-get($theme, 'date-current-hover-background'); - // border-color: var-get($theme, 'date-current-hover-border-color'); - //} + // range preview current + firs/last + %bootstrap-date-range-preview-current-first-last { + 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 { - /* stylelint-disable-next-line */ - @if $variant == 'material' { - width: $date-inner-size; - height: $date-inner-size; - } - } - } + &: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'); } } - //%date-first-preview-special-current-active, - //%date-last-preview-special-current-active { - // %date-inner { - // @if $variant == 'indigo' { - // 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'); - // } - // } - //} + %bootstrap-date-range-preview-current-focus-first-last { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } - %date-first-preview-special-active, - %date-last-preview-special-active { - %date-inner { - @if $variant == 'indigo' or $variant == 'material' { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-focus-background'); - border-color: var-get($theme, 'date-special-focus-border-color'); - } + // range preview special + firs/last + %bootstrap-date-preview-special--first-last { + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + border-color: var-get($theme, 'date-selected-special-border-color'); + } + &:hover { &::after { - @if $variant == 'material' { - width: $date-inner-size; - height: $date-inner-size; - } + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } } } - %date-first-preview-special-selected, - %date-last-preview-special-selected { - %date-inner { - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-special-background'); - border-color: var-get($theme, 'date-selected-border-color'); - - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } - - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-special-hover-background'); - border-color: var-get($theme, 'date-selected-hover-border-color'); - - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } - } + %bootstrap-date-preview-special-focus--first-last { + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } - %date-first-preview-special-active-selected, - %date-last-preview-special-active-selected { - %date-inner { - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-special-focus-background'); - border-color: var-get($theme, 'date-selected-focus-border-color'); + %bootstrap-date-preview-weekend-inactive { + color: var-get($theme, 'date-selected-range-foreground'); - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); } } - %date-first-preview-special-active-current, - %date-last-preview-special-active-current { - %date-inner { - &::after { - @if $variant == 'material' { - width: $date-inner-size; - height: $date-inner-size; - } - } - } + %bootstrap-date-preview-weekend-inactive-focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); } - %date-first-preview-special-current-selected, - %date-last-preview-special-current-selected { - %date-inner { - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-foreground'); - background: var-get($theme, 'date-selected-current-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); + // RANGE + %bootstrap-date-range-radius { + border-radius: var-get($theme, 'date-range-border-radius'); + } - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + // DISABLED + %bootstrap-date-disabled-range-preview { + color: var-get($theme, 'date-disabled-range-foreground'); + } - &:hover { - color: var-get($theme, 'date-selected-special-hover-foreground'); - background: var-get($theme, 'date-selected-current-hover-background'); - border-color: var-get($theme, 'date-selected-current-hover-border-color'); - &::after { - border-color: var-get($theme, 'date-selected-special-hover-border-color'); - } - } + ////////////////////////////////////// + //////////// INDIGO THEME /////////// + //////////////////////////////////// + %indigo-label-week-number { + span { + border: 0; + + &::before { + height: $date-view-row-gap; + inset-block-start: 100%; + inset-inline-start: 0; + border: 0; } } } - %date-first-preview-special-current-selected-active, - %date-last-preview-special-current-selected-active { - %date-inner { - @if $variant == 'indigo' { - color: var-get($theme, 'date-selected-special-focus-foreground'); - background: var-get($theme, 'date-selected-current-focus-background'); - border-color: var-get($theme, 'date-selected-current-focus-border-color'); + %indigo-date-inner-week-number { + border: 0; - &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); - } - } + &::before { + height: $date-view-row-gap; + inset-block-start: 100%; + inset-inline-start: 0; + border: 0; } } - %date-disabled { - pointer-events: none; - cursor: not-allowed; + %indigo-date-special-selected-inner-radius { + border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); } - %only-date-disabled { - %date-inner { - color: var-get($theme, 'date-disabled-foreground'); + %indigo-date-special-current-indented { + &::after { + width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); } } - %date-disabled-range { - %date-inner { - color: var-get($theme, 'date-disabled-range-foreground'); + // CURRENT + SELECTED + FIRST/LAST + %indigo-current-selected-first-last, + %indigo-current-selected-range-first-last { + 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'); } } - %date-disabled-range-preview { - %date-inner { - @if $bootstrap-theme { - color: var-get($theme, 'date-disabled-range-foreground'); - } - } + %indigo-current-selected-first-last-focus, + %indigo-current-selected-range-first-last-focus { + 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'); } - %date-disabled-selected:not(%date-range) { - %date-inner { - color: var-get($theme, 'date-selected-foreground'); - opacity: .38; + // SPECIAL + SELECTED + FIRST/LAST + %indigo-special-selected-first-last { + color:var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); + + &:hover { + color:var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-special-hover-background'); } } + %indigo-special-selected-first-last-focus { + color:var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-special-focus-background'); + } - %date-disabled-inactive { - %date-inner { - opacity: 1; + // SPECIAL + CURRENT + %indigo-special-current { + border-radius: var-get($theme, 'date-current-border-radius'); + + &::after { + width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-size); } } - %date-disabled-current { - %date-inner { - color: var-get($theme, 'date-current-foreground'); - opacity: .38; - } + %indigo-date-special-current-focus { + color:var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } - %date-disabled-special { - %date-inner { - opacity: .38; + %indigo-special-current-range { + color:var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); - @if $variant == 'fluent' { - border-color: transparent; - } + &:hover { + color:var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } } - %date-disabled-special-selected { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'date-selected-foreground'); - } - } + %indigo-special-current-range-focus { + color:var-get($theme, 'date-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } - %date-disabled-current-special { - @if $variant == 'indigo' or $variant == 'material' { - %date-inner { - color: var-get($theme, 'date-special-foreground'); - } + %indigo-special-current-range-not-first-last { + color:var-get($theme, 'date-special-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + color:var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } } - %date-disabled-current-special-selected { - @if $variant == 'indigo' { - %date-inner { - color: var-get($theme, 'date-selected-foreground'); - } - } + %indigo-special-current-range-not-first-last-focus { + color:var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } - %date-disabled-current-selected { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'date-current-foreground'); - } + %indigo-special-current-range-first-last, + %indigo-special-current-range-first-last { + color:var-get($theme, 'date-selected-special-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-special-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); } } - %date-hidden { - cursor: default; - visibility: hidden; + %indigo-special-current-range-first-last-focus, + %indigo-special-current-range-first-last-focus { + color:var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); } - %calendar__aria-off-screen { - position: absolute !important; - border: none !important; - height: 1px !important; - width: 1px !important; - inset-inline-start: 0 !important; - top: 0 !important; - overflow: hidden !important; - padding: 0 !important; - margin: 0 !important; - user-select: none; - pointer-events: none; + %indigo-date-special-current-selected { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); - &:focus { - outline: none; + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); } - } - %date-disabled-current-range { - %date-inner { - @if $variant == 'material' { - color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); + &:hover { + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); } + } + } - @if $variant == 'fluent' { - color: var-get($theme, 'date-selected-current-range-foreground'); - border-color: transparent; - background: transparent; + %indigo-date-special-current-selected-focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); - &::before { - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); - } - } + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); } } - %date-disabled-current-special-range { - %date-inner { - @if $variant == 'fluent' { - color: var-get($theme, 'date-selected-current-range-foreground'); - border-color: transparent; - background: transparent; + %indigo-date-special-current-not-selected { + color: var-get($theme, 'date-special-foreground'); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); - &::before { - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-selected-current-border-color'); - } + &::after { + border-color: var-get($theme, 'date-special-border-color'); + } - &::after { - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-special-range-border-color'); - } + &:hover { + color: var-get($theme, 'date-special-hover-foreground'); + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + + &::after { + border-color: var-get($theme, 'date-special-hover-border-color'); } } } + + %indigo-date-special-current-focus-not-selected { + 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'); + + &::after { + border-color: var-get($theme, 'date-special-focus-border-color'); + } + } } /// Adds typography styles for the igx-calendar component. @@ -3482,7 +1679,8 @@ %header-date { @include type-style($header-date) { margin: 0; - }; + } + ; } %views-navigation, From 195474b3bbc7398ee8d68cf3c8cffae784abaea9 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Nov 2025 01:13:14 +0200 Subject: [PATCH 12/16] fix(calendar): add comprehensive Fluent theme styles for date states - Implement new styles for current, special, selected, and range states. - Add support for hover, focus, and preview across combinations of states. - Update border radius and alignment --- .../calendar/_calendar-component.scss | 429 ++++++++- .../components/calendar/_calendar-theme.scss | 907 ++++++++++++++++-- 2 files changed, 1240 insertions(+), 96 deletions(-) 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 25d5f314d32..1efc74d8642 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 @@ -471,9 +471,377 @@ } } + @include e(date, 'range-preview', $not: ('special', 'current', 'first', 'last')) { + %date-inner { + @extend %date-disabled-range-preview !optional; + } + } + + // FLUENT THEME + @include m(fluent) { + // CURRENT + @include e(date, 'current') { + %date-inner { + @extend %fluent-date-current !optional; + } + } + + @include e(date, $mods: ('current', 'active')) { + %date-inner { + @extend %fluent-date-current-focus !optional; + } + } + + // CURRENT + SELECTED + @include e(date, $mods: ('current', 'selected')) { + %date-inner { + @extend %fluent-date-current-selected !optional; + } + } + + @include e(date, $mods: ('current', 'selected', 'active')) { + %date-inner { + @extend %fluent-date-current-selected-focus !optional; + } + } + + // SPECIAL + @include e(date, 'special') { + %date-inner { + @extend %fluent-date-special !optional; + } + } + + @include e(date, $mods: ('special', 'active')) { + %date-inner { + @extend %fluent-date-special-focus !optional; + } + } + + // SPECIAL + SELECTED + @include e(date, $mods: ('special', 'selected')) { + %date-inner { + @extend %fluent-date-special-selected !optional; + } + } + + @include e(date, $mods: ('special', 'selected', 'active')) { + %date-inner { + @extend %fluent-date-special-selected-focus !optional; + } + } + + + // CURRENT + SPECIAL + @include e(date, $mods: ('current', 'special')) { + %date-inner { + @extend %fluent-date-current-special !optional; + } + } + @include e(date, $mods: ('current', 'special', 'active')) { + %date-inner { + @extend %fluent-date-current-special-focus !optional; + } + } + + // CURRENT + SPECIAL + SELECTED + @include e(date, $mods: ('current', 'special', 'selected')) { + %date-inner { + @extend %fluent-date-current-special-selected !optional; + } + } + @include e(date, $mods: ('current', 'special', 'selected', 'active')) { + %date-inner { + @extend %fluent-date-current-special-selected-focus !optional; + } + } + + @include e(date, $mods: ('current', 'special', 'selected', 'range-preview', 'first')) { + %date-inner { + @extend %fluent-date-current-special-selected-range-preview-first-last !optional; + } + } + + @include e(date, $mods: ('current', 'special', 'selected', 'range-preview', 'last')) { + %date-inner { + @extend %fluent-date-current-special-selected-range-preview-first-last !optional; + } + } + + // FIRST + LAST + @include e(date, $mods: ('first', 'last'), $not: ('current', 'special')) { + %date-inner { + @extend %fluent-date-first-last !optional; + } + } + + @include e(date, $mods: ('first', 'last', 'active'), $not: ('current', 'special')) { + %date-inner { + @extend %fluent-date-first-last-focus !optional; + } + } + + // RANGE + @include e(date, range) { + @extend %fluent-date-range !optional; + @extend %fluent-date-range-plus !optional; + + } + + @include e(date, $mods: ('range', 'first')) { + @extend %fluent-date-range-first !optional; + } + + @include e(date, $mods: ('range', 'last')) { + @extend %fluent-date-range-last !optional; + } + + // PREVIEW + @include e(date, 'range-preview') { + @extend %fluent-date-range-preview-last-after !optional; + + %date-inner { + @extend %fluent-date-range-preview !optional; + } + } + + @include e(date, 'range-preview', $not: ('disabled', 'inactive', 'weekend')) { + %date-inner { + @extend %fluent-date-range-preview-not-disabled !optional; + } + } + + @include e(date, $mods: ('range-preview', 'inactive'), $not: ('disabled')) { + %date-inner { + @extend %fluent-date-range-preview-inactive !optional; + } + } + + @include e(date, $mods: ('range-preview', 'weekend'), $not: ('current', 'special', 'inactive', 'disabled')) { + %date-inner { + @extend %fluent-date-range-preview-weekend !optional; + } + } + + @include e(date, 'range-preview', $not: ('first', 'last', 'current', 'special')) { + %date-inner { + @extend %fluent-date-range-preview-middle !optional; + } + } + + @include e(date, $mods: ('range-preview', 'first')) { + @extend %fluent-date-range-preview-first !optional; + } + + @include e(date, $mods: ('range-preview', 'last')) { + @extend %fluent-date-range-preview-last !optional; + } + + @include e(date, $mods: ('range-preview', 'first', 'selected')) { + %date-inner { + @extend %fluent-date-range-preview-first-last-selected !optional; + } + } + + @include e(date, $mods: ('range-preview', 'last', 'selected')) { + %date-inner { + @extend %fluent-date-range-preview-first-last-selected !optional; + } + } + + // RESET HOVER/FOCUS STYLES IN PREVIEW + @include e(date, $mods: ('range-preview', 'special')) { + %date-inner { + @extend %fluent-date-range-preview-special !optional; + } + } + + @include e(date, $mods: ('range-preview', 'special', 'active')) { + %date-inner { + @extend %fluent-date-range-preview-special-focus !optional; + } + } + + @include e(date, $mods: ('range-preview', 'current')) { + %date-inner { + @extend %fluent-date-range-preview-current !optional; + } + } + + @include e(date, $mods: ('range-preview', 'current', 'active')) { + %date-inner { + @extend %fluent-date-range-preview-current-focus !optional; + } + } + + @include e(date, $mods: ('range-preview', 'current', 'special')) { + %date-inner { + @extend %fluent-date-range-preview-current-special !optional; + } + } + + @include e(date, $mods: ('range-preview', 'current', 'special', 'active')) { + %date-inner { + @extend %fluent-date-range-preview-current-special-focus !optional; + } + } + + @include e(date, $mods: ('selected', 'first', 'last')) { + %date-inner { + @extend %fluent-selected-first-last !optional; + } + } + @include e(date, $mods: ('selected', 'first', 'last', 'special')) { + %date-inner { + @extend %fluent-selected-first-last-special !optional; + } + } + + @include e(date, $mods: ('selected', 'first', 'last', 'current')) { + %date-inner { + @extend %fluent-selected-first-last-current !optional; + } + } + + @include e(date, $mods: ('selected', 'first', 'last', 'current', 'special')) { + %date-inner { + @extend %fluent-selected-first-last-current-special !optional; + } + } + + @include e(date, $mods: ('selected', 'first', 'last', 'current', 'special', 'active')) { + %date-inner { + @extend %fluent-selected-first-last-current-special-focus !optional; + } + } + + @include e(date, $mods: ('range-preview', 'selected', 'special', 'first')) { + %date-inner { + @extend %fluent-date-range-preview-selected-special-first !optional; + } + } + + @include e(date, $mods: ('range-preview', 'selected', 'special', 'last')) { + %date-inner { + @extend %fluent-date-range-preview-selected-special-last !optional; + } + } + + @include e(date, $mods: ('range-preview', 'selected', 'current', 'first')) { + %date-inner { + @extend %fluent-date-range-preview-current-first-last !optional; + } + } + + @include e(date, $mods: ('range-preview', 'selected', 'current', 'last')) { + %date-inner { + @extend %fluent-date-range-preview-current-first-last !optional; + } + } + + // RANGE + SELECTED + @include e(date, $mods: ('range', 'selected')) { + @extend %fluent-date-range-selected !optional; + } + + @include e(date, $mods: ('range', 'selected', 'first')) { + @extend %fluent-date-range-selected-first-last !optional; + @extend %fluent-date-range-selected-first !optional; + } + + @include e(date, $mods: ('range', 'selected', 'last')) { + @extend %fluent-date-range-selected-first-last !optional; + @extend %fluent-date-range-selected-last !optional; + } + + @include e(date, $mods: ('range', 'selected'), $not: ('range-preview', 'special', 'current', 'disabled')) { + %date-inner { + @extend %fluent-date-range-selected-not-preview-disabled !optional; + } + } + + @include e(date, $mods: ('range', 'selected', 'active'), $not: ('range-preview', 'special', 'current', 'disabled')) { + %date-inner { + @extend %fluent-date-range-selected-not-preview-disabled-focus !optional; + } + } + + @include e(date, $mods: ('range', 'selected', 'inactive'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-selected-not-preview !optional; + } + } + + @include e(date, $mods: ('range', 'selected', 'special'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-selected-special-not-preview !optional; + } + } + + @include e(date, $mods: ('range', 'selected', 'current'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-selected-current-not-preview !optional; + } + } + + @include e(date, $mods: ('range', 'special'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-special-not-preview !optional; + } + } + + @include e(date, $mods: ('range', 'special', 'active'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-special-not-preview-focus !optional; + } + } + @include e(date, $mods: ('range', 'current'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-current-not-preview !optional; + } + } + + @include e(date, $mods: ('range', 'current', 'active'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-current-not-preview-focus !optional; + } + } + @include e(date, $mods: ('range', 'current', 'special'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-current-special-not-preview !optional; + } + } + + @include e(date, $mods: ('range', 'current', 'special', 'active'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-current-special-not-preview-focus !optional; + } + } + + // DISABLED + @include e(date, $mods: ('range', 'special', 'disabled'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-special-disabled !optional; + } + } + + @include e(date, $mods: ('range', 'current', 'disabled'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-special-disabled !optional; + } + } + + @include e(date, $mods: ('range', 'special', 'current', 'disabled'), $not: ('range-preview')) { + %date-inner { + @extend %fluent-date-range-special-current-disabled !optional; + } + } + } + + // BOOTSTRAP THEME @include m(bootstrap) { // SPECIAL @include e(date, 'special') { @@ -494,7 +862,6 @@ } } - @include e(date, $mods: ('special', 'range'), $not: ('range-preview', 'current', 'first', 'last')) { %date-inner { @extend %bootstrap-date-special-range !optional; @@ -507,6 +874,13 @@ } } + // CURRENT + @include e(date, $mods: ('current', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-first-last !optional; + } + } + // CURRENT + SPECIAL @include e(date, $mods: ('current', 'special'), $not: ('first', 'last')) { %date-inner { @@ -534,6 +908,18 @@ } } + @include e(date, $mods: ('current', 'special', 'selected'), $not: ('range', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-special-selected-not-range !optional; + } + } + + @include e(date, $mods: ('current', 'special', 'selected', 'active'), $not: ('range', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-current-special-selected-not-range-focus !optional; + } + } + // PREVIEW @include e(date, 'range-preview') { @extend %bootstrap-date-range-preview !optional; @@ -547,6 +933,12 @@ @extend %bootstrap-date-preview--first-last !optional; } + @include e(date, $mods:('range-preview', 'first', 'last')) { + %date-inner { + @extend %bootstrap-date-preview--first-and-last !optional; + } + } + @include e(date, $mods:('range-preview', 'first', 'active')) { @extend %bootstrap-date-preview--first-last-focus !optional; } @@ -639,7 +1031,6 @@ } } - @include e(date, $mods: ('range-preview', 'weekend'), $not: ('special', 'current', 'first', 'last')) { %date-inner { @extend %bootstrap-date-preview-weekend-inactive !optional; @@ -666,7 +1057,6 @@ // RANGE - @include e(date, $mods: ('range', 'current', 'first')) { %date-inner { @extend %bootstrap-date-range-radius !optional; @@ -700,21 +1090,7 @@ } } - - - - - - - - - - - - - - - + // INDIGO THEME @include m(indigo) { @include e(label, 'week-number') { @extend %indigo-label-week-number !optional; @@ -923,23 +1299,6 @@ } } } - - - - - - - - - - - - - - - - - //@include m(fluent) {} } @include b(igx-calendar-view) { 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 51d45e3b99a..bcb8162b7c1 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 @@ -59,6 +59,9 @@ $cal-row-padding: pad(rem(8px)); $cal-row-margin: pad-block(rem(2px)) 0; + $fake-bg-size: calc(50% + (var-get($theme, 'size') / 2)); + $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2)); + %parent-container { color: var-get($theme, 'content-foreground'); background: var-get($theme, 'content-background'); @@ -1211,6 +1214,10 @@ color: var-get($theme, 'date-disabled-range-foreground'); } + %date-disabled-range-preview { + border-color: transparent; + } + // OTHER %date-hidden { cursor: default; @@ -1236,129 +1243,907 @@ } - /////////////////////////////////// - ////////// BOOTSTRAP THEME /////// - ///////////////////////////////// + /////////////////////////// + ////// FLUENT THEME ////// + ////////////////////////// + + // CURRENT + %fluent-date-current { + &::before { + content: ''; + position: absolute; + border: 1px solid var-get($theme, 'date-current-border-color'); + box-sizing: border-box; + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + background: var-get($theme, 'date-current-background'); + border-radius: var-get($theme, 'date-current-border-radius'); + z-index: -1; + } + + background: transparent; + border-color: var-get($theme, 'date-border-color'); + border-radius: var-get($theme, 'date-border-radius'); + + &:hover { + background: var-get($theme, 'date-hover-background'); + border-color: var-get($theme, 'date-hover-border-color'); + + &::before { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + } + + %fluent-date-current-focus { + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + + &::before { + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + } + + // CURRENT + SELECTED + %fluent-date-current-selected { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &::before { + border-color: var-get($theme, 'date-selected-current-border-color'); + background: var-get($theme, 'date-selected-current-background'); + } + + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + + &::before { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + background: var-get($theme, 'date-selected-current-hover-background'); + } + } + } + + %fluent-date-current-selected-focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + + &::before { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + background: var-get($theme, 'date-selected-current-focus-background'); + } + } // SPECIAL - %bootstrap-date-special { + %fluent-date-special { + background: transparent; + border-color: var-get($theme, 'date-border-color'); border-radius: var-get($theme, 'date-border-radius'); &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); border-radius: var-get($theme, 'date-special-border-radius'); + z-index: -1; + } + + &:hover { + background: var-get($theme, 'date-hover-background'); + border-color: var-get($theme, 'date-hover-border-color'); + + &::after { + background: var-get($theme, 'date-special-hover-background'); + border-color: var-get($theme, 'date-special-hover-border-color'); + } } } - %bootstrap-date-special-first-last { - border-radius: var-get($theme, 'date-range-border-radius'); + %fluent-date-special-focus { + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + + &::after { + background: var-get($theme, 'date-special-focus-background'); + border-color: var-get($theme, 'date-special-focus-border-color'); + } } - %bootstrap-date-special-range { - border-color: transparent; + // SPECIAL + SELECTED + %fluent-date-special-selected { + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-border-color'); + + &::after { + background: var-get($theme, 'date-selected-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + border-radius: var-get($theme, 'date-special-border-radius'); + } &:hover { - border-color: var-get($theme, 'date-hover-border-color'); + color: var-get($theme, 'date-selected-special-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-hover-border-color'); + + &::after { + background: var-get($theme, 'date-selected-special-hover-background'); + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } } } - %bootstrap-date-special-range-focus { - border-color: var-get($theme, 'date-focus-border-color'); + %fluent-date-special-selected-focus { + color: var-get($theme, 'date-selected-special-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + + &::after { + background: var-get($theme, 'date-selected-special-focus-background'); + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } } // CURRENT + SPECIAL - %bootstrap-date-current-special { + %fluent-date-current-special { color: var-get($theme, 'date-current-foreground'); - background: var-get($theme, 'date-current-background'); - border-color: var-get($theme, 'date-current-border-color'); + + &::after { + width: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + height: calc(var-get($theme, 'inner-size') - #{rem(4px)}); + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } &:hover { color: var-get($theme, 'date-current-hover-foreground'); - background: var-get($theme, 'date-current-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); + + &::after { + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-foreground'); + } + } + } + + %fluent-date-current-special-focus { + color: var-get($theme, 'date-current-focus-foreground'); + + &::after { + background: var-get($theme, 'date-current-focus-background'); + border-color: var-get($theme, 'date-current-focus-foreground'); } + } + + // CURRENT + SPECIAL + SELECTED + + %fluent-date-current-special-selected { + color: var-get($theme, 'date-selected-current-foreground'); &::after { - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); + background: var-get($theme, 'date-selected-current-background'); + border-color: var-get($theme, 'date-selected-current-foreground'); + } + + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + + &::after { + background: var-get($theme, 'date-selected-current-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + } } } - %bootstrap-date-current-special-focus { - 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'); + %fluent-date-current-special-selected-focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + + &::after { + background: var-get($theme, 'date-selected-current-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } } - %bootstrap-date-current-special-range { - color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); - border-color: var-get($theme, 'date-current-border-color'); + // CURRENT + SPECIAL + SELECTED + PREVIEW + FIRST/LAST + %fluent-date-current-special-selected-range-preview-first-last { + &:hover { + color: var-get($theme, 'date-current-foreground'); + + &::after { + border-color: var-get($theme, 'date-current-foreground'); + } + } + } + + // FIRST + LAST + %fluent-date-first-last { + color: inherit; + background: transparent; + border-color: var-get($theme, 'date-range-preview-border-color'); + border-radius: var-get($theme, 'date-range-border-radius'); &:hover { - color: var-get($theme, 'date-selected-current-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); - border-color: var-get($theme, 'date-current-hover-border-color'); + border-color: var-get($theme, 'date-range-preview-border-color'); } } - %bootstrap-date-current-special-range-focus { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); - border-color: var-get($theme, 'date-current-focus-border-color'); + %fluent-date-first-last-focus { + border-color: var-get($theme, 'date-range-preview-border-color'); } // PREVIEW - %bootstrap-date-range-preview { - color: var-get($theme, 'date-selected-range-foreground'); - background: var-get($theme, 'date-selected-range-background'); - border-block-style: solid; + %fluent-date-range-preview { + background: transparent; + border-color: transparent; + + &:hover { + background: transparent; + border-color: transparent; + } + } + + %fluent-date-range-preview-not-disabled { + color: inherit; + } + + %fluent-date-range-preview-inactive { + color: var-get($theme, 'inactive-color'); + + &:hover { + color: var-get($theme, 'inactive-color'); + } + } + + %fluent-date-range-preview-weekend { + color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'weekend-color'); + } + } + + %fluent-date-range-preview-middle { + border-color: transparent; + } + + %fluent-date-range-preview-first, + %fluent-date-range-preview-last { + color: inherit; + border-block-color: transparent; &::after { - background: var-get($theme, 'date-selected-range-background'); + background: transparent !important; + border-block-color: var-get($theme, 'date-range-preview-border-color'); } %date-inner { border-color: transparent; + border-radius: var-get($theme, 'date-range-border-radius'); + } + } - &:hover { - color: var-get($theme, 'date-selected-range-foreground'); - border-color: transparent; - } + %fluent-date-range-preview-last-after + %fluent-date-range-preview-last { + &::after { + inset-inline-end: $fake-bg-position; } } - %bootstrap-date-preview--first-last { - background: transparent; + %fluent-date-range-preview-selected-special-first { + border-color: transparent; + } + + %fluent-date-range-preview-selected-special-last { + border-color: transparent; + } + + %fluent-date-range-preview-current-first-last { + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } + } + // PREVIEW + SELECTED + %fluent-date-range-preview-first-last-selected { &::after { - width: 50%; - border-style: solid; - border-inline: 0; + border-block-color: var-get($theme, 'date-range-preview-border-color'); } + } - %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'); + // PREVIEW + SPECIAL, CURRENT - (START) + // This part revert the hover styles for special and current dates in preview mode + %fluent-date-range-preview-current-focus, + %fluent-date-range-preview-current-special-focus { + &::before { + background: var-get($theme, 'date-current-background'); + 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'); - border-color: var-get($theme, 'date-selected-hover-border-color'); - } + %fluent-date-range-preview-special, + %fluent-date-range-preview-special-focus { + 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'); + } + + &:hover { + background: transparent; + color: var-get($theme, 'date-special-foreground'); &::after { - width: var-get($theme, 'inner-size'); - height: var-get($theme, 'inner-size'); + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); } } } - %bootstrap-date-preview--first-last-focus { - %date-inner { - color: var-get($theme, 'date-selected-focus-foreground'); + %fluent-date-range-preview-current, + %fluent-date-range-preview-current-focus, + %fluent-date-range-preview-current-special, + %fluent-date-range-preview-current-special-focus { + color: var-get($theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::after { + border-color: var-get($theme, 'date-current-foreground'); + } + + &:hover { + color: var-get($theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($theme, 'date-current-foreground'); + } + } + } + + %fluent-date-range-preview-current-special { + &::after { + background: var-get($theme, 'date-current-background'); + } + + &:hover { + &::after { + background: var-get($theme, 'date-current-background'); + } + } + } + + %fluent-date-range-preview-current-special-focus { + &::after { + background: var-get($theme, 'date-current-background'); + } + } + + %fluent-selected-first-last { + background: transparent; + border-color: var-get($theme, 'date-range-preview-border-color'); + border-radius: var-get($theme, 'date-range-border-radius'); + } + + %fluent-selected-first-last-current, + %fluent-selected-first-last-current-special { + color: var-get($theme, 'date-current-foreground'); + + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($theme, 'date-current-foreground'); + } + + &:hover { + &::before { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($theme, 'date-current-foreground'); + } + } + } + + + %fluent-selected-first-last-current-special { + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } + + &:hover { + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } + } + } + + %fluent-selected-first-last-current-special-focus { + &::after { + background: var-get($theme, 'date-current-background'); + border-color: var-get($theme, 'date-current-foreground'); + } + } + + %fluent-selected-first-last-special { + color: var-get($theme, 'date-special-foreground'); + + &::before { + border-color: transparent; + } + + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + } + + &:hover { + &::after { + background: var-get($theme, 'date-special-background'); + border-color: var-get($theme, 'date-special-border-color'); + } + } + } + // PREVIEW + SPECIAL, CURRENT - (END) + + // RANGE + %fluent-date-range { + background: var-get($theme, 'date-selected-range-background'); + border-block-color: var-get($theme, 'date-range-border-color'); + } + + %fluent-date-range-first, + %fluent-date-range-last, + %fluent-date-range-preview-first, + %fluent-date-range-preview-last { + &::before, + &::after { + height: var-get($theme, 'size'); + } + + &::before { + content: ''; + position: absolute; + width: var-get($theme, 'size'); + z-index: 3; + pointer-events: none; + } + + &::after { + width: $fake-bg-size; + } + } + + %fluent-date-range-first, + %fluent-date-range-last { + &::after { + background: var-get($theme, 'date-selected-range-background'); + border-block: $border-size solid var-get($theme, 'date-range-border-color'); + } + } + + %fluent-date-range-preview-first, + %fluent-date-range-first { + &::after { + inset-inline-start: $fake-bg-position; + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); + border-inline-end: 0; + } + + &::before { + inset-inline-end: initial; + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + + %fluent-date-range-preview-first { + &::after { + border-color: var-get($theme, 'date-range-preview-border-color'); + } + } + + %fluent-date-range-first { + &::after { + border-inline-start: $border-size solid transparent; + border-color: var-get($theme, 'date-range-border-color'); + } + } + + %fluent-date-range-preview-last, + %fluent-date-range-last { + &::after { + inset-inline-end: $fake-bg-position; + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); + border-inline-start: 0; + } + + &::before { + inset-inline-start: initial; + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + } + + %fluent-date-range-preview-last { + &::after { + border-color: var-get($theme, 'date-range-preview-border-color'); + } + } + + %fluent-date-range-last { + &::after { + border-inline-end: $border-size solid transparent; + border-color: var-get($theme, 'date-range-border-color'); + } + } + + %fluent-date-range-selected-special-not-preview, + %fluent-date-range-selected-current-not-preview{ + border-color: transparent; + } + + %fluent-date-range-special-not-preview { + color: var-get($theme, 'date-special-range-foreground'); + background: transparent; + border-radius: var-get($theme, 'date-range-border-radius'); + + &::after { + background: var-get($theme, 'date-special-range-background'); + border-color: var-get($theme, 'date-special-range-border-color'); + } + + &:hover { + color: var-get($theme, 'date-special-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + + &::after { + background: var-get($theme, 'date-special-range-hover-background'); + border-color: var-get($theme, 'date-special-range-hover-border-color'); + } + } + } + + %fluent-date-range-special-not-preview-focus { + color: var-get($theme, 'date-special-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + + &::after { + background: var-get($theme, 'date-special-range-focus-background'); + border-color: var-get($theme, 'date-special-range-focus-border-color'); + } + } + + %fluent-date-range-current-not-preview { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: transparent; + border-radius: var-get($theme, 'date-range-border-radius'); + + &::before { + background: var-get($theme, 'date-selected-current-range-background'); + 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-range-hover-background'); + + &::before { + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + %fluent-date-range-current-not-preview-focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + + &::before { + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + // RANGE + SELECTED + %fluent-date-range-selected { + background: var-get($theme, 'date-selected-range-background'); + } + + %fluent-date-range-selected-first-last { + background: transparent; + border-color: transparent; + + &::before { + background: transparent; + } + + &::after { + background: var-get($theme, 'date-selected-range-background'); + } + } + + %fluent-date-range-selected-first { + &::before { + border-inline-start: $border-size solid var-get($theme, 'date-range-border-color'); + border-inline-end: 0; + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + + %fluent-date-range-selected-last { + &::before { + border-inline-end: $border-size solid var-get($theme, 'date-range-border-color'); + border-inline-start: 0; + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + } + + %fluent-date-range-selected-not-preview { + color: var-get($theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + + &:focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } + + &::before { + background: var-get($theme, 'date-selected-range-background'); + } + } + + %fluent-date-range-selected-not-preview-disabled { + color: var-get($theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($theme, 'date-selected-range-hover-foreground'); + background: var-get($theme, 'date-selected-range-hover-background'); + } + } + + %fluent-date-range-selected-not-preview-disabled-focus { + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); + } + + %fluent-date-range-current-special-not-preview { + color: var-get($theme, 'date-selected-current-range-foreground'); + + &::before { + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + } + + &::after { + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-foreground'); + } + + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + + &::before { + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + + &::after { + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-foreground'); + } + } + } + + %fluent-date-range-current-special-not-preview-focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + + &::before { + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + + &::after { + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-foreground'); + } + } + + // DISABLED + %fluent-date-range-special-disabled, + %fluent-date-range-current-disabled { + border-color: transparent; + } + + %fluent-date-range-special-current-disabled { + &::after { + border-color: var-get($theme, 'date-current-foreground'); + } + } + + /////////////////////////////////// + ////////// BOOTSTRAP THEME /////// + ///////////////////////////////// + + // SPECIAL + %bootstrap-date-special { + border-radius: var-get($theme, 'date-border-radius'); + + &::after { + border-radius: var-get($theme, 'date-special-border-radius'); + } + } + + %bootstrap-date-special-first-last { + border-radius: var-get($theme, 'date-range-border-radius'); + } + + %bootstrap-date-special-range { + border-color: transparent; + + &:hover { + border-color: var-get($theme, 'date-hover-border-color'); + } + } + + %bootstrap-date-special-range-focus { + border-color: var-get($theme, 'date-focus-border-color'); + } + + // CURRENT + %bootstrap-date-current-first-last { + border-radius: var-get($theme, 'date-range-border-radius'); + } + + // CURRENT + SPECIAL + %bootstrap-date-current-special { + color: var-get($theme, 'date-current-foreground'); + 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'); + background: var-get($theme, 'date-current-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + } + } + + %bootstrap-date-current-special-focus { + 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'); + } + + %bootstrap-date-current-special-range { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-current-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-current-hover-border-color'); + } + } + + %bootstrap-date-current-special-range-focus { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-current-focus-border-color'); + } + + %bootstrap-date-current-special-selected-not-range { + color: var-get($theme, 'date-selected-current-foreground'); + background: var-get($theme, 'date-selected-current-background'); + + &:hover { + color: var-get($theme, 'date-selected-current-hover-foreground'); + background: var-get($theme, 'date-selected-current-hover-background'); + } + } + + %bootstrap-date-current-special-selected-not-range-focus { + color: var-get($theme, 'date-selected-current-focus-foreground'); + background: var-get($theme, 'date-selected-current-focus-background'); + } + + // PREVIEW + %bootstrap-date-range-preview { + color: var-get($theme, 'date-selected-range-foreground'); + background: var-get($theme, 'date-selected-range-background'); + border-block-style: solid; + + &::after { + background: var-get($theme, 'date-selected-range-background'); + } + + %date-inner { + border-color: transparent; + + &:hover { + color: var-get($theme, 'date-selected-range-foreground'); + border-color: transparent; + } + } + } + + %bootstrap-date-preview--first-last { + background: transparent; + + &::after { + width: 50%; + border-style: solid; + border-inline: 0; + } + + %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'); + border-radius: var-get($theme, 'date-range-border-radius'); + + &: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'); + } + + &::after { + width: var-get($theme, 'inner-size'); + height: var-get($theme, 'inner-size'); + } + } + } + + %bootstrap-date-preview--first-last-focus { + %date-inner { + color: var-get($theme, 'date-selected-focus-foreground'); background: var-get($theme, 'date-selected-focus-background'); border-color: var-get($theme, 'date-selected-focus-border-color'); + border-radius: var-get($theme, 'date-range-border-radius'); } } From f0932b9914e09cc66006bd67730b145629266f51 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Nov 2025 01:18:08 +0200 Subject: [PATCH 13/16] refactor(calendar): add theme support for `IgxDaysViewComponent` - Implement dynamic theme bindings and theme-specific classes for Material, Fluent, Bootstrap, and Indigo variants. - Introduce `theme` input property and handle theme overrides via DOM or token. - Update `AfterContentChecked` to adapt theme changes dynamically. --- .../calendar/days-view/days-view.component.ts | 72 ++++++++++++++++++- 1 file changed, 69 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index 689a0076345..a87378fb08e 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts @@ -12,7 +12,7 @@ import { booleanAttribute, ElementRef, ChangeDetectorRef, - ChangeDetectionStrategy, + ChangeDetectionStrategy, inject, DestroyRef, AfterContentChecked, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { TitleCasePipe } from '@angular/common'; @@ -20,7 +20,7 @@ import { CalendarSelection, ScrollDirection } from '../../calendar/calendar'; import { IgxDayItemComponent } from './day-item.component'; import { DateRangeType } from '../../core/dates'; import { IgxCalendarBaseDirective } from '../calendar-base'; -import { PlatformUtil, intoChunks } from '../../core/utils'; +import {PlatformUtil, intoChunks, getComponentTheme} from '../../core/utils'; import { IViewChangingEventArgs } from './days-view.interface'; import { areSameMonth, @@ -31,6 +31,7 @@ import { isDateInRanges, } from "../common/helpers"; import { CalendarDay } from '../common/model'; +import {IgxTheme, THEME_TOKEN, ThemeToken} from "igniteui-angular/src/lib/services/theme/theme.token"; let NEXT_ID = 0; @@ -47,7 +48,7 @@ let NEXT_ID = 0; changeDetection: ChangeDetectionStrategy.OnPush, imports: [IgxDayItemComponent, TitleCasePipe] }) -export class IgxDaysViewComponent extends IgxCalendarBaseDirective { +export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked { #standalone = true; /** @@ -197,6 +198,42 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective { private _hideTrailingDays: boolean; private _showActiveDay: boolean; + private _destroyRef = inject(DestroyRef); + private _theme: IgxTheme; + + @HostBinding('class.igx-days-view') + public defaultClass = true; + + // Theme-specific classes + @HostBinding('class.igx-days-view--material') + public get isMaterial(): boolean { + return this._theme === 'material'; + } + + @HostBinding('class.igx-days-view--fluent') + public get isFluent(): boolean { + return this._theme === 'fluent'; + } + + @HostBinding('class.igx-days-view--bootstrap') + public get isBootstrap(): boolean { + return this._theme === 'bootstrap'; + } + + @HostBinding('class.igx-days-view--indigo') + public get isIndigo(): boolean { + return this._theme === 'indigo'; + } + + @Input() + public set theme(value: IgxTheme) { + this._theme = value; + } + + public get theme(): IgxTheme { + return this._theme; + } + /** * @hidden */ @@ -205,8 +242,37 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective { @Inject(LOCALE_ID) _localeId: string, protected el: ElementRef, public override cdr: ChangeDetectorRef, + @Inject(THEME_TOKEN) private themeToken: ThemeToken + ) { super(platform, _localeId, null, cdr); + + this._theme = this.themeToken.theme; + + const themeChange = this.themeToken.onChange((theme) => { + if (this._theme !== theme) { + this._theme = theme; + this.cdr.detectChanges(); + } + }); + + this._destroyRef.onDestroy(() => themeChange.unsubscribe()); + } + + private setComponentTheme() { + // allow DOM theme override (same pattern as input-group) + if (!this.themeToken.preferToken) { + const theme = getComponentTheme(this.el.nativeElement); + + if (theme && theme !== this._theme) { + this.theme = theme; + this.cdr.markForCheck(); + } + } + } + + public ngAfterContentChecked() { + this.setComponentTheme(); } /** From 7497afc96463bb996cd00f64cb91a155b7840b6c Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Nov 2025 09:52:21 +0200 Subject: [PATCH 14/16] fix(calendar): correct theme token import path in `days-view` component --- .../src/lib/calendar/days-view/days-view.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index a87378fb08e..8debdd8a895 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts @@ -31,7 +31,7 @@ import { isDateInRanges, } from "../common/helpers"; import { CalendarDay } from '../common/model'; -import {IgxTheme, THEME_TOKEN, ThemeToken} from "igniteui-angular/src/lib/services/theme/theme.token"; +import {IgxTheme, THEME_TOKEN, ThemeToken} from "../../services/theme/theme.token"; let NEXT_ID = 0; From 2c295dc0cff9dfb7c409ecc5e40c79e0ae256022 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Nov 2025 10:49:23 +0200 Subject: [PATCH 15/16] fix(calendar): Fluent theme styles for month/year --- .../components/calendar/_calendar-theme.scss | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) 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 bcb8162b7c1..cf67ef36662 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 @@ -602,6 +602,28 @@ border-color: var-get($theme, 'ym-selected-current-outline-focus-color'); } } + + @if $variant == 'fluent' { + box-shadow: 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-focus-color'); + } + + &:hover { + color: var-get($theme, 'ym-selected-current-hover-foreground'); + background: var-get($theme, 'ym-selected-current-hover-background'); + + // stylelint-disable-next-line + @if $variant != 'indigo' { + box-shadow: inset 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-focus-color'); + } @else { + &::after { + border-color: var-get($theme, 'ym-selected-current-outline-focus-color'); + } + } + + @if $variant == 'fluent' { + box-shadow: 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-focus-color'); + } + } } } @@ -670,6 +692,10 @@ } } + @if $variant == 'fluent' { + box-shadow: 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-color'); + } + &:hover { color: var-get($theme, 'ym-selected-current-hover-foreground'); background: var-get($theme, 'ym-selected-current-hover-background'); @@ -683,6 +709,11 @@ border-color: var-get($theme, 'ym-selected-current-outline-hover-color'); } } + + + @if $variant == 'fluent' { + box-shadow: 0 0 0 $border-size var-get($theme, 'ym-selected-current-outline-hover-color'); + } } } } @@ -1364,7 +1395,7 @@ &::after { background: var-get($theme, 'date-selected-special-background'); - border-color: var-get($theme, 'date-special-border-color'); + border-color: var-get($theme, 'date-selected-special-border-color'); border-radius: var-get($theme, 'date-special-border-radius'); } From e43c862ded41d99fecd64893cb8a8482583f5c25 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Nov 2025 10:53:07 +0200 Subject: [PATCH 16/16] fix(calendar): Fluent theme styles for month/year --- angular.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/angular.json b/angular.json index d736425e5b0..ac823072f0d 100644 --- a/angular.json +++ b/angular.json @@ -307,8 +307,8 @@ { "type": "bundle", "name": "styles", - "maximumWarning": "500kb", - "maximumError": "550kb" + "maximumWarning": "600kb", + "maximumError": "600kb" }, { "type": "anyComponentStyle",