diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 3bc10c4d0..9bbf753ec 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -13,11 +13,7 @@ $row-gap: rem(6px); height: var-get($theme, 'size'); border-top: $border-size solid transparent; border-bottom: $border-size solid transparent; -} - -[part~='date'], -[part~='date-inner'] { - border-radius: var-get($theme, 'date-border-radius'); + border-radius: 0; } [part~='date-inner'], @@ -81,6 +77,7 @@ $row-gap: rem(6px); [part~='date-inner'] { width: var-get($theme, 'size'); height: var-get($theme, 'size'); + border-radius: var-get($theme, 'date-border-radius'); &::after { content: ''; @@ -108,6 +105,7 @@ $row-gap: rem(6px); &[part~='selected'][part~='first'][part~='last'] { background: transparent; border-color: var-get($theme, 'date-range-preview-border-color'); + border-radius: var-get($theme, 'date-range-border-radius'); } &[part~='disabled'] { @@ -146,6 +144,10 @@ $row-gap: rem(6px); color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-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: var-get($theme, 'date-border-radius'); + border-end-end-radius: var-get($theme, 'date-border-radius'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); @@ -167,6 +169,10 @@ $row-gap: rem(6px); color: var-get($theme, 'date-selected-foreground'); background: var-get($theme, 'date-selected-background'); border-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: var-get($theme, 'date-border-radius'); + border-end-start-radius: var-get($theme, 'date-border-radius'); &:hover { color: var-get($theme, 'date-selected-hover-foreground'); @@ -285,7 +291,7 @@ $row-gap: rem(6px); } } - &[part~='selected'][part~='special'] { + &[part~='selected'][part~='special']:not([part~='current']) { &::after { border-color: var-get($theme, 'date-selected-special-border-color'); } @@ -402,7 +408,7 @@ $row-gap: rem(6px); &::before { content: ''; position: absolute; - width: calc(var-get($theme, 'size') / 2 + #{$border-size}); + width: var-get($theme, 'size'); border-block: $border-size solid var-get($theme, 'date-range-border-color'); z-index: 3; pointer-events: none; @@ -411,19 +417,27 @@ $row-gap: rem(6px); &[part~='first'] { &::before { - inset-inline-end: calc(50% - #{$border-size}); + inset-inline-end: initial; border-inline: $border-size solid; border-inline-start-color: var-get($theme, 'date-range-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; } } &[part~='last'] { &::before { - inset-inline-start: calc(50% - #{$border-size}); + inset-inline-start: initial; border-inline: $border-size solid; border-inline-start-color: transparent; border-inline-end-color: 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; } }