fix(calendar): unscope range selection styles

telerik · Apr 26, 2024 · 214ec7e · 214ec7e
1 parent dcb060b
commit 214ec7e
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 72 deletions.
diff --git a/packages/default/scss/calendar/_layout.scss b/packages/default/scss/calendar/_layout.scss
@@ -449,9 +449,6 @@
         // }
     }
 
-
-
-
     // Multiview calendar
     .k-calendar-range {
         width: auto;
@@ -468,25 +465,34 @@
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start .k-calendar-cell-inner,
-        .k-range-start .k-link {
-            border-color: inherit;
-            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
-        }
-        .k-range-end .k-calendar-cell-inner,
-        .k-range-end .k-link {
+    // Range Selection
+    .k-range-start {
+        border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
+
+        .k-calendar-cell-inner,
+        .k-link {
             border-color: inherit;
-            border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+            border-radius: inherit;
         }
-        .k-range-mid {
+    }
+    .k-range-end {
+        border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+
+        .k-calendar-cell-inner,
+        .k-link {
             border-color: inherit;
-            border-radius: 0;
+            border-radius: inherit;
         }
     }
-
-
-
+    .k-range-mid {
+        border-color: inherit;
+        border-radius: 0;
+    }
+    .k-range-start.k-range-end {
+        border-radius: $kendo-calendar-range-cell-border-radius;
+    }
 
     // RTL
     .k-rtl .k-calendar,
@@ -499,21 +505,14 @@
             @include hide-scrollbar("left");
         }
 
-    }
-
-    .k-rtl .k-calendar-range,
-    [dir="rtl"] .k-calendar-range,
-    .k-calendar-range.k-rtl,
-    .k-calendar-range[dir="rtl"] {
-
-        .k-range-start .k-calendar-cell-inner,
-        .k-range-start .k-link {
+        // Range Selection RTL
+        .k-range-start {
             border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
         }
-        .k-range-end .k-calendar-cell-inner,
-        .k-range-end .k-link {
+        .k-range-end {
             border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
         }
+
     }
 
 }

diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss
@@ -165,11 +165,6 @@
             background-color: $kendo-calendar-range-bg;
         }
 
-        .k-range-start.k-range-end {
-            background-image: none;
-            background-color: transparent;
-        }
-
         .k-range-start,
         .k-range-end {
             .k-calendar-cell-inner {

diff --git a/packages/fluent/scss/calendar/_layout.scss b/packages/fluent/scss/calendar/_layout.scss
@@ -416,60 +416,64 @@
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start,
-        .k-range-end,
-        .k-range-mid {
-
-            position: relative;
+    .k-range-start,
+    .k-range-end,
+    .k-range-mid {
 
-            &::before {
-                content: "";
-                position: absolute;
-                inset: 0px;
-                border-style: solid;
-            }
+        position: relative;
 
-            &:hover .k-link,
-            &.k-hover .k-link {
-                border-radius: 0;
-            }
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0px;
+            border-style: solid;
         }
 
-        .k-range-mid::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-width: 0;
+        &:hover .k-link,
+        &.k-hover .k-link {
             border-radius: 0;
         }
+    }
 
-        .k-range-start::before,
-        .k-range-mid:not(
-            .k-range-start + .k-range-mid,
-            .k-range-mid + .k-range-mid,
-            :last-child
-        )::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-end-width: 0;
-            border-radius: 0;
+    .k-range-mid::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-width: 0;
+        border-radius: 0;
+    }
 
-            @if ( $kendo-enable-rounded ) {
-                border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-                border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            }
+    .k-range-start::before,
+    .k-range-mid:not(
+        .k-range-start + .k-range-mid,
+        .k-range-mid + .k-range-mid,
+        :last-child
+    )::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-end-width: 0;
+        border-radius: 0;
+
+        @if ( $kendo-enable-rounded ) {
+            border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
         }
+    }
 
-        .k-range-end::before,
-        .k-range-mid:last-child::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-start-width: 0;
-            border-radius: 0;
+    .k-range-end::before,
+    .k-range-mid:last-child::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-start-width: 0;
+        border-radius: 0;
 
-            @if ( $kendo-enable-rounded ) {
-                border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-                border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            }
+        @if ( $kendo-enable-rounded ) {
+            border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
         }
+    }
 
+    .k-range-start.k-range-end::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-radius:  var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) ;
     }
 
 

diff --git a/packages/fluent/scss/calendar/_theme.scss b/packages/fluent/scss/calendar/_theme.scss
@@ -235,6 +235,10 @@
         &.k-alt + .k-range-mid.k-hover .k-link {
             --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
         }
+
+        &.k-range-start.k-range-end:hover .k-link {
+            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-end-range-hover-shadow, #{$kendo-calendar-start-end-range-hover-shadow} );
+        }
     }
 
 }
diff --git a/packages/fluent/scss/calendar/_variables.scss b/packages/fluent/scss/calendar/_variables.scss
@@ -280,6 +280,9 @@ $kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 if($kendo-enable-color-
 /// The shadow of the hovered end range selection in the Calendar.
 /// @group calendar
 $kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+/// The shadow of the hovered start-end range selection in the Calendar.
+/// @group calendar
+$kendo-calendar-start-end-range-hover-shadow: inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset -1px 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 
 // Calendar sizes