fix(calendar): range radius (#15690)

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -393,6 +393,18 @@
             @extend %date-last-preview-special !optional;
         }
 
+        @include e(date, $mods: ('first', 'range-preview', 'active')) {
+            @extend %date-first-preview-active !optional;
+        }
+
+        @include e(date, $mods: ('last', 'range-preview', 'active')) {
+            @extend %date-last-preview-active !optional;
+        }
+
+        @include e(date, $mods: ('first', 'last', 'selected')) {
+            @extend %date-first-last-selected !optional;
+        }
+
         @include e(date, $mods: ('first', 'range-preview', 'special', 'current')) {
             @extend %date-first-preview-special-current !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -1543,7 +1543,9 @@
     %date-selected-special-active {
         %date-inner {
             &::after {
-                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
+                }
             }
         }
     }
@@ -1606,7 +1608,9 @@
     %date-selected-special-current-first-last {
         %date-inner {
             &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -1779,7 +1783,9 @@
     %date-special-current-selected-active {
         %date-inner {
             &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -1852,6 +1858,16 @@
         }
     }
 
+    @if $variant == 'fluent' {
+        %date-selected-current-special {
+            %date-inner {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-current-background');
+                }
+            }
+        }
+    }
+
     %date-inactive {
         cursor: default;
 
@@ -2007,7 +2023,7 @@
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
         %date-inner {
-            @if not $bootstrap-theme {
+            @if not $bootstrap-theme and not $variant == 'fluent' {
                 color: var-get($theme, 'date-special-focus-foreground');
             }
 
@@ -2157,7 +2173,6 @@
             position: absolute;
             height: $date-size;
             width: $date-size;
-            border-radius: var-get($theme, 'date-border-radius');
         }
     }
 
@@ -2183,7 +2198,32 @@
             &::after {
                 width: $date-inner-size;
                 height: $date-inner-size;
-                border-color: var-get($theme, 'date-selected-special-border-color');
+
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
+            }
+        }
+    }
+
+    @if $variant == 'fluent' {
+        %date-first-preview-active {
+            %date-inner {
+                background: transparent;
+                border-inline-end-color: transparent;
+            }
+        }
+
+        %date-last-preview-active {
+            %date-inner {
+                background: transparent;
+                border-inline-start-color: transparent;
+            }
+        }
+
+        %date-first-last-selected {
+            %date-inner {
+                background: transparent;
             }
         }
     }
@@ -2303,24 +2343,61 @@
                 content: '';
                 position: absolute;
                 height: $date-size;
-                width: calc($date-size / 2 + #{$border-size});
+                width: $date-size;
                 border: rem(1px) solid var-get($theme, 'date-range-border-color');
                 z-index: 3;
                 pointer-events: none;
             }
         }
 
         %date-range-selected-first {
+            %date-inner {
+                border-start-end-radius: var-get($theme, 'date-border-radius');
+                border-end-end-radius: var-get($theme, 'date-border-radius');
+            }
+
             &::before {
-                inset-inline-end: calc(50% - #{$border-size});
                 border-inline-end-color: transparent;
+                border-start-start-radius: var-get($theme, 'date-range-border-radius');
+                border-end-start-radius: var-get($theme, 'date-range-border-radius');
             }
         }
 
         %date-range-selected-last {
+            %date-inner {
+                border-start-start-radius: var-get($theme, 'date-border-radius');
+                border-end-start-radius: var-get($theme, 'date-border-radius');
+            }
+
             &::before {
-                inset-inline-start: calc(50% - #{$border-size});
                 border-inline-start-color: transparent;
+                border-start-end-radius: var-get($theme, 'date-range-border-radius');
+                border-end-end-radius: var-get($theme, 'date-range-border-radius');
+            }
+        }
+
+
+        %date-first-preview {
+            %date-inner {
+                border-start-start-radius: var-get($theme, 'date-range-border-radius');
+                border-end-start-radius: var-get($theme, 'date-range-border-radius');
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
+            }
+        }
+
+        %date-last-preview {
+            %date-inner {
+                border-start-end-radius: var-get($theme, 'date-range-border-radius');
+                border-end-end-radius: var-get($theme, 'date-range-border-radius');
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
+            }
+        }
+
+        %date-first-last {
+            %date-inner {
+                border-radius: var-get($theme, 'date-range-border-radius');
             }
         }
     }