From b95655aaa6cfef34f561be01ab07811f2f6f425e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Apr 2025 01:03:20 +0300 Subject: [PATCH 1/2] fix(calendar): fix range radius and some color --- .../calendar/_calendar-component.scss | 12 +++ .../components/calendar/_calendar-theme.scss | 97 +++++++++++++++++-- 2 files changed, 100 insertions(+), 9 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 e7590e2526b..5e987b6d480 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 @@ -389,6 +389,18 @@ @extend %date-last-preview-special !optional; } + @include e(date, $mods: ('first', 'range-preview', 'active')) { + @extend %date-first-preview-active !optional; + } + + @include e(date, $mods: ('last', 'range-preview', 'active')) { + @extend %date-last-preview-active !optional; + } + + @include e(date, $mods: ('first', 'last', 'selected')) { + @extend %date-first-last-selected !optional; + } + @include e(date, $mods: ('first', 'range-preview', 'special', 'current')) { @extend %date-first-preview-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 88dce836976..1de1526c045 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 @@ -1578,7 +1578,9 @@ %date-selected-special-active { %date-inner { &::after { - border-color: var-get($theme, 'date-selected-special-focus-border-color'); + @if $variant != 'fluent' { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } } } } @@ -1641,7 +1643,9 @@ %date-selected-special-current-first-last { %date-inner { &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); + @if $variant != 'fluent' { + border-color: var-get($theme, 'date-selected-special-border-color'); + } } } } @@ -1814,7 +1818,9 @@ %date-special-current-selected-active { %date-inner { &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); + @if $variant != 'fluent' { + border-color: var-get($theme, 'date-selected-special-border-color'); + } } } } @@ -1887,6 +1893,16 @@ } } + @if $variant == 'fluent' { + %date-selected-current-special { + %date-inner { + &::after { + border-color: var-get($theme, 'date-selected-current-background'); + } + } + } + } + %date-inactive { cursor: default; @@ -2042,7 +2058,7 @@ %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-inner { - @if not $bootstrap-theme { + @if not $bootstrap-theme and not $variant == 'fluent' { color: var-get($theme, 'date-special-focus-foreground'); } @@ -2192,7 +2208,6 @@ position: absolute; height: $date-size; width: $date-size; - border-radius: var-get($theme, 'date-border-radius'); } } @@ -2218,7 +2233,32 @@ &::after { width: $date-inner-size; height: $date-inner-size; - border-color: var-get($theme, 'date-selected-special-border-color'); + + @if $variant != 'fluent' { + border-color: var-get($theme, 'date-selected-special-border-color'); + } + } + } + } + + @if $variant == 'fluent' { + %date-first-preview-active { + %date-inner { + background: transparent; + border-inline-end-color: transparent; + } + } + + %date-last-preview-active { + %date-inner { + background: transparent; + border-inline-start-color: transparent; + } + } + + %date-first-last-selected { + %date-inner { + background: transparent; } } } @@ -2338,7 +2378,7 @@ content: ''; position: absolute; height: $date-size; - width: calc($date-size / 2 + #{$border-size}); + width: $date-size; border: rem(1px) solid var-get($theme, 'date-range-border-color'); z-index: 3; pointer-events: none; @@ -2346,16 +2386,55 @@ } %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'); + } + &::before { - inset-inline-end: calc(50% - #{$border-size}); + //inset-inline-end: calc($date-size / 2 - #{$border-size}); border-inline-end-color: transparent; + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); } } %date-range-selected-last { + %date-inner { + border-start-start-radius: var-get($theme, 'date-border-radius'); + border-end-start-radius: var-get($theme, 'date-border-radius'); + } + &::before { - inset-inline-start: calc(50% - #{$border-size}); + //inset-inline-start: calc($date-size / 2 - #{$border-size}); border-inline-start-color: transparent; + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); + } + } + + + %date-first-preview { + %date-inner { + border-start-start-radius: var-get($theme, 'date-range-border-radius'); + border-end-start-radius: var-get($theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + + %date-last-preview { + %date-inner { + border-start-end-radius: var-get($theme, 'date-range-border-radius'); + border-end-end-radius: var-get($theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + } + + %date-first-last { + %date-inner { + border-radius: var-get($theme, 'date-range-border-radius'); } } } From d30bd19f304a0ca409b70014e43bf149e7e8e8aa Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 8 Apr 2025 01:09:32 +0300 Subject: [PATCH 2/2] chore(calendar): remove commented code --- .../lib/core/styles/components/calendar/_calendar-theme.scss | 2 -- 1 file changed, 2 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 1de1526c045..c6dccfc14b8 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 @@ -2392,7 +2392,6 @@ } &::before { - //inset-inline-end: calc($date-size / 2 - #{$border-size}); border-inline-end-color: transparent; border-start-start-radius: var-get($theme, 'date-range-border-radius'); border-end-start-radius: var-get($theme, 'date-range-border-radius'); @@ -2406,7 +2405,6 @@ } &::before { - //inset-inline-start: calc($date-size / 2 - #{$border-size}); border-inline-start-color: transparent; border-start-end-radius: var-get($theme, 'date-range-border-radius'); border-end-end-radius: var-get($theme, 'date-range-border-radius');