fix: progressbar doesn't end to the selected step in Safari

telerik · Feb 11, 2021 · 34a7125 · 34a7125
1 parent cbcbd98
commit 34a7125
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/default/scss/stepper/_layout.scss b/packages/default/scss/stepper/_layout.scss
@@ -67,6 +67,7 @@
             transition-property: color, background-color, border-color;
             transition-duration: .4s;
             transition-timing-function: ease-in-out;
+            box-sizing: content-box;
 
             &::after {
                 @include border-radius( 100% );
@@ -126,17 +127,25 @@
 
         // Progressbar
         .k-progressbar {
-            position: absolute;
             pointer-events: none;
             z-index: 0;
             overflow: visible;
         }
+
+        .k-progressbar-horizontal {
+            grid-row: 1 / -1;
+        }
+
+        .k-progressbar-vertical {
+            position: absolute;
+        }
     }
 
 
     // Horizontal
     .k-step-list-horizontal {
         flex-direction: row;
+        grid-row: 1;
 
         .k-step {
             flex: 1 0 auto;
@@ -161,11 +170,10 @@
         & ~ .k-progressbar {
             width: 100%;
             height: $stepper-progressbar-size;
-            top: calc((#{$stepper-indicator-height} + 2 * #{$stepper-indicator-focus-size}) / 2);
+            top: calc(((#{$stepper-indicator-height} + 2 * #{$stepper-indicator-focus-size}) / 2) + #{$stepper-indicator-focus-size} / 2);
         }
     }
 
-
     // Vertical
     .k-step-list-vertical {
         flex-direction: column;