@progress/kendo-theme-fluent 12.0.0-dev.0 → 12.0.0-dev.2

package/scss/bubble/_variables.scss

@@ -52,10 +52,10 @@ $kendo-bubble-active-border: $kendo-bubble-active-bg !default;
 $kendo-bubble-focus-bg: k-color(base-subtle) !default;
 /// The border color of the focused Bubble.
 /// @group bubble
-$kendo-bubble-focus-border: $kendo-bubble-focus-bg !default;
+$kendo-bubble-focus-border: k-color(on-base) !default;
 /// The box shadow of the focused Bubble.
 /// @group bubble
-$kendo-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-bubble-focus-shadow: inset 0 0 0 #{$kendo-bubble-border-width} k-color(on-base), inset 0 0 0 calc( #{$kendo-bubble-border-width} * 2 ) k-color(surface) !default;
 
 /// The spacing between content and icon in expandable Bubble.
 /// @group bubble

package/scss/button/_layout.scss

@@ -10,19 +10,11 @@
 
     // Button
     .k-button {
-
-        &:focus::after,
-        &.k-focus::after {
-            content: "";
-            display: block;
-            opacity: 1;
-            position: absolute;
-            border: medium none;
-            border-radius: 0;
-            inset: $kendo-button-focus-offset;
+        &:focus,
+        &.k-focus {
             outline-width: $kendo-button-focus-outline-width;
             outline-style: $kendo-button-focus-outline-style;
-            z-index: 1;
+            outline-offset: calc( (#{$kendo-button-border-width} * 2 ) * -1);
         }
 
         // Fix for focused button with full roundness
@@ -34,6 +26,10 @@
         }
     }
 
+    .k-button-sm {
+        font-weight: $kendo-font-weight-normal;
+    }
+
 
     // Sizing
     @each $size, $size-props in $kendo-button-sizes {
@@ -96,7 +92,6 @@
         &.k-focus::after {
             @include border-radius( inherit );
             inset: $kendo-button-flat-focus-offset;
-            outline-width: $kendo-button-flat-focus-outline-width;
             box-shadow: none;
         }
     }
@@ -115,10 +110,10 @@
             display: block;
             pointer-events: none;
             position: absolute;
-            left: calc(-1 * #{$kendo-button-border-width});
-            right: calc(-1 * #{$kendo-button-border-width});
-            top: calc(-1 * #{$kendo-button-border-width});
-            bottom: calc(-1 * #{$kendo-button-border-width});
+            inset-inline-start: calc(-1 * #{$kendo-button-border-width});
+            inset-inline-end: calc(-1 * #{$kendo-button-border-width});
+            inset-block-start: calc(-1 * #{$kendo-button-border-width});
+            inset-block-end: calc(-1 * #{$kendo-button-border-width});
             z-index: 0;
             transition: opacity .2s ease-in-out;
         }
@@ -127,7 +122,7 @@
         &:hover,
         &.k-hover {
             &::before {
-                opacity: .05;
+                opacity: .03;
             }
         }
 
@@ -139,7 +134,7 @@
             }
 
             &::after {
-                outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
+                // outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
                 opacity: .13;
             }
 
@@ -198,7 +193,7 @@
         &.k-focus::after {
             @include border-radius( inherit );
             inset: $kendo-button-link-focus-offset;
-            outline-width: $kendo-button-link-focus-outline-width;
+            // outline-width: $kendo-button-link-focus-outline-width;
         }
 
         &:focus,
@@ -213,7 +208,7 @@
         &:focus::after,
         &.k-focus::after {
             inset: auto;
-            outline-width: 0;
+            // outline-width: 0;
         }
     }
 }

package/scss/button/_theme.scss

@@ -6,138 +6,149 @@
 @mixin kendo-button--theme() {
 
     @include kendo-button--theme-base();
-
-    .k-button-solid-base {
-
+    .k-button-solid {
         &:focus,
         &.k-focus {
-            color: $kendo-button-focus-text;
-            background-color: $kendo-button-focus-bg;
             border-color: $kendo-button-focus-border;
-            outline-color: $kendo-button-focus-outline;
-
-            &:hover,
-            &.k-hover {
-                color: $kendo-button-focus-hover-text;
-                background-color: $kendo-button-focus-hover-bg;
-                border-color: $kendo-button-focus-hover-border;
-                outline-color: $kendo-button-focus-hover-outline;
-            }
-        }
-
-        &:active,
-        &.k-active {
-            color: $kendo-button-active-text;
-            background-color: $kendo-button-active-bg;
-            border-color: $kendo-button-active-border;
-
-            &:hover,
-            &.k-hover {
-                color: $kendo-button-active-hover-text;
-                background-color: $kendo-button-active-hover-bg;
-                border-color: $kendo-button-active-hover-border;
-            }
+            outline-color: $kendo-button-focus-border;
+            box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border,
+                        inset 0 0 0 calc( #{$kendo-button-border-width} * 2 ) k-color(surface);
         }
+    }
 
+    .k-button-solid-base {
         &.k-selected {
             color: $kendo-button-active-text;
             background-color: $kendo-button-active-bg;
             border-color: $kendo-button-active-border;
-
-            &:hover,
-            &.k-hover {
-                color: $kendo-button-active-hover-text;
-                background-color: $kendo-button-active-hover-bg;
-                border-color: $kendo-button-active-hover-border;
-            }
         }
+    }
 
-        // Disabled state
+    .k-button-flat {
         &:disabled,
         &.k-disabled {
             @include fill(
-                $kendo-button-disabled-text,
-                $kendo-button-disabled-bg,
-                $kendo-button-disabled-border
+                $kendo-button-flat-disabled-text,
+                $kendo-button-flat-disabled-bg,
+                $kendo-button-flat-disabled-border
             );
         }
     }
 
-    .k-button-solid-warning,
-    .k-button-solid-light {
-        &:focus::after,
-        &.k-focus::after {
-            outline-color: k-color(app-surface);
+    .k-button-outline,
+    .k-button-flat,
+    .k-button-clear,
+    .k-button-link {
+        &:focus,
+        &.k-focus {
+            outline-color: $kendo-button-focus-border;
+        }
+
+        &:disabled,
+        &.k-disabled {
+            @include fill(
+                $kendo-button-outline-disabled-text,
+                $kendo-button-outline-disabled-bg,
+                $kendo-button-outline-disabled-border
+            );
         }
     }
 
     @each $theme-color, $color in $kendo-button-theme-colors {
         @if($theme-color != "base") {
             .k-button-flat-#{$theme-color} {
-                color: k-color(#{$theme-color}-on-surface);
                 background-color: initial !important; // stylelint-disable-line declaration-no-important
                 border-color: transparent;
+            }
+
+            .k-button-outline-#{$theme-color} {
+
+                border-color: k-color(#{$theme-color}-on-surface);
 
                 &:hover,
-                &.k-hover {
-                    color: k-color(#{$theme-color}-hover);
-                    background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                    border-color: transparent;
+                &.k-hover,
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    border-color: k-color(#{$theme-color}-on-surface);
                 }
+            }
 
-                &:focus,
-                &.k-focus {
+            .k-button-flat-#{$theme-color},
+            .k-button-outline-#{$theme-color} {
+                color: k-color(#{$theme-color}-on-surface);
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    color: k-color(#{$theme-color}-on-surface);
+                    background-color: color-mix(in srgb, k-color(#{$theme-color}-active) 13%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+
+                &:hover,
+                &.k-hover {
                     color: k-color(#{$theme-color}-on-surface);
-                    background-color: initial !important; // stylelint-disable-line declaration-no-important
-                    border-color: transparent;
-                    outline-color: k-color(#{$theme-color}-subtle-active);
-
-                    &:hover,
-                    &.k-hover {
-                        color: k-color(#{$theme-color}-hover);
-                        background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                        border-color: transparent;
-                        outline-color: k-color(#{$theme-color}-subtle-active);
-                    }
-
-                    &::after {
-                        outline-color: k-color(#{$theme-color}-subtle-active);
-                    }
+                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+            }
+        }
+
+        @if($theme-color == "base") {
+            .k-button-outline-#{$theme-color} {
+                border-color: $kendo-button-border;
+
+                &:hover,
+                &.k-hover {
+                    color: inherit;
+                    background-color: color-mix(in srgb, k-color(on-base) 3%, transparent);
+                    border-color: color-mix( in srgb, k-color(border) 34%, transparent );
                 }
 
                 &:active,
                 &.k-active,
                 &.k-selected {
-                    color: k-color(#{$theme-color}-hover);
-                    background-color: k-color(#{$theme-color}-subtle-hover) !important; // stylelint-disable-line declaration-no-important
-                    border-color: transparent;
-
-                    &:hover,
-                    &.k-hover {
-                        color: k-color(#{$theme-color}-hover);
-                        background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                        border-color: transparent;
-                    }
+                    color: inherit;
+                    background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
+                    border-color: $kendo-button-border;
+                }
+            }
+
+            .k-button-flat-#{$theme-color} {
+                &:hover,
+                &.k-hover {
+                    background-color: color-mix(in srgb, k-color(on-base) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
                 }
             }
         }
 
-        .k-button-clear-#{$theme-color} {
-            color: k-color(#{$theme-color}-on-surface);
-            background-color: transparent !important; // stylelint-disable-line declaration-no-important
-            border-color: transparent;
-            &:focus,
-            &.k-focus {
-                color: k-color(#{$theme-color}-on-surface);
-                background-color: k-color(#{$theme-color}-subtle) !important; // stylelint-disable-line declaration-no-important
-                border-color: transparent;
+        @if($theme-color == "secondary") {
+            .k-button-solid-#{$theme-color} {
+                border-color: currentColor;
+
+                &:hover,
+                &.k-hover,
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    border-color: currentColor;
+                }
+
+                &:focus,
+                &.k-focus {
+                    box-shadow: inset 0 0 0 $kendo-button-border-width $kendo-button-focus-border;
+                }
             }
         }
 
-        .k-button-link-#{$theme-color} {
-            &:focus::after,
-            &.k-focus::after {
-                outline-color: k-color(#{$theme-color}-subtle-active);
+        @if($theme-color == "light") {
+            .k-button-outline-#{$theme-color},
+            .k-button-flat-#{$theme-color},
+            .k-button-clear-#{$theme-color},
+            .k-button-link-#{$theme-color} {
+                &:focus,
+                &.k-focus {
+                    outline-color: k-color(light-on-surface);
+                }
             }
         }
     }
@@ -147,33 +158,4 @@
     .k-button-group[disabled] {
         background-color: inherit;
     }
-
-    .k-disabled,
-    :disabled {
-
-        .k-button-solid {
-            color: $kendo-button-disabled-text;
-            background-color: $kendo-button-disabled-bg;
-            border-color: $kendo-button-disabled-border;
-        }
-
-        .k-button-outline {
-            color: $kendo-button-outline-disabled-text;
-            background-color: $kendo-button-outline-disabled-bg;
-            border-color: $kendo-button-outline-disabled-border;
-        }
-
-        .k-button-flat,
-        .k-button-clear,
-        .k-button-link {
-            color: $kendo-button-flat-disabled-text;
-            background-color: $kendo-button-flat-disabled-bg;
-            border-color: $kendo-button-flat-disabled-border;
-        }
-    }
-
-    .k-button-flat-base.k-disabled {
-        color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
-    }
-
 }

package/scss/button/_variables.scss

@@ -8,43 +8,43 @@ $kendo-button-border-width: var( --kendo-button-border-width, 1px ) !default;
 
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: var( --kendo-button-sm-padding-x, k-spacing(5) ) !default;
+$kendo-button-sm-padding-x: var( --kendo-button-sm-padding-x, k-spacing(2) ) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: var( --kendo-button-md-padding-x, k-spacing(5) ) !default;
+$kendo-button-md-padding-x: var( --kendo-button-md-padding-x, k-spacing(3) ) !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: var( --kendo-button-lg-padding-x, k-spacing(5) ) !default;
+$kendo-button-lg-padding-x: var( --kendo-button-lg-padding-x, k-spacing(4) ) !default;
 
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: var( --kendo-button-sm-padding-y, k-spacing(1) ) !default;
+$kendo-button-sm-padding-y: var( --kendo-button-sm-padding-y, calc( #{k-spacing(0.5)} + 1px ) ) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: var( --kendo-button-md-padding-y, k-spacing(1.5) ) !default;
+$kendo-button-md-padding-y: var( --kendo-button-md-padding-y, calc( #{k-spacing(1)} + 1px ) ) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: var( --kendo-button-lg-padding-y, k-spacing(2) ) !default;
+$kendo-button-lg-padding-y: var( --kendo-button-lg-padding-y, calc( #{k-spacing(2)} + 1px ) ) !default;
 
 /// The font size of the small Button.
 /// @group button
-$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Button.
 /// @group button
 $kendo-button-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Button.
 /// @group button
-$kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
-$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-sm-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Button.
 /// @group button
 $kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Button.
 /// @group button
-$kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-lg-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// The font family of the Button.
 /// @group button
@@ -52,7 +52,7 @@ $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font weight of the Button.
 /// @group button
-$kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-button-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
 
 /// The calculated height of the Button.
 /// @group button
@@ -91,16 +91,9 @@ $kendo-button-sizes: (
     )
 ) !default;
 
-/// The content spacing of the Button.
-/// @group button
-$kendo-button-spacing: var( --kendo-button-spacing, k-spacing(2) ) !default;
-
-/// The offset of the focused Button.
-/// @group button
-$kendo-button-focus-offset: var( --kendo-button-focus-offset, k-spacing(0.5) ) !default;
 /// The Outline width of the focused Button.
 /// @group button
-$kendo-button-focus-outline-width: var( --kendo-button-focus-outline-width, 1px ) !default;
+$kendo-button-focus-outline-width: var( --kendo-button-focus-outline-width, 2px ) !default;
 /// The outline style of the focused Button.
 /// @group button
 $kendo-button-focus-outline-style: var( --kendo-button-focus-outline-style, solid ) !default;
@@ -108,16 +101,10 @@ $kendo-button-focus-outline-style: var( --kendo-button-focus-outline-style, soli
 /// The offset of the flat focused Button.
 /// @group button
 $kendo-button-flat-focus-offset: var( --kendo-button-flat-focus-offset, 1px ) !default;
-/// The outline width of the flat focused Button.
-/// @group button
-$kendo-button-flat-focus-outline-width: var( --kendo-button-flat-focus-outline-width, k-spacing(0.5) ) !default;
 
 /// The offset of the link focused Button.
 /// @group button
 $kendo-button-link-focus-offset: var( --kendo-button-link-focus-offset, 0 ) !default;
-/// The outline width of the flat focused Button.
-/// @group button
-$kendo-button-link-focus-outline-width: var( --kendo-button-link-focus-outline-width, 1px ) !default;
 
 /// The opacity of the pulsing animation for the generating Button.
 /// @group button
@@ -147,7 +134,7 @@ $kendo-button-bg: var( --kendo-button-bg, k-color(base) ) !default;
 $kendo-button-text: var( --kendo-button-text, k-color(on-base) ) !default;
 /// The base border color of the Button.
 /// @group button
-$kendo-button-border: var( --kendo-button-border, k-color(border) ) !default;
+$kendo-button-border: var( --kendo-button-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The base background gradient of the Button.
 /// @group button
 $kendo-button-gradient: linear-gradient( var( --kendo-button-gradient, transparent, transparent ) ) !default;
@@ -163,32 +150,14 @@ $kendo-button-hover-bg: var( --kendo-button-hover-bg, k-color(base-hover) ) !def
 $kendo-button-hover-text: var( --kendo-button-hover-text, k-color(on-base) ) !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: var( --kendo-button-hover-border, k-color(border) ) !default;
+$kendo-button-hover-border: var( --kendo-button-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
 
-/// The base background of the focused Button.
-/// @group button
-$kendo-button-focus-bg: var( --kendo-button-focus-bg, k-color(base) ) !default;
-/// The base text color of the focused Button.
-/// @group button
-$kendo-button-focus-text: var( --kendo-button-focus-text, k-color(on-base) ) !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: var( --kendo-button-focus-border, k-color(border) ) !default;
+$kendo-button-focus-border: var( --kendo-button-focus-border, k-color(border-alt) ) !default;
 /// The base outline color of the focused Button.
 /// @group button
 $kendo-button-focus-outline: var( --kendo-button-focus-outline, k-color(on-base) ) !default;
-/// The base background of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-bg: var( --kendo-button-focus-hover-bg, k-color(base-hover) ) !default;
-/// The base text color of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-text: var( --kendo-button-focus-hover-text, k-color(on-base) ) !default;
-/// The base border color of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-border: var( --kendo-button-focus-hover-border, k-color(border) ) !default;
-/// The base outline color of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-outline: var( --kendo-button-focus-hover-outline, k-color(on-base) ) !default;
 
 /// The base background of the active Button.
 /// @group button
@@ -198,43 +167,34 @@ $kendo-button-active-bg: var( --kendo-button-active-bg, k-color(base-active) ) !
 $kendo-button-active-text: var( --kendo-button-active-text, k-color(on-base) ) !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: var( --kendo-button-active-border, k-color(border) ) !default;
-/// The base background of the active Button when hovered.
-/// @group button
-$kendo-button-active-hover-bg: var( --kendo-button-active-hover-bg, k-color(base-hover) ) !default;
-/// The base text color of the active Button when hovered.
-/// @group button
-$kendo-button-active-hover-text: var( --kendo-button-active-hover-text, k-color(on-base) ) !default;
-/// The base border color of the active Button when hovered.
-/// @group button
-$kendo-button-active-hover-border: var( --kendo-button-active-hover-border, k-color(border) ) !default;
+$kendo-button-active-border: var( --kendo-button-active-border, $kendo-button-border ) !default;
 
 /// The base background of the disabled Button.
 /// @group button
-$kendo-button-disabled-bg: var( --kendo-button-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) ) !default;
+$kendo-button-disabled-bg: var( --kendo-button-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
 /// The base text color of the disabled Button.
 /// @group button
-$kendo-button-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base border color of the disabled Button.
 /// @group button
-$kendo-button-disabled-border: var( --kendo-button-disabled-border, transparent ) !default;
+$kendo-button-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;
 
 /// The base background of the disabled outline Button.
 /// @group button
 $kendo-button-outline-disabled-bg: var( --kendo-button-disabled-bg, initial ) !default;
 /// The base text color of the disabled outline Button.
 /// @group button
-$kendo-button-outline-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-outline-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base border color of the disabled outline Button.
 /// @group button
-$kendo-button-outline-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-outline-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;
 
 /// The base background of the disabled flat Button.
 /// @group button
 $kendo-button-flat-disabled-bg: var( --kendo-button-disabled-bg, initial ) !default;
 /// The base text color of the disabled flat Button.
 /// @group button
-$kendo-button-flat-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-flat-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base border color of the disabled flat Button.
 /// @group button
 $kendo-button-flat-disabled-border: var( --kendo-button-disabled-border, initial ) !default;

package/scss/calendar/_layout.scss

@@ -22,8 +22,18 @@
         text-align: center;
     }
 
+    .k-calendar-th {
+        box-sizing: border-box;
+    }
+
     .k-calendar-td {
         font-size: inherit;
+        padding: $kendo-calendar-cell-padding;
+        box-sizing: border-box;
+
+        &.k-selected {
+            border-width: 1px;
+        }
     }
 
     .k-calendar-header {
@@ -67,11 +77,6 @@
         }
     }
 
-    .k-calendar .k-content.k-scrollable,
-    .k-calendar .k-calendar-content.k-scrollable {
-        @include hide-scrollbar-dir-agnostic();
-    }
-
     .k-calendar-infinite {
         .k-calendar-header {
             margin-inline-start: calc( -1 * #{$kendo-infinite-calendar-view-padding-x} );
@@ -92,63 +97,11 @@
                 flex-direction: column;
             }
         }
-    }
-
-    .k-range-start,
-    .k-range-end,
-    .k-range-mid {
-        position: relative;
 
-        &::before {
-            content: "";
-            position: absolute;
-            inset: 0px;
-            border-style: solid;
+        .k-range-start,
+        .k-range-end {
+            border-radius: $kendo-calendar-range-cell-border-radius;
         }
-
-        &:hover .k-link,
-        &.k-hover .k-link {
-            border-radius: 0;
-        }
-    }
-
-    .k-range-mid::before {
-        border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-inline-width: 0;
-        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( --kendo-calendar-range-border-width, 1px );
-        border-inline-end-width: 0;
-        border-radius: 0;
-
-        @if ( $kendo-enable-rounded ) {
-            border-start-start-radius: $kendo-calendar-cell-border-radius;
-            border-end-start-radius: $kendo-calendar-cell-border-radius;
-        }
-    }
-
-    .k-range-end::before,
-    .k-range-mid:last-child::before {
-        border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-inline-start-width: 0;
-        border-radius: 0;
-
-        @if ( $kendo-enable-rounded ) {
-            border-start-end-radius: $kendo-calendar-cell-border-radius;
-            border-end-end-radius: $kendo-calendar-cell-border-radius;
-        }
-    }
-
-    .k-range-start.k-range-end::before {
-        border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-radius: $kendo-calendar-cell-border-radius;
     }
 
     .k-calendar-navigation::before,