From 8785e3619585edda99b60f570645b3f5bf85b171 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 5 Dec 2025 14:51:17 +0200 Subject: [PATCH 1/5] fix(calendar): update styles for indigo, material nad fluent theme to match master branch output --- .../lib/calendar/days-view/themes/_base.scss | 682 ++++++++---- .../days-view/themes/shared/_fluent.scss | 998 +++++++++++++++--- .../days-view/themes/shared/_indigo.scss | 508 ++++----- .../days-view/themes/shared/_material.scss | 308 +----- .../years-months/themes/shared/_material.scss | 18 +- src/app/calendar/calendar.sample.html | 12 + src/app/calendar/calendar.sample.ts | 49 +- 7 files changed, 1581 insertions(+), 994 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss index b88a040fcad..4f1001be1e9 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/_base.scss @@ -7,33 +7,54 @@ $theme: $material; -@include layer(base) { - $border-size: rem(1px); - $cal-picker-padding: rem(16px); - $date-view-row-gap: rem(4px); - $date-size: var-get($theme, 'size'); - $date-inner-size: var-get($theme, 'inner-size'); - $date-height: $date-size; +@mixin range-preview-half($direction) { + background: transparent; + border-block-color: transparent; + + &::after { + content: ''; + position: absolute; + height: var(--_date-size); + #{$direction}: 50%; + border-block-color: var-get($theme, 'date-range-preview-border-color'); + width: calc(50% + #{rem(1px)}); + border-width: var(--_range-border-size); + border-inline-color: transparent; + border-style: var(--_range-border-style); + } +} +@include layer(base) { @include b(igx-days-view) { @include sizable(); --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); --dropdown-size: var(--component-size); + // PRIVATE VARS + --_date-size: #{var-get($theme, 'size')}; + --_date-inner-size: #{var-get($theme, 'inner-size')}; + --_date-view-row-gap: #{rem(4px)}; + --_calendar-border-size: #{rem(1px)}; + --_date-border-size: #{rem(1px)}; + --_date-border-style: solid; + --_range-border-style: solid; + --_range-border-size: #{rem(1px)}; + --_preview-border-style: dashed; + display: flex; flex-flow: column nowrap; width: 100%; min-width: sizable(rem(290px), rem(314px), rem(360px)); color: var-get($theme, 'content-foreground'); background: var-get($theme, 'content-background'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color'); + box-shadow: 0 0 0 var(--_calendar-border-size) var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); padding-block: pad-block(rem(16px)); padding-inline: pad-inline(rem(12px)); overflow: hidden; outline: none; - gap: $date-view-row-gap; + gap: var(--_date-view-row-gap); @include type-style(body-1) { font-size: sizable(var(--ig-body-2-font-size), var(--ig-body-2-font-size), var(--ig-body-1-font-size)); @@ -94,18 +115,18 @@ $theme: $material; content: ''; position: absolute; z-index: -1; - height: $date-size; + height: var(--_date-size); width: 50%; color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-range-background'); - border-block: $border-size solid transparent; + border-width: var(--_range-border-size); } &::before { content: ''; position: absolute; - height: $date-size; - width: $date-size; + height: var(--_date-size); + width: var(--_date-size); border-radius: var-get($theme, 'date-border-radius'); } } @@ -113,11 +134,71 @@ $theme: $material; %igx-day-item-range-selected-first-last-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'); + } + } + + %igx-day-item-range-selected-first-last-inner-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + } + + %range-border-radius { border-radius: var-get($theme, 'date-range-border-radius'); + } + + %special-selected-firs-last { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + + &::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'); + + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + } + } + + %special-selected-firs-last-focus { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } + } + + %current-selected-firs-last { + color: var-get($theme, 'date-selected-foreground'); + background: var-get($theme, 'date-selected-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + border-radius: var-get($theme, 'date-current-border-radius'); + + &:hover { + color: var-get($theme, 'date-selected-hover-foreground'); + background: var-get($theme, 'date-selected-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + + %current-selected-firs-last-focus { + 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'); + } + + %igx-range-selected-first-last { + &::before { + background: var-get($theme, 'content-background'); } } @@ -128,21 +209,22 @@ $theme: $material; align-items: center; color: inherit; outline: none; - height: $date-size; + height: var(--_date-size); width: 100%; - border-block-start: rem(1px) solid transparent; - border-block-end: rem(1px) solid transparent; + border-block-start: var(--_range-border-size) var(--_date-border-style) transparent; + border-block-end: var(--_range-border-size) var(--_date-border-style) transparent; @include e(inner) { position: relative; display: inline-flex; justify-content: center; align-items: center; - width: $date-size; - min-width: $date-size; - height: $date-height; + width: var(--_date-size); + height: var(--_date-size); + min-width: var(--_date-size); border-radius: var-get($theme, 'date-border-radius'); - border-style: solid; + border-width: var(--_date-border-size); + border-style: var(--_date-border-style); border-color: var-get($theme, 'date-border-color'); z-index: 2; @@ -157,7 +239,7 @@ $theme: $material; content: ''; position: absolute; z-index: 0; - border-style: solid; + border-style: var(--_date-border-style); border-color: transparent; } } @@ -169,7 +251,7 @@ $theme: $material; z-index: 1; min-width: auto; - width: $date-size; + width: var(--_date-size); color: var-get($theme, 'week-number-foreground'); background: var-get($theme, 'week-number-background'); border-color: var-get($theme, 'week-number-background'); @@ -183,14 +265,18 @@ $theme: $material; position: absolute; background: var-get($theme, 'week-number-background'); inset-block-start: 100%; - height: calc($date-view-row-gap + rem(2px)); - width: $date-size; + height: calc(var(--_date-view-row-gap) + #{rem(2px)}); + width: var(--_date-size); } } - @include m(weekend) { + @include m(weekend, $not: ('disabled', 'special', 'selected', 'current', 'first', 'last', 'inactive', 'range', 'active')) { @include e(inner) { color: var-get($theme, 'weekend-color'); + + &:hover { + color: var-get($theme, 'date-hover-foreground'); + } } } @@ -211,35 +297,67 @@ $theme: $material; } } - @include m(inactive) { - cursor: default; - + @include m(inactive, $not: ('disabled', 'special', 'current', 'first', 'last', 'range')) { @include e(inner) { color: var-get($theme, 'inactive-color'); &:hover { - color: var-get($theme, 'inactive-color'); + color: var-get($theme, 'date-hover-foreground'); } } } - @include mx('inactive', 'special') { + @include m(active) { @include e(inner) { - &::after { - border-color: transparent; + color: var-get($theme, 'date-focus-foreground'); + background: var-get($theme, 'date-focus-background'); + border-color: var-get($theme, 'date-focus-border-color'); + } + } + + // SELECTED + @include m(selected) { + @include e(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'); } } } + @include mx('selected', 'active') { + @include e(inner) { + color: var-get($theme, 'date-selected-focus-foreground'); + background: var-get($theme, 'date-selected-focus-background'); + border-color: var-get($theme, 'date-selected-focus-border-color'); + } + } + + // selected + disabled do not exist as combination for now + + // CURRENT @include m(current) { @include e(inner) { color: var-get($theme, 'date-current-foreground'); + background: var-get($theme, 'date-current-background'); border-color: var-get($theme, 'date-current-border-color'); + border-radius: var-get($theme, 'date-current-border-radius'); &:hover { color: var-get($theme, 'date-current-hover-foreground'); + background: var-get($theme, 'date-current-hover-background'); border-color: var-get($theme, 'date-current-hover-border-color'); } + + &::after { + width: var(--_date-inner-size); + height: var(--_date-inner-size); + } } } @@ -251,13 +369,124 @@ $theme: $material; } } + // Current + selected + @include mx('current', 'selected') { + @include e(inner) { + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + @include mx('current', 'selected', 'active') { + @include e(inner) { + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + @include mx('current', 'selected', ('not': ('first', 'last'))) { + @include e(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'); + } + } + } + + @include mx('current', 'selected', 'active', ('not': ('first', 'last'))) { + @include e(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'); + } + } + + // Current + range + @include mx('current', 'selected', 'first' ) { + @include e(inner) { + @extend %current-selected-firs-last + } + } + + @include mx('current', 'selected', 'first', 'active') { + @include e(inner) { + @extend %current-selected-firs-last-focus + } + } + + @include mx('current', 'selected', 'last') { + @include e(inner) { + @extend %current-selected-firs-last + } + } + + @include mx('current', 'selected', 'last', 'active') { + @include e(inner) { + @extend %current-selected-firs-last-focus + } + } + + @include mx('current', 'first', 'last') { + @include e(inner) { + @extend %current-selected-firs-last + } + } + + @include mx('current', 'first', 'last', 'active') { + @include e(inner) { + @extend %current-selected-firs-last-focus + } + } + + @include mx('current', 'range', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($theme, 'date-selected-current-range-foreground'); + background: var-get($theme, 'date-selected-current-range-background'); + border-color: var-get($theme, 'date-selected-current-border-color'); + + &:hover { + color: var-get($theme, 'date-selected-current-range-hover-foreground'); + background: var-get($theme, 'date-selected-current-range-hover-background'); + border-color: var-get($theme, 'date-selected-current-hover-border-color'); + } + } + } + + @include mx('current', 'range', 'active', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($theme, 'date-selected-current-range-focus-foreground'); + background: var-get($theme, 'date-selected-current-range-focus-background'); + border-color: var-get($theme, 'date-selected-current-focus-border-color'); + } + } + + @include mx('current', 'disabled') { + @include e(inner) { + color: var-get($theme, 'date-current-foreground'); + opacity: .38; + } + } + + // SPECIAL @include m(special) { @include e(inner) { color: var-get($theme, 'date-special-foreground'); background: var-get($theme, 'date-special-background'); + border-radius: var-get($theme, 'date-special-border-radius'); &::after { + width: var(--_date-size); + height: var(--_date-size); + border-width: var(--_date-border-size); border-color: var-get($theme, 'date-special-border-color'); + border-radius: var-get($theme, 'date-special-border-radius'); } &:hover { @@ -279,340 +508,340 @@ $theme: $material; 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'); } } } - @include m(active) { + // Special + selected + @include mx('special', 'selected') { @include e(inner) { - color: var-get($theme, 'date-focus-foreground'); - background: var-get($theme, 'date-focus-background'); - border-color: var-get($theme, 'date-focus-border-color'); - } - } - - @include m(selected) { - @include e(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'); + &::after { + width: var(--_date-inner-size); + height: var(--_date-inner-size); } } } - @include mx('selected', 'active') { + @include mx('special', 'selected', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - border-color: var-get($theme, 'date-selected-focus-border-color'); - } - } + color: var-get($theme, 'date-selected-special-foreground'); + background: var-get($theme, 'date-selected-special-background'); - @include mx('selected', 'special') { - @include e(inner) { &::after { border-color: var-get($theme, 'date-selected-special-border-color'); } &:hover { - /* stylelint-disable max-nesting-depth */ + 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'); } - /* stylelint-enable max-nesting-depth */ } } } - @include mx('selected', 'special', 'active') { + @include mx('special', 'selected', 'active', ('not': ('first', 'last'))) { @include e(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'); } } } - @include mx('selected', 'special','range', ('not': ('first', 'last'))) { + @include mx('special', 'selected', 'first') { @include e(inner) { - color: var-get($theme, 'date-special-range-foreground'); - background: var-get($theme, 'date-special-range-background'); - - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - } + @extend %special-selected-firs-last; } } - @include mx('selected', 'special', 'active', 'range') { + @include mx('special', 'selected', 'first', 'active') { @include e(inner) { - color: var-get($theme, 'date-special-focus-foreground'); - background: var-get($theme, 'date-special-range-focus-background'); - - &:hover { - color: var-get($theme, 'date-special-hover-foreground'); - background: var-get($theme, 'date-special-range-hover-background'); - } - - &::after { - border-color: var-get($theme, 'date-special-hover-border-color'); - } + @extend %special-selected-firs-last-focus; } } - @include m(hidden) { - cursor: default; - visibility: hidden; + @include mx('special', 'selected', 'last') { + @include e(inner) { + @extend %special-selected-firs-last; + } } - @include m('range') { - border-top-color: var-get($theme, 'date-range-border-color'); - border-bottom-color: var-get($theme, 'date-range-border-color'); - background: var-get($theme, 'date-selected-range-background'); - - &:hover { - border-top-color: var-get($theme, 'date-range-border-color'); - border-bottom-color: var-get($theme, 'date-range-border-color'); + @include mx('special', 'selected', 'last', 'active') { + @include e(inner) { + @extend %special-selected-firs-last-focus; } + } + @include mx('special', 'selected', 'first', 'last') { @include e(inner) { - background: transparent; - color: var-get($theme, 'date-selected-range-foreground'); + @extend %special-selected-firs-last; } } - @include m(range-preview) { - position: relative; - border-block-color: var-get($theme, 'date-range-preview-border-color'); - + @include mx('special', 'selected', 'first', 'last', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-range-foreground'); + @extend %special-selected-firs-last-focus; } } - @include mx('range-preview', 'current') { + // Special + range + @include mx('special', 'range', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($theme, 'date-selected-current-range-foreground'); + 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'); + } + } } } - @include mx('range-preview', 'special') { + @include mx('special', 'range', 'active', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($theme, 'date-special-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-range-focus-border-color'); + } } } - @include mx('range', 'selected') { - &::after { - border-block: $border-size solid var-get($theme, 'date-range-border-color'); + @include mx('special', 'range', ('not': ('first', 'last', 'current'))) { + @include e(inner) { + border-color: transparent; + + &::after { + width: var(--_date-size); + height: var(--_date-size); + } } + } + @include mx('special', 'disabled') { @include e(inner) { - &:hover { - background: var-get($theme, 'date-selected-range-hover-background'); - color: var-get($theme, 'date-selected-range-hover-foreground'); - } + color: var-get($theme, 'date-special-range-foreground'); + opacity: .38; } } - @include mx('range', 'selected', 'active') { + // SPECIAL + CURRENT + @include mx('special', 'current') { @include e(inner) { - color: var-get($theme, 'date-selected-range-focus-foreground'); - background: var-get($theme, 'date-selected-range-focus-background'); + &::after { + width: var(--_date-inner-size); + height: var(--_date-inner-size); + } } } - @include mx('range', 'selected', 'current', ('not': ('first', 'last'))) { + @include mx('special', 'current', 'selected') { @include e(inner) { - color: var-get($theme, 'date-selected-current-range-foreground'); - background: var-get($theme, 'date-selected-current-range-background'); + &::after { + border-color: var-get($theme, 'date-selected-special-border-color'); + } &:hover { - color: var-get($theme, 'date-selected-current-range-hover-foreground'); - background: var-get($theme, 'date-selected-current-range-hover-background'); + /* stylelint-disable max-nesting-depth */ + &::after { + border-color: var-get($theme, 'date-selected-special-hover-border-color'); + } + /* stylelint-enable max-nesting-depth */ } } } - @include mx('range', 'selected', 'current', 'active') { + @include mx('special', 'current', 'selected', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-current-range-focus-foreground'); - background: var-get($theme, 'date-selected-current-range-focus-background'); + &::after { + border-color: var-get($theme, 'date-selected-special-focus-border-color'); + } } } - @include mx('range', 'selected', 'first') { - @extend %igx-day-item-range-selected-first-last; + @include mx('current', 'special', 'selected', 'first' ) { + @include e(inner) { + @extend %current-selected-firs-last + } + } + @include mx('current', 'special', 'selected', 'first', 'active') { @include e(inner) { - @extend %igx-day-item-range-selected-first-last-inner; + @extend %current-selected-firs-last-focus } } - @include mx('range', 'selected', 'last') { - @extend %igx-day-item-range-selected-first-last; + @include mx('current', 'special', 'selected', 'last') { + @include e(inner) { + @extend %current-selected-firs-last + } + } + @include mx('current', 'special', 'selected', 'last', 'active') { @include e(inner) { - @extend %igx-day-item-range-selected-first-last-inner; + @extend %current-selected-firs-last-focus } } - @include mx('selected', 'special', 'current', 'preview', 'first') { + @include mx('current', 'special', 'first', 'last') { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %current-selected-firs-last } } - @include mx('selected', 'special', 'current', 'preview', 'last') { + @include mx('current', 'special', 'first', 'last', 'active') { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %current-selected-firs-last-focus } } - @include mx('current', 'range') { + // RANGE + @include m('range') { + border-top-color: var-get($theme, 'date-range-border-color'); + border-bottom-color: var-get($theme, 'date-range-border-color'); + background: var-get($theme, 'date-selected-range-background'); + + &:hover { + border-top-color: var-get($theme, 'date-range-border-color'); + border-bottom-color: var-get($theme, 'date-range-border-color'); + } + @include e(inner) { - color: var-get($theme, 'date-current-foreground'); + background: transparent; + color: var-get($theme, 'date-selected-range-foreground'); } } - @include mx('current', 'selected') { + @include m('range', $not: ('first', 'last', 'current', 'special')) { @include e(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'); + border-color: transparent; + } + } + @include mx('range', 'selected') { + @include e(inner) { &: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'); + background: var-get($theme, 'date-selected-range-hover-background'); + color: var-get($theme, 'date-selected-range-hover-foreground'); } } + + &::after { + border-block: var(--_date-border-size) var(--_range-border-style) var-get($theme, 'date-range-border-color'); + } } - @include mx('current', 'selected', 'active') { + @include mx('range', 'selected', 'active') { @include e(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'); + color: var-get($theme, 'date-selected-range-focus-foreground'); + background: var-get($theme, 'date-selected-range-focus-background'); } } - @include mx('special', 'current', 'selected', 'active') { + @include m('first', $not: ('current', 'special')) { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %range-border-radius; } } - @include m(first) { - &::after { - inset-inline-start: 50%; + @include m('last', $not: ('current', 'special')) { + @include e(inner) { + @extend %range-border-radius; } } - @include mx('first', 'range-preview') { - background: transparent; - border-block-color: transparent; - - &::after { - content: ''; - position: absolute; - height: $date-size; - width: 50%; - inset-inline-start: 50%; - border-block-color: var-get($theme, 'date-range-preview-border-color'); + @include mx('first', 'last', ('not': ('current', 'special'))) { + @include e(inner) { + @extend %range-border-radius; } } - @include mx('last', 'range-preview') { - background: transparent; - border-block-color: transparent ; + @include mx('range', 'selected', 'first') { + @extend %igx-day-item-range-selected-first-last; - &::after { - content: ''; - position: absolute; - height: $date-size; - width: 50%; - inset-inline-end: 50%; - border-block-color: var-get($theme, 'date-range-preview-border-color'); + @include e(inner) { + @extend %igx-day-item-range-selected-first-last-inner; } } - @include mx('first', 'range-preview', 'selected') { + @include mx('range', 'selected', 'last') { + @extend %igx-day-item-range-selected-first-last; + @include e(inner) { - color: var-get($theme, 'date-selected-foreground'); + @extend %igx-day-item-range-selected-first-last-inner; } } - @include mx('last', 'range-preview', 'selected') { + @include mx('range', 'selected', 'first', 'active') { @include e(inner) { - color: var-get($theme, 'date-selected-foreground'); + @extend %igx-day-item-range-selected-first-last-inner-focus; } } - @include mx('range', 'selected', 'special', 'first') { + @include mx('range', 'selected', 'last', 'active') { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($theme, 'date-selected-special-border-color'); - } + @extend %igx-day-item-range-selected-first-last-inner-focus; } } - @include mx('range', 'selected', 'special', 'last') { + // PREVIEW + @include m(range-preview) { + position: relative; + border-block-style: var(--_preview-border-style); + border-block-color: var-get($theme, 'date-range-preview-border-color'); + } + + @include m(range-preview, $not: ('first', 'last', 'current')) { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($theme, 'date-selected-special-border-color'); - } + border-color: transparent; } } - @include mx('range', 'selected', 'active', 'first') { - @include e(inner) { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + @include mx('range-preview', 'first') { + @include range-preview-half('inset-inline-start'); + } - &:hover { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - } - } + @include mx('range-preview', 'last') { + @include range-preview-half('inset-inline-end'); } - @include mx('range', 'selected', 'active', 'last') { + @include mx('range-preview', 'selected', 'first', ('not': 'active')) { @include e(inner) { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); - - &:hover { - color: var-get($theme, 'date-selected-focus-foreground'); - background: var-get($theme, 'date-selected-focus-background'); + &:not(:hover) { + color: var-get($theme, 'date-selected-foreground'); } } } - @include mx('selected', 'special', 'current', 'first', 'last') { + @include mx('range-preview', 'selected', 'last', ('not': 'active')) { @include e(inner) { - &::after { - border-color: var-get($theme, 'date-selected-special-border-color'); + &:not(:hover) { + color: var-get($theme, 'date-selected-foreground'); } } } + @include m(first) { + &::after { + inset-inline-start: 50%; + } + } + @include m(last) { &::after { inset-inline-end: 50%; @@ -634,20 +863,6 @@ $theme: $material; } } - @include mx('disabled', 'current') { - @include e(inner) { - color: var-get($theme, 'date-current-foreground'); - opacity: .38; - } - } - - @include mx('disabled', 'special') { - @include e(inner) { - color: var-get($theme, 'date-special-range-foreground'); - opacity: .38; - } - } - @include mx('disabled', 'selected', ('not': 'range')) { @include e(inner) { color: var-get($theme, 'date-selected-foreground'); @@ -662,16 +877,25 @@ $theme: $material; } @include mx('range', 'selected', 'first', 'disabled') { + @extend %igx-range-selected-first-last; + @include e(inner) { opacity: .38; } } @include mx('range', 'selected', 'last', 'disabled') { + @extend %igx-range-selected-first-last; + @include e(inner) { opacity: .38; } } + + @include m(hidden) { + cursor: default; + visibility: hidden; + } } @include b(igx-day-label) { @@ -680,8 +904,8 @@ $theme: $material; justify-content: center; align-items: center; outline: none; - height: $date-size; - min-width: $date-size; + height: var(--_date-size); + min-width: var(--_date-size); width: 100%; border-block-start: rem(1px) solid transparent; border-block-end: rem(1px) solid transparent; @@ -713,8 +937,8 @@ $theme: $material; display: flex; justify-content: center; align-items: center; - width: $date-size; - height: $date-height; + width: var(--_date-size); + height: var(--_date-size); position: relative; border-top-left-radius: var-get($theme, 'week-number-border-radius'); border-top-right-radius: var-get($theme, 'week-number-border-radius'); diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss index d62f967135c..80bb1bad509 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_fluent.scss @@ -8,329 +8,1029 @@ $_theme: $fluent; +@include themed-block(igx-days-row, fluent) { + height: var(--_date-size); + + &:nth-child(2) { + @include e(day, $m: week-number) { + border-start-start-radius: var-get($_theme, 'week-number-border-radius'); + border-start-end-radius: var-get($_theme, 'week-number-border-radius'); + } + } +} + @include themed-block(igx-day-item, fluent) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $date-height: $date-size; - $border-size: rem(1px); + --_preview-border-style: solid; - @include e(inner) { - border-width: $border-size; + $fake-bg-size: calc(50% + (var(--_date-size) / 2)); + $fake-bg-position: #{calc(50% - (var(--_date-size) / 2))}; - &::after { - border-width: $border-size; - border-radius: 50%; - width: $date-inner-size; - height: $date-inner-size; + // CURRENT + @include m(current) { + @include e(inner) { + background: transparent; + border-color: var-get($_theme, 'date-border-color'); + border-radius: var-get($_theme, 'date-border-radius'); + + &::before { + content: ''; + position: absolute; + border: var(--_date-border-size) var(--_date-border-style) var-get($_theme, 'date-current-border-color'); + box-sizing: border-box; + width: var(--_date-inner-size); + height: var(--_date-inner-size); + background: var-get($_theme, 'date-current-background'); + border-radius: var-get($_theme, 'date-current-border-radius'); + z-index: -1; + } + + &:hover { + background: var-get($_theme, 'date-hover-background'); + border-color: var-get($_theme, 'date-hover-border-color'); + + &::before { + background: var-get($_theme, 'date-current-hover-background'); + border-color: var-get($_theme, 'date-current-hover-border-color'); + } + } } } - @include mx('selected', 'range') { + @include mx('current', 'active') { @include e(inner) { + background: var-get($_theme, 'date-focus-background'); + border-color: var-get($_theme, 'date-focus-border-color'); + + &::before { + background: var-get($_theme, 'date-current-focus-background'); + border-color: var-get($_theme, 'date-current-focus-border-color'); + } + } + } + + // CURRENT + SELECTED + @include mx('current', 'selected') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + + &::before { + border-color: var-get($_theme, 'date-selected-current-border-color'); + background: var-get($_theme, 'date-selected-current-background'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); + + &::before { + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + background: var-get($_theme, 'date-selected-current-hover-background'); + } + } + } + } + + @include mx('current', 'selected', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + + &::before { + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + background: var-get($_theme, 'date-selected-current-focus-background'); + } + } + } + + // SPECIAL + @include m(special) { + @include e(inner) { + background: transparent; + border-color: var-get($_theme, 'date-border-color'); + border-radius: var-get($_theme, 'date-border-radius'); + &::after { - width: $date-inner-size; - height: $date-inner-size; + width: var(--_date-inner-size); + height: var(--_date-inner-size); + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + border-radius: var-get($_theme, 'date-special-border-radius'); + z-index: -1; + } + + &:hover { + background: var-get($_theme, 'date-hover-background'); + border-color: var-get($_theme, 'date-hover-border-color'); + + &::after { + background: var-get($_theme, 'date-special-hover-background'); + border-color: var-get($_theme, 'date-special-hover-border-color'); + } } } } - @include m('range') { + @include mx('special', 'active') { @include e(inner) { - height: 100%; + background: var-get($_theme, 'date-focus-background'); + border-color: var-get($_theme, 'date-focus-border-color'); + + &::after { + background: var-get($_theme, 'date-special-focus-background'); + border-color: var-get($_theme, 'date-special-focus-border-color'); + } } } - @include mx('range-preview', 'special', 'current') { + // SPECIAL + SELECTED + @include mx('special', 'selected') { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + + &::after { + background: var-get($_theme, 'date-selected-special-background'); + border-color: var-get($_theme, 'date-selected-special-border-color'); + border-radius: var-get($_theme, 'date-special-border-radius'); + } + + &:hover { + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); + + &::after { + background: var-get($_theme, 'date-selected-special-hover-background'); + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } + } } } - @include mx('range', 'selected') { + @include mx('special', 'selected', 'active') { @include e(inner) { - border-color: transparent !important; + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + + &::after { + background: var-get($_theme, 'date-selected-special-focus-background'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); + } } } - @include mx('range', 'selected', 'first') { + // CURRENT + SPECIAL + @include mx('current', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + + &::after { + width: calc(var(--_date-inner-size) - #{rem(4px)}); + height: calc(var(--_date-inner-size) - #{rem(4px)}); + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + border-radius: var-get($_theme, 'date-current-border-radius'); + } + + &: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'); + } + } + } + } + + @include mx('current', 'special', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-current-focus-foreground'); + + &::after { + background: var-get($_theme, 'date-current-focus-background'); + border-color: var-get($_theme, 'date-current-focus-foreground'); + } + } + } + + // CURRENT + SPECIAL + SELECTED + @include mx('current', 'special', 'selected') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-foreground'); + + &::after { + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-foreground'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + + &::after { + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-foreground'); + } + } + } + } + + @include mx('current', 'special', 'selected', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + + &::after { + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-foreground'); + } + } + } + + // CURRENT + SPECIAL + SELECTED + RANGE-PREVIEW + FIRST/LAST + @include mx('current', 'special', 'selected', 'range-preview', 'first') { + @include e(inner) { + &:hover { + color: var-get($_theme, 'date-current-foreground'); + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + @include mx('current', 'special', 'selected', 'range-preview', 'last') { + @include e(inner) { + &:hover { + color: var-get($_theme, 'date-current-foreground'); + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + // FIRST + LAST (not current, not special) + @include mx('first', 'last', ('not': ('current', 'special'))) { + @include e(inner) { + color: inherit; + background: transparent; + border-color: var-get($_theme, 'date-range-preview-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); + + &:hover { + border-color: var-get($_theme, 'date-range-preview-border-color'); + } + } + } + + @include mx('first', 'last', 'active', ('not': ('current', 'special'))) { + @include e(inner) { + border-color: var-get($_theme, 'date-range-preview-border-color'); + } + } + + // RANGE + @include m(range) { + background: var-get($_theme, 'date-selected-range-background'); + border-block-color: var-get($_theme, 'date-range-border-color'); + + @include e(inner) { + height: 100%; + } + } + + @include mx('range', 'first') { + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + &::before { content: ''; position: absolute; - height: $date-size; - width: $date-size; - border: $border-size solid var-get($_theme, 'date-range-border-color'); + width: var(--_date-size); z-index: 3; - pointer-events: none; - 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'); - border-start-end-radius: 0; - border-end-end-radius: 0; + pointer-events: none; + inset-inline-end: initial; + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + 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; } &::after { - border-block-color: var-get($_theme, 'date-range-border-color'); - border-width: $border-size; + background: var-get($_theme, 'date-selected-range-background'); + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + inset-inline-start: $fake-bg-position; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-end: 0; + } + + @include e(inner) { + background: transparent; + border-color: transparent; + + &:hover { + border-color: transparent; + } } - - @include e(inner) { - border-start-end-radius: var-get($_theme, 'date-border-radius'); - border-end-end-radius: var-get($_theme, 'date-border-radius'); - } } - @include mx('range', 'selected', 'last') { + @include mx('range', 'last') { + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + &::before { content: ''; position: absolute; - height: $date-size; - width: $date-size; - border: $border-size solid var-get($_theme, 'date-range-border-color'); + width: var(--_date-size); z-index: 3; - pointer-events: none; - 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'); - border-start-start-radius: 0; - border-end-start-radius: 0; + pointer-events: none; + inset-inline-start: initial; + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + 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; } &::after { - border-block-color: var-get($_theme, 'date-range-border-color'); - border-width: $border-size; + background: var-get($_theme, 'date-selected-range-background'); + border-block: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + inset-inline-end: $fake-bg-position; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-start: 0; } - - @include e(inner) { - border-start-start-radius: var-get($_theme, 'date-border-radius'); - border-end-start-radius: var-get($_theme, 'date-border-radius'); - } - } - @include mx('first', 'last') { @include e(inner) { background: transparent; - border-radius: var-get($_theme, 'date-range-border-radius'); + border-color: transparent; + + &:hover { + border-color: transparent; + } } } - @include mx('range', 'selected', 'current', 'first') { + // RANGE-PREVIEW + @include mx('range-preview') { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + background: transparent; + border-color: transparent; &:hover { - color: var-get($_theme, 'date-selected-current-range-foreground'); + background: transparent; + border-color: transparent; } } } - @include mx('range', 'selected', 'current', 'last') { + @include mx('range-preview', ('not': ('disabled', 'inactive', 'weekend'))) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: inherit; + } + } + + @include mx('range-preview', 'inactive', ('not': 'current')) { + @include e(inner) { + color: var-get($_theme, 'inactive-color'); &:hover { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'inactive-color'); } } } - @include mx('range', 'selected', 'current', 'special') { + @include mx('range-preview', 'weekend', ('not': ('current', 'special', 'inactive', 'disabled'))) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'weekend-color'); &:hover { - color: var-get($_theme, 'date-selected-current-range-foreground'); + color: var-get($_theme, 'weekend-color'); } + } + } + @include mx('range-preview', ('not': ('first', 'last', 'current', 'special'))) { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range-preview', 'first') { + color: inherit; + border-block-color: transparent; + + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + + &::before { + content: ''; + position: absolute; + width: var(--_date-size); + z-index: 3; + pointer-events: none; + inset-inline-end: initial; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + + &::after { + background: transparent !important; + border-style: var(--_preview-border-style); + border-color: var-get($_theme, 'date-range-preview-border-color'); + inset-inline-start: $fake-bg-position; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-end: 0; + } + + @include e(inner) { + border-color: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + @include mx('range-preview', 'last') { + color: inherit; + border-block-color: transparent; + + &::before, + &::after { + height: var(--_date-size); + width: $fake-bg-size; + } + + &::before { + content: ''; + position: absolute; + width: var(--_date-size); + z-index: 3; + pointer-events: none; + inset-inline-start: initial; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &::after { + background: transparent !important; + border-style: var(--_preview-border-style); + border-color: var-get($_theme, 'date-range-preview-border-color'); + inset-inline-end: $fake-bg-position; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-inline-start: 0; + } + + @include e(inner) { + border-color: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + @include mx('range-preview', 'first', 'selected') { + @include e(inner) { &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); - border-color: var-get($_theme, 'date-current-foreground'); + border-block-color: var-get($_theme, 'date-range-preview-border-color'); } } } - @include mx('range', 'selected', 'current', 'first', 'special') { + @include mx('range-preview', 'last', 'selected') { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + &::after { + border-block-color: var-get($_theme, 'date-range-preview-border-color'); + } + } + } + @include mx('first', 'last', 'current', ('not': 'special')) { + @include e(inner) { &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + display: none; } } } - @include mx('range', 'selected', 'current', 'last', 'special') { + @include mx('range-preview', 'first', 'current', ('not': 'special')) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + &::after { + display: none; + } + } + } + + @include mx('range-preview', 'last', 'current', ('not': 'special')) { + @include e(inner) { + &::after { + display: none; + } + } + } + + + .igx-day-item--last { + &::after { + inset-inline-end: $fake-bg-position; + } + } + + // RESET HOVER/FOCUS STYLES IN PREVIEW + @include mx('range-preview', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); + background: transparent; &::after { - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } + + &:hover { + background: transparent; + color: var-get($_theme, 'date-special-foreground'); + + &::after { + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } } } } - @include m('current') { + @include mx('range-preview', 'special', 'active') { @include e(inner) { - &::before { - content: ''; - position: absolute; - z-index: -1; - width: $date-inner-size; - height: $date-inner-size; - border-radius: 50%; - background: var-get($_theme, 'date-current-background'); + color: var-get($_theme, 'date-special-foreground'); + background: transparent; + + &::after { + background: var-get($_theme, 'date-special-focus-background'); + border-color: var-get($_theme, 'date-special-focus-border-color'); } } } - @include mx('special', 'current') { + @include mx('range-preview', 'current') { @include e(inner) { color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; &::after { border-color: var-get($_theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + } + + &:hover { + color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } } } } - @include mx('special', 'current', 'active') { + @include mx('range-preview', 'current', 'active') { @include e(inner) { color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } &::after { border-color: var-get($_theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); } } } - @include mx('special', 'current', 'active', 'range') { + @include mx('range-preview', 'current', 'special') { @include e(inner) { color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; &::after { + background: var-get($_theme, 'date-current-background'); border-color: var-get($_theme, 'date-current-foreground'); - width: sizable(rem(22px), rem(24px), rem(28px)); - height: sizable(rem(22px), rem(24px), rem(28px)); + } + + &:hover { + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } } } } - @include mx('first', 'range-preview') { - &::after { - width: calc(50% + #{rem(2px)}); - border-inline-color: transparent; - border-style: solid; - border-width: $border-size; + @include mx('range-preview', 'current', 'special', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + background: transparent; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + 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; + border-color: transparent; + + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } } + } + @include mx('selected', 'first', 'last') { @include e(inner) { background: transparent; border-color: var-get($_theme, 'date-range-preview-border-color'); - 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'); - border-start-end-radius: 0; - border-end-end-radius: 0; + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('last', 'range-preview') { - &::after { - width: calc(50% + #{rem(2px)}); - border-inline-color: transparent; - border-style: solid; - border-width: $border-size; + @include mx('selected', 'first', 'last', 'special') { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); + + &::before { + border-color: transparent; + } + + &::after { + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } + + &:hover { + &::after { + background: var-get($_theme, 'date-special-background'); + border-color: var-get($_theme, 'date-special-border-color'); + } + } + } + } + + @include mx('selected', 'first', 'last', 'current') { + @include e(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'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + + &:hover { + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + @include mx('selected', 'first', 'last', 'current', 'special') { + @include e(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'); + } + + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + + &:hover { + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + } + + @include mx('selected', 'first', 'last', 'current', 'special', 'active') { + @include e(inner) { + &::after { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-foreground'); + } + } + } + + @include mx('range-preview', 'selected', 'special', 'first') { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range-preview', 'selected', 'special', 'last') { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range-preview', 'selected', 'current', 'first') { + @include e(inner) { + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } } + } + @include mx('range-preview', 'selected', 'current', 'last') { @include e(inner) { + &::before { + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + } + } + } + + + + // RANGE + SELECTED + @include mx('range', 'selected') { + background: var-get($_theme, 'date-selected-range-background'); +} + + @include mx('range', 'selected', 'first') { + background: transparent; + border-color: transparent; + + &::before { background: transparent; - border-color: var-get($_theme, 'date-range-preview-border-color'); - 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'); - border-start-start-radius: 0; - border-end-start-radius: 0; + border-inline-start: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + border-inline-end: 0; + border-start-start-radius: var-get($_theme, 'date-range-border-radius'); + border-end-start-radius: var-get($_theme, 'date-range-border-radius'); + border-start-end-radius: 0; + border-end-end-radius: 0; + + } + + &::after { + background: var-get($_theme, 'date-selected-range-background'); } } - @include mx('first', 'inactive', 'range-preview') { + @include mx('range', 'selected', 'last') { + background: transparent; + border-color: transparent; + + &::before { + background: transparent; + border-inline-end: var(--_range-border-size) var(--_range-border-style) var-get($_theme, 'date-range-border-color'); + border-inline-start: 0; + border-start-end-radius: var-get($_theme, 'date-range-border-radius'); + border-end-end-radius: var-get($_theme, 'date-range-border-radius'); + border-start-start-radius: 0; + border-end-start-radius: 0; + } + + &::after { + background: var-get($_theme, 'date-selected-range-background'); + } + } + + @include mx('range', 'selected', ('not': ('range-preview', 'special', 'current', 'disabled'))) { @include e(inner) { color: var-get($_theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($_theme, 'date-selected-range-hover-foreground'); + background: var-get($_theme, 'date-selected-range-hover-background'); + } + + &::before { + background: var-get($_theme, 'date-selected-range-background'); + } } } - @include mx('last', 'inactive', 'range-preview') { + @include mx('range', 'selected', 'active', ('not': ('range-preview', 'special', 'current', 'disabled'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-range-focus-foreground'); + background: var-get($_theme, 'date-selected-range-focus-background'); + } + } + + @include mx('range', 'selected', 'inactive', ('not': ('range-preview', 'special', 'current', 'disabled'))) { @include e(inner) { color: var-get($_theme, 'date-selected-range-foreground'); } } - @include mx('first', 'range-preview', 'current', 'selected') { + @include mx('range', 'selected', 'special', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + border-color: transparent; } } - @include mx('last', 'range-preview', 'current', 'selected') { + @include mx('range', 'selected', 'current', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); + border-color: transparent; } } - @include mx('disabled', 'special') { + + // RANGE + SPECIAL (not preview) + @include mx('range', 'special', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); + color: var-get($_theme, 'date-special-range-foreground'); + background: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + + &::after { + background: var-get($_theme, 'date-special-range-background'); + border-color: var-get($_theme, 'date-special-range-border-color'); + } + + &:hover { + color: var-get($_theme, 'date-special-range-hover-foreground'); + background: var-get($_theme, 'date-selected-range-hover-background'); + + &::after { + background: var-get($_theme, 'date-special-range-hover-background'); + border-color: var-get($_theme, 'date-special-range-hover-border-color'); + } + } } } - @include mx('disabled', 'special', 'range', ('not': 'current')) { + @include mx('range', 'special', 'active', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-special-range-focus-foreground'); + background: var-get($_theme, 'date-selected-range-focus-background'); + + &::after { + background: var-get($_theme, 'date-special-range-focus-background'); + border-color: var-get($_theme, 'date-special-range-focus-border-color'); + } } } - @include mx('disabled', 'range-preview') { + @include mx('range', 'current', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-selected-current-range-foreground'); + background: transparent; + border-radius: var-get($_theme, 'date-range-border-radius'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-range-hover-foreground'); + background: var-get($_theme, 'date-selected-range-hover-background'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } + } } } - @include mx('disabled', 'current') { + @include mx('range', 'current', 'active', ('not': 'range-preview')) { @include e(inner) { - color: var-get($_theme, 'date-current-foreground'); + color: var-get($_theme, 'date-selected-current-range-focus-foreground'); + background: var-get($_theme, 'date-selected-range-focus-background'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } } } - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'date-selected-range-background'); - z-index: -1; + @include mx('range', 'current', 'special', ('not': 'range-preview')) { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-range-foreground'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); + } + + &::after { + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-foreground'); + } + + &:hover { + color: var-get($_theme, 'date-selected-current-range-hover-foreground'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + } + + &::after { + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-foreground'); + } + } } } - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'date-selected-range-background'); - z-index: -1; + @include mx('range', 'current', 'special', 'active', ('not': 'range-preview')) { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-range-focus-foreground'); + + &::before { + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } + + &::after { + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-foreground'); + } } } -} -@include themed-block(igx-days-row, fluent) { - height: var-get($_theme, 'size'); + // DISABLED + @include mx('range', 'special', 'disabled', ('not': 'range-preview')) { + @include e(inner) { + border-color: transparent; + } + } - &:nth-child(2) { - @include e(day, $m: week-number) { - border-start-start-radius: var-get($_theme, 'week-number-border-radius'); - border-start-end-radius: var-get($_theme, 'week-number-border-radius'); + @include mx('range', 'current', 'disabled', ('not': 'range-preview')) { + @include e(inner) { + border-color: transparent; + } + } + + @include mx('range', 'special', 'current', 'disabled', ('not': 'range-preview')) { + @include e(inner) { + &::after { + border-color: var-get($_theme, 'date-current-foreground'); + } } } + } @include themed-block(igx-day-label, fluent) { @@ -345,10 +1045,10 @@ $_theme: $fluent; content: ''; position: absolute; background: var-get($_theme, 'week-number-background'); - border-inline: rem(1px) solid var-get($_theme, 'week-number-background'); + border-inline: var(--_date-border-size) var(--_date-border-style) var-get($_theme, 'week-number-background'); inset-block-start: 100%; height: calc($date-view-row-gap + rem(2px)); - width: var-get($_theme, 'size'); + width: var(--_date-size); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss index d7a28839bd2..4ade1f5026d 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_indigo.scss @@ -9,22 +9,23 @@ $_theme: $indigo; $date-view-row-gap: rem(4px); @include themed-block(igx-day-item, indigo) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $border-size: rem(2px); + --_date-border-size: #{rem(2px)}; - @include e(inner) { - border-width: $border-size; + // Week number label + @include mx('label', 'week-number') { + span { + border: 0; - &::after { - border-radius: inherit; - border-width: $border-size; - width: $date-size; - height: $date-size; + &::before { + height: $date-view-row-gap; + inset-block-start: 100%; + inset-inline-start: 0; + border: 0; + } } } - @include e(inner, 'week-number') { + @include mx('date-inner', 'week-number') { border: 0; &::before { @@ -35,415 +36,348 @@ $date-view-row-gap: rem(4px); } } - @include m('selected') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } + // Special date + @include m('special') { + @include e(inner) { + font-weight: 700; - @include mx('selected', 'range') { - @include e(inner) { &::after { - width: $date-size; - height: $date-size; + border-width: var(--_date-border-size); } } } - @include mx('selected', 'special','range') { - @include e(inner) { - &:hover { - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - } + // CURRENT + SELECTED + FIRST/LAST + @include mx('current', 'selected', 'first') { + @include e(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'); - &::after { - border-color: var-get($_theme, 'date-special-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'); } } } - @include mx('selected', 'special', 'range', 'first') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + @include mx('current', 'selected', 'last') { + @include e(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 { - &::after { - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + 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'); } } } - @include mx('selected', 'special', 'range', 'last') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - &:hover { - &::after { - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - } + @include mx('current', 'selected', 'first', 'active') { + @include e(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'); } } - @include m('range') { - @include e(inner) { - height: $date-size; + @include mx('current', 'selected', 'last', 'active') { + @include e(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'); } } - @include m('range-preview') { - border-block-style: dashed; - } - - @include mx('inactive', 'range-preview', ('not': ('disabled', 'selected'))) { + // CURRENT + SELECTED + RANGE + FIRST/LAST + @include mx('current', 'selected', 'range', 'first') { @include e(inner) { - color: var-get($_theme, 'inactive-color'); + 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'); + } } } - @include mx('range', 'selected', 'first') { - &::after { - border-block: calc(#{$border-size} / 2); + @include mx('current', 'selected', 'range', 'last') { + @include e(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'); + } } } - @include mx('range', 'selected', 'last') { - &::after { - border-block: calc(#{$border-size} / 2); + @include mx('current', 'selected', 'range', 'first', 'active') { + @include e(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'); } } - @include mx('range', 'selected', 'special', 'first', 'last') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } + @include mx('current', 'selected', 'range', 'last', 'active') { + @include e(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'); } } - @include mx('range', 'selected', 'current') { - @include e(inner) { - border-color: transparent; - - &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } + // SPECIAL + SELECTED + FIRST/LAST + @include mx('special', 'selected', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-special-background'); &:hover { - border-color: transparent; - - &::after { - border-color: var-get($_theme, 'date-current-hover-border-color'); - } + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-special-hover-background'); } - } - } - - @include mx('range', 'selected', 'current', 'active') { - @include e(inner) { - border-color: transparent; &::after { - border-color: var-get($_theme, 'date-current-focus-border-color'); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include mx('range', 'selected', 'current', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-special-range-foreground'); - border-color: var-get($_theme, 'date-current-border-color'); + @include mx('special', 'selected', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-special-background'); &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - - background: var-get($_theme, 'date-selected-current-range-hover-background'); - border-color: var-get($_theme, 'date-current-hover-border-color'); + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-special-hover-background'); } &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($_theme, 'date-special-range-border-color'); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include mx('range', 'selected', 'current', 'special', 'active', ('not': ('first', 'last'))) { - @include e(inner) { - color: var-get($_theme, 'date-special-focus-foreground'); - - background: var-get($_theme, 'date-selected-current-range-focus-background'); - border-color: var-get($_theme, 'date-current-focus-border-color'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } + @include mx('special', 'selected', 'first', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-special-focus-background'); } } - @include mx('range', 'selected', 'current', 'first') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } - - &:hover { - &::after { - border-color: var-get($_theme, 'date-current-hover-border-color'); - } - } + @include mx('special', 'selected', 'last', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-special-focus-background'); } } - @include mx('range', 'selected', 'current', 'last') { - @include e(inner) { + // SPECIAL + SELECTED (not range, preview) + @include mx('special', 'selected', ('not': ('range', 'preview'))) { + @include e(inner) { &::after { - border-color: var-get($_theme, 'date-current-border-color'); - } - - &:hover { - &::after { - border-color: var-get($_theme, 'date-current-hover-border-color'); - } + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include mx('range', 'selected', 'current', 'first', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - background: var-get($_theme, 'date-selected-background'); + // SPECIAL + CURRENT + RANGE + @include mx('special', 'current') { + @include e(inner) { + border-radius: var-get($_theme, 'date-current-border-radius'); &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($_theme, 'date-selected-special-border-color'); + width: calc(var(--_date-inner-size) - #{rem(4px)}); + height: calc(var(--_date-inner-size) - #{rem(4px)}); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } + } + } - &:hover { - color: var-get($_theme, 'date-selected-hover-foreground'); - background: var-get($_theme, 'date-selected-hover-background'); + @include mx('special', 'current', 'range') { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - // stylelint-disable-next-line - &::after { - border-color: var-get($_theme, 'date-selected-special-hover-border-color'); - } + &:hover { + color: var-get($_theme, 'date-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('range', 'selected', 'current', 'last', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - background: var-get($_theme, 'date-selected-background'); + @include mx('special', 'current', 'range', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } + } - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + @include mx('special', 'current', 'range', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-special-range-foreground'); + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); &:hover { - color: var-get($_theme, 'date-selected-hover-foreground'); - background: var-get($_theme, 'date-selected-hover-background'); - - // stylelint-disable-next-line - &::after { - border-color: var-get($_theme, 'date-selected-special-hover-border-color'); - } + color: var-get($_theme, 'date-special-range-hover-foreground'); + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('range', 'selected', 'current', 'first', 'special', 'active') { - @include e(inner) { - color: var-get($_theme, 'date-selected-focus-foreground') !important; - background: var-get($_theme, 'date-selected-focus-background') !important; - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } + @include mx('special', 'current', 'range', 'active', ('not': ('first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-special-range-focus-foreground'); + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('range', 'selected', 'current', 'last', 'special', 'active') { - @include e(inner) { - color: var-get($_theme, 'date-selected-focus-foreground') !important; - background: var-get($_theme, 'date-selected-focus-background') !important; + @include mx('special', 'current', 'range', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + &:hover { + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include m('current', $not: 'selected') { - @include e(inner) { - background: var-get($_theme, 'date-current-background'); + @include mx('special', 'current', 'range', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); &:hover { - background: var-get($_theme, 'date-current-hover-background'); - } - - &::after { - width: $date-size; - height: $date-size; + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } - @include mx('current', 'selected', 'special') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-selected-special-border-color'); - } + @include mx('special', 'current', 'range', 'active', 'first') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + } + } - &:hover { - &::after { - border-color: var-get($_theme, 'date-selected-special-hover-border-color'); - } - } + @include mx('special', 'current', 'range', 'active', 'last') { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } } - @include mx('current', 'selected', 'special', 'active') { - @include e(inner) { + // SPECIAL + CURRENT (not range) + @include mx('special', 'current', ('not': ('range'))) { + @include e(inner) { &::after { - border-color: var-get($_theme, 'date-selected-special-focus-border-color'); + width: calc(var(--_date-inner-size) - #{rem(4px)}); + height: calc(var(--_date-inner-size) - #{rem(4px)}); + border-radius: calc(var-get($_theme, 'date-special-border-radius') - var(--_date-border-size)); } } } - @include m(special) { - @include e(inner) { - font-weight: 700; + @include mx('special', 'current', 'active', ('not': ('range'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); } } - @include mx('special', 'current', ('not': 'selected')) { - @include e(inner) { + @include mx('special', 'current', ('not': ('selected', 'range'))) { + @include e(inner) { + color: var-get($_theme, 'date-special-foreground'); background: var-get($_theme, 'date-current-background'); border-color: var-get($_theme, 'date-current-border-color'); + &::after { + border-color: var-get($_theme, 'date-special-border-color'); + } + &:hover { color: var-get($_theme, 'date-special-hover-foreground'); background: var-get($_theme, 'date-current-hover-background'); border-color: var-get($_theme, 'date-current-hover-border-color'); - } - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - } - } - - @include mx('special', 'current', 'selected') { - @include e(inner) { - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); - } - } - } - - @include mx('special', 'current', 'active') { - @include e(inner) { - //color: var-get($_theme, 'date-special-focus-foreground'); - //background: var-get($_theme, 'date-current-focus-background'); - //border-color: var-get($_theme, 'date-current-focus-border-color'); - // - //&:hover { - // color: var-get($_theme, 'date-special-hover-foreground'); - // background: var-get($_theme, 'date-current-hover-background'); - // border-color: var-get($_theme, 'date-current-hover-border-color'); - //} - - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + &::after { + border-color: var-get($_theme, 'date-special-hover-border-color'); + } } } } - @include mx('special', 'current', 'active', 'range') { - @include e(inner) { + @include mx('special', 'current', 'active', ('not': ('selected', 'range'))) { + @include e(inner) { color: var-get($_theme, 'date-special-focus-foreground'); background: var-get($_theme, 'date-current-focus-background'); border-color: var-get($_theme, 'date-current-focus-border-color'); - &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - background: var-get($_theme, 'date-current-hover-background'); - border-color: var-get($_theme, 'date-current-hover-border-color'); - } - &::after { - width: calc($date-inner-size - #{rem(4px)}); - height: calc($date-inner-size - #{rem(4px)}); + border-color: var-get($_theme, 'date-special-focus-border-color'); } } } - @include mx('first', 'range-preview') { - &::after { - border-width: calc(#{$border-size} / 2); - width: calc(50% + #{rem(1px)}); - border-inline-color: transparent; - border-style: dashed; - } - } + @include mx('special', 'current', 'selected', ('not': ('range'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + border-color: var-get($_theme, 'date-selected-current-border-color'); - @include mx('last', 'range-preview') { - &::after { - border-width: calc(#{$border-size} / 2); - width: calc(50% + #{rem(1px)}); - border-inline-color: transparent; - border-style: dashed; - } - } + &::after { + border-color: var-get($_theme, 'date-selected-special-border-color'); + } - @include mx('disabled', 'current', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-special-foreground'); - } - } + &:hover { + color: var-get($_theme, 'date-selected-special-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); - @include mx('disabled', 'single', 'current', 'special',) { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); + &::after { + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } + } } } - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); - } - } + @include mx('special', 'current', 'selected', 'active', ('not': ('range'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-special-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); + &::after { + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); + } } } } @@ -470,10 +404,10 @@ $date-view-row-gap: rem(4px); content: ''; position: absolute; background: var-get($_theme, 'week-number-background'); - border-inline: rem(1px) solid var-get($_theme, 'week-number-background'); + border-inline: var(--_date-border-size) var(--_date-border-style) var-get($_theme, 'week-number-background'); inset-block-start: 100%; height: $date-view-row-gap; - width: var-get($_theme, 'size'); + width: var(--_date-size); inset-inline-start: 0; border: 0; } diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss index 133612a7af0..0260309c1d2 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_material.scss @@ -16,318 +16,18 @@ $_theme: $material; } @include themed-block(igx-day-item, material) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $date-height: $date-size; - $border-size: rem(1px); - - @include e(inner) { - border-width: $border-size; - - &::after { - border-radius: inherit; - border-width: $border-size; - width: $date-size; - height: $date-size; - } - } - - @include m(selected) { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - - @include mx('selected', 'range') { - @include e(inner) { - border-inline-color: transparent; - - &::after { - width: $date-size; - height: $date-size; - } - } - } - - @include mx('special','range') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-special-range-border-color'); - } - - &:hover { - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - } - } - } - - @include m(range) { - @include e(inner) { - height: $date-size; - } - } - - @include m(range-preview) { - border-block-style: dashed; - } - - @include mx('inactive', 'range-preview', ('not': ('disabled', 'selected'))) { - @include e(inner) { - color: var-get($_theme, 'inactive-color'); - } - } - - @include mx('range', 'selected', 'first') { - &::after { - border-width: $border-size; - } - } - - @include mx('range', 'selected', 'last') { - &::after { - border-width: $border-size; - } - } - - @include mx('range', 'selected', 'special', 'first', 'last') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('range', 'selected', 'current') { - @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-border-color'); - - &:hover { - border-color: var-get($_theme, 'date-selected-current-hover-border-color'); - } - } - } - - @include mx('range', 'selected', 'current', 'active') { - @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-focus-border-color'); - } - } - - @include mx('range', 'selected', 'current', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-special-range-foreground'); - - &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } - } - - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-special-range-border-color'); - } - } - } - - @include mx('range', 'selected', 'current', 'special', 'active', ('not': 'first')) { - @include e(inner) { - color: var-get($_theme, 'date-special-focus-foreground'); - } - } - - @include mx('range', 'selected', 'current', 'first', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('range', 'selected', 'current', 'last', 'special') { - @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include m(current) { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - - @include mx('first', 'range-preview') { - &::after { - width: calc(50% + #{rem(1px)}); - border-width: $border-size; - border-inline-color: transparent; - border-style: dashed; - } - } - - @include mx('last', 'range-preview') { - &::after { - width: calc(50% + #{rem(1px)}); - border-width: $border-size; - border-inline-color: transparent; - border-style: dashed; - } - } - - @include mx('first', 'range-preview', 'special') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('last', 'range-preview', 'special') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('first', 'range-preview', 'special', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - - &:hover { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - } - - @include mx('last', 'range-preview', 'special', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - - &:hover { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } - } - } - } - - @include mx('first', 'range-preview', 'special', 'active') { - @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-special-border-color'); - } - } - } - - @include mx('last', 'range-preview', 'special', 'active') { + @include mx('selected', 'first', 'last') { @include e(inner) { &::after { - border-color: var-get($_theme, 'date-special-border-color'); + width: var(--_date-inner-size); + height: var(--_date-inner-size); } } } - - @include mx('first', 'range-preview', 'special', 'active', 'selected') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('last', 'range-preview', 'special', 'active', 'selected') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-foreground'); - } - } - } - - @include mx('first', 'range-preview', 'special', 'active', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('last', 'range-preview', 'special', 'active', 'current') { - @include e(inner) { - width: $date-size; - height: $date-size; - } - } - - @include mx('range', 'selected', 'special', 'first') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - } - } - - @include mx('range', 'selected', 'special', 'last') { - @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-selected-special-border-color'); - } - } - } - - @include mx('current', 'range', 'disabled') { - @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); - } - } - - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); - } - } - - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); - } - } } @include themed-block(igx-day-label, material) { - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); $date-view-row-gap: rem(4px); - $date-height: $date-size; - $border-size: rem(1px); @include m(week-number) { span { @@ -341,7 +41,7 @@ $_theme: $material; border-inline: rem(1px) solid var-get($_theme, 'week-number-background'); inset-block-start: 100%; height: calc($date-view-row-gap + rem(2px)); - width: $date-size; + width: var(--_date-size); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss index 51356eb184d..7c2a215825a 100644 --- a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss +++ b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_material.scss @@ -9,50 +9,50 @@ $_theme: $material; @include themed-block(igx-calendar-view-item, material) { @include m('current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); } } } @include mx('current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var(--content-background), + box-shadow: 0 0 0 rem(1px) var(--content-background), 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); } } @include m('selected') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); } } } @include mx('selected', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); } } @include mx('selected', 'current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); } } } @include mx('selected', 'current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); } } } diff --git a/src/app/calendar/calendar.sample.html b/src/app/calendar/calendar.sample.html index 2696e3bde7c..ed2d5f34757 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 c8b94609609..257bc48e875 100644 --- a/src/app/calendar/calendar.sample.ts +++ b/src/app/calendar/calendar.sample.ts @@ -150,7 +150,7 @@ export class CalendarSampleComponent implements OnInit { label: 'Show Week Numbers', control: { type: 'boolean', - defaultValue: false + defaultValue: true } }, monthsViewNumber: { @@ -244,28 +244,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 1b2af69bd5fee42dfac5ed5cdbd2a349282594c5 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Fri, 5 Dec 2025 16:38:25 +0200 Subject: [PATCH 2/5] fix(calendar): update styles for bootstrap theme to match master branch output --- .../days-view/themes/shared/_bootstrap.scss | 379 ++++++++++++------ .../themes/shared/_bootstrap.scss | 18 +- 2 files changed, 260 insertions(+), 137 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss index 6d0c7af4dae..741356043e8 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss @@ -67,282 +67,403 @@ $_theme: $bootstrap; } @include themed-block(igx-day-item, bootstrap) { - $cal-picker-padding: rem(8px); - $date-size: var-get($_theme, 'size'); - $date-inner-size: var-get($_theme, 'inner-size'); - $date-height: $date-size; - $border-size: rem(1px); + // special + @include m('special') { + @include e(inner) { + border-radius: var-get($_theme, 'date-border-radius'); - @include e(inner) { - border-width: $border-size; + &::after { + border-radius: var-get($_theme, 'date-special-border-radius'); + } + } + } - &::after { - border-width: $border-size; - border-radius: inherit; - width: $date-size; - height: $date-size; + @include mx('special', 'first') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include e(inner, 'week-number') { - // Important is needed in order to override the typography styles - font-style: italic !important; + @include mx('special', 'last') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } } - @include m('selected') { + @include mx('special', 'range', ('not': ('range-preview', 'current', 'first', 'last'))) { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; + border-color: transparent; + + &:hover { + border-color: var-get($_theme, 'date-hover-border-color'); } } } - @include mx('selected', 'range') { + @include mx('special', 'range', 'active', ('not': ('range-preview', 'current', 'first', 'last'))) { @include e(inner) { - &::after { - width: $date-size; - height: $date-size; - } + border-color: var-get($_theme, 'date-focus-border-color'); } } - @include mx('selected', 'special','range') { + // current + @include mx('current', 'first', 'last') { @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-special-border-color'); - } + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('selected', 'special', 'active', 'range', ('not': ('first', 'last'))) { + @include mx('current', 'special', ('not': ('first', 'last'))) { @include e(inner) { + color: var-get($_theme, 'date-current-foreground'); + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + border-radius: var-get($_theme, 'date-current-border-radius'); + + &:hover { + color: var-get($_theme, 'date-current-hover-foreground'); + background: var-get($_theme, 'date-current-hover-background'); + border-color: var-get($_theme, 'date-current-hover-border-color'); + } + &::after { - border-color: var-get($_theme, 'date-special-border-color'); + width: var-get($_theme, 'inner-size'); + height: var-get($_theme, 'inner-size'); } } } - @include m('range') { + @include mx('current', 'special', 'active', ('not': ('first', 'last'))) { @include e(inner) { - height: $date-size; + 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'); } } - @include m('range-preview') { - background: var-get($_theme, 'date-selected-range-background'); - - &::after { - background: var-get($_theme, 'date-selected-range-background'); - } - + @include mx('current', 'special', 'range', ('not': ('first', 'last'))) { @include e(inner) { + color: var-get($_theme, 'date-selected-current-range-foreground'); + background: var-get($_theme, 'date-selected-current-range-background'); + border-color: var-get($_theme, 'date-current-border-color'); + &:hover { - color: var-get($_theme, 'date-selected-foreground'); + color: var-get($_theme, 'date-selected-current-range-hover-foreground'); + background: var-get($_theme, 'date-selected-current-range-hover-background'); + border-color: var-get($_theme, 'date-current-hover-border-color'); } } } - @include mx('range-preview', 'current') { + @include mx('current', 'special', 'range', 'active', ('not': ('first', 'last'))) { @include e(inner) { - color: var-get($_theme, 'date-selected-current-range-foreground'); - background: var-get($_theme, 'date-selected-current-range-background'); + color: var-get($_theme, 'date-selected-current-range-focus-foreground'); + background: var-get($_theme, 'date-selected-current-range-focus-background'); + border-color: var-get($_theme, 'date-current-focus-border-color'); } } - @include mx('range', 'selected') { + @include mx('current', 'special', 'selected', ('not': ('range', 'first', 'last'))) { @include e(inner) { - border-inline-color: transparent; + color: var-get($_theme, 'date-selected-current-foreground'); + background: var-get($_theme, 'date-selected-current-background'); + + &:hover { + color: var-get($_theme, 'date-selected-current-hover-foreground'); + background: var-get($_theme, 'date-selected-current-hover-background'); + } } } - @include mx('range', 'selected', 'first') { - &::after { - border-width: $border-size; + @include mx('current', 'special', 'selected', 'active', ('not': ('range', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-current-focus-foreground'); + background: var-get($_theme, 'date-selected-current-focus-background'); } } - @include mx('range', 'selected', 'last') { + // range-preview + @include m('range-preview') { + color: var-get($_theme, 'date-selected-range-foreground'); + background: var-get($_theme, 'date-selected-range-background'); + border-block-style: solid; + &::after { - border-width: $border-size; + background: var-get($_theme, 'date-selected-range-background'); } - } - @include mx('range', 'selected', 'special', 'first', 'last') { @include e(inner) { - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: transparent; + + &:hover { + color: var-get($_theme, 'date-selected-range-foreground'); + border-color: transparent; } } } - @include mx('range', 'selected', 'current') { + @include mx('range-preview', 'first') { + background: transparent; + + &::after { + width: 50%; + border-style: solid; + border-inline: 0; + } + @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-border-color'); + color: var-get($_theme, 'date-selected-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); &:hover { - border-color: var-get($_theme, 'date-selected-current-hover-border-color'); + color: var-get($_theme, 'date-selected-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); + } + + &::after { + width: var-get($_theme, 'inner-size'); + height: var-get($_theme, 'inner-size'); } } } - @include mx('range', 'selected', 'current', 'active') { - @include e(inner) { - border-color: var-get($_theme, 'date-selected-current-focus-border-color'); + @include mx('range-preview', 'last') { + background: transparent; + + &::after { + width: 50%; + border-style: solid; + border-inline: 0; } - } - @include mx('range', 'selected', 'current', 'special') { @include e(inner) { - color: var-get($_theme, 'date-special-range-foreground'); + color: var-get($_theme, 'date-selected-foreground'); + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); &:hover { - color: var-get($_theme, 'date-special-hover-foreground'); - - &::after { - border-color: var-get($_theme, 'date-special-hover-border-color'); - } + color: var-get($_theme, 'date-selected-hover-foreground'); + background: var-get($_theme, 'date-selected-hover-background'); + border-color: var-get($_theme, 'date-selected-hover-border-color'); } &::after { - width: $date-inner-size; - height: $date-inner-size; - border-color: var-get($_theme, 'date-special-range-border-color'); + width: var-get($_theme, 'inner-size'); + height: var-get($_theme, 'inner-size'); } } } - @include mx('range', 'selected', 'current', 'first', 'special') { + @include mx('range-preview', 'first', 'last') { @include e(inner) { color: var-get($_theme, 'date-selected-foreground'); - - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } + background: var-get($_theme, 'date-selected-background'); + border-color: var-get($_theme, 'date-selected-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include mx('range', 'selected', 'current', 'last', 'special') { + @include mx('range-preview', 'first', 'active') { @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); + color: var-get($_theme, 'date-selected-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } - &::after { - border-color: var-get($_theme, 'date-selected-foreground'); - } + @include mx('range-preview', 'last', 'active') { + @include e(inner) { + color: var-get($_theme, 'date-selected-focus-foreground'); + background: var-get($_theme, 'date-selected-focus-background'); + border-color: var-get($_theme, 'date-selected-focus-border-color'); + border-radius: var-get($_theme, 'date-range-border-radius'); } } - @include m('current') { + // range-preview + current + @include mx('range-preview', 'current') { @include e(inner) { - &::after { - width: $date-inner-size; - height: $date-inner-size; - } + color: var-get($_theme, 'date-current-foreground'); + background: var-get($_theme, 'date-current-background'); + border-color: var-get($_theme, 'date-current-border-color'); + &:hover { + color: var-get($_theme, 'date-current-hover-foreground'); + background: var-get($_theme, 'date-current-hover-background'); + } } } - @include m('special') { + @include mx('range-preview', 'current', 'active') { @include e(inner) { - &::after { - border-radius: $date-size; - } + color: var-get($_theme, 'date-current-focus-foreground'); + background: var-get($_theme, 'date-current-focus-background'); } } - @include mx('first', 'range-preview') { - background: transparent; + @include mx('range-preview', 'current', 'first') { + @include e(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: 50%; - border-width: $border-size; - border-inline: 0; - border-style: solid; + &: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'); + } } + } + @include mx('range-preview', 'current', 'last') { @include e(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'); + + &: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'); + } } } - @include mx('last', 'range-preview') { - background: transparent; - - &::after { - width: 50%; - border-width: $border-size; - border-inline: 0; - border-style: solid; + @include mx('range-preview', 'current', 'active', 'first') { + @include e(inner) { + 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'); } + } + @include mx('range-preview', 'current', 'active', 'last') { @include e(inner) { - color: var-get($_theme, 'date-selected-foreground'); - background: var-get($_theme, 'date-selected-background'); + 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'); } } - @include mx('first', 'range-preview', 'special') { + // range-preview + special + @include mx('range-preview', 'special', 'first') { @include e(inner) { &::after { width: var-get($_theme, 'inner-size'); height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-border-color'); + } + + &:hover { + &::after { + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } } } } - @include mx('last', 'range-preview', 'special') { + @include mx('range-preview', 'special', 'last') { @include e(inner) { &::after { width: var-get($_theme, 'inner-size'); height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-border-color'); + } + + &:hover { + &::after { + border-color: var-get($_theme, 'date-selected-special-hover-border-color'); + } } } } - @include mx('first', 'range', 'special') { + @include mx('range-preview', 'special', 'active', 'first') { @include e(inner) { &::after { - width: var-get($_theme, 'inner-size'); - height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); } } } - @include mx('last', 'range', 'special') { + @include mx('range-preview', 'special', 'active', 'last') { @include e(inner) { &::after { - width: var-get($_theme, 'inner-size'); - height: var-get($_theme, 'inner-size'); - border-color: var-get($_theme, 'date-selected-foreground'); + border-color: var-get($_theme, 'date-selected-special-focus-border-color'); } } } - @include mx('disabled', 'range-preview') { + // range-preview + weekend + @include mx('range-preview', 'weekend', ('not': ('special', 'current', 'first', 'last'))) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($_theme, 'date-selected-range-hover-foreground'); + } } } - @include mx('disabled', 'special', 'range') { + @include mx('range-preview', 'weekend', 'active', ('not': ('special', 'current', 'first', 'last'))) { @include e(inner) { - color: var-get($_theme, 'date-disabled-range-foreground'); + color: var-get($_theme, 'date-selected-range-focus-foreground'); } } - @include mx('range', 'selected', 'first', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); + // range-preview + inactive + @include mx('range-preview', 'inactive', ('not': ('special', 'current', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-range-foreground'); + + &:hover { + color: var-get($_theme, 'date-selected-range-hover-foreground'); + } } } - @include mx('range', 'selected', 'last', 'disabled') { - &::before { - background: var-get($_theme, 'content-background'); + @include mx('range-preview', 'inactive', 'active', ('not': ('special', 'current', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-selected-range-focus-foreground'); + } + } + + // range + current + @include mx('range', 'current', 'first') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + @include mx('range', 'current', 'last') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + // range + special + @include mx('range', 'special', 'first') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + // range + special + @include mx('range', 'special', 'last') { + @include e(inner) { + border-radius: var-get($_theme, 'date-range-border-radius'); + } + } + + // disabled + range-preview + @include mx('disabled', 'range-preview', ('not': ('special', 'current', 'first', 'last'))) { + @include e(inner) { + color: var-get($_theme, 'date-disabled-range-foreground'); } } } diff --git a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss index 41d365d02c4..9de44e9e2dc 100644 --- a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_bootstrap.scss @@ -11,47 +11,49 @@ $_theme: $bootstrap; @include themed-block(igx-calendar-view-item, bootstrap) { @include m('current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); } } } @include mx('current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); } } @include m('selected') { @include e(inner) { + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); + &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); } } } @include mx('selected', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); } } @include mx('selected', 'current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); } } } @include mx('selected', 'current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); } } } From ae87110b070ad2ffa0538adf7eb95f1a55afc62b Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 8 Dec 2025 12:55:11 +0200 Subject: [PATCH 3/5] fix(calendar): remove inset from box-shadow in fluent theme styles --- .../years-months/themes/shared/_fluent.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss index 06b0fddde91..acc5a55bb82 100644 --- a/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/calendar/shared-themes/years-months/themes/shared/_fluent.scss @@ -11,47 +11,49 @@ $_theme: $fluent; @include themed-block(igx-calendar-view-item, fluent) { @include m('current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-hover-color'); } } } @include mx('current', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-current-outline-focus-color'); } } @include m('selected') { @include e(inner) { + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-outline-color'); + &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-hover-outline-color'); } } } @include mx('selected', 'active') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-focus-outline-color'); } } @include mx('selected', 'current') { @include e(inner) { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-color'); &:hover { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-hover-color'); } } } @include mx('selected', 'current', 'active') { .igx-calendar-view__item-inner { - box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); + box-shadow: 0 0 0 rem(1px) var-get($_theme, 'ym-selected-current-outline-focus-color'); } } } From 6d06e1f8fe1c5ea04b678a457cb970b991aa97e2 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Mon, 8 Dec 2025 13:01:39 +0200 Subject: [PATCH 4/5] chore(deps): bump igniteui-theming to v23.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 26a20299fe4..d4924b07717 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^23.0.0", + "igniteui-theming": "^23.2.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", From a3b3a6f8c08945bfa388ff1017b1f95b777946c7 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 11 Dec 2025 09:16:52 +0200 Subject: [PATCH 5/5] fix(calendar): update Bootstrap theme border colors in days-view styles --- .../lib/calendar/days-view/themes/shared/_bootstrap.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss index 741356043e8..3fb39730f7c 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/calendar/days-view/themes/shared/_bootstrap.scss @@ -145,12 +145,12 @@ $_theme: $bootstrap; @include e(inner) { color: var-get($_theme, 'date-selected-current-range-foreground'); background: var-get($_theme, 'date-selected-current-range-background'); - border-color: var-get($_theme, 'date-current-border-color'); + border-color: var-get($_theme, 'date-selected-current-border-color'); &:hover { color: var-get($_theme, 'date-selected-current-range-hover-foreground'); background: var-get($_theme, 'date-selected-current-range-hover-background'); - border-color: var-get($_theme, 'date-current-hover-border-color'); + border-color: var-get($_theme, 'date-selected-current-hover-border-color'); } } } @@ -159,7 +159,7 @@ $_theme: $bootstrap; @include e(inner) { color: var-get($_theme, 'date-selected-current-range-focus-foreground'); background: var-get($_theme, 'date-selected-current-range-focus-background'); - border-color: var-get($_theme, 'date-current-focus-border-color'); + border-color: var-get($_theme, 'date-selected-current-focus-border-color'); } }