From 9ea525c76e6c020213b7a88ab133621bccaa6fcb Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 27 Oct 2025 09:46:58 +0200 Subject: [PATCH 1/7] 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 2/7] 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 3/7] 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 4/7] 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 5/7] 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 6/7] 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 7/7] 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;