@progress/kendo-theme-fluent 5.8.2-dev.4 → 5.8.2-dev.6

package/scss/skeleton/_theme.scss

@@ -10,8 +10,8 @@
     }
 
     // Wave animation
-    .k-skeleton-wave  .k-skeleton::after,
-    .k-skeleton-wave .k-skeleton::after {
+    .k-skeleton-wave .k-skeleton::after,
+    .k-skeleton-wave.k-skeleton::after {
         background-image: linear-gradient(
             to right,
             transparent,

package/scss/slider/_variables.scss

@@ -103,7 +103,7 @@ $kendo-slider-thumb-active-bg: $kendo-slider-thumb-hover-bg !default;
 $kendo-slider-thumb-active-text: inherit !default;
 /// The active border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-active-border: $kendo-slider-thumb-hover-border !default;
+$kendo-slider-thumb-active-border: get-theme-color-var( primary-130 ) !default;
 /// The active gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-active-gradient: transparent !default;
@@ -116,7 +116,7 @@ $kendo-slider-thumb-focus-bg: $kendo-slider-thumb-hover-bg !default;
 $kendo-slider-thumb-focus-text: inherit !default;
 /// The focus border color of the slider thumb.
 /// @group slider
-$kendo-slider-thumb-focus-border: $kendo-slider-thumb-hover-border !default;
+$kendo-slider-thumb-focus-border: $kendo-slider-thumb-active-border !default;
 /// The focus gradient of the slider thumb.
 /// @group slider
 $kendo-slider-thumb-focus-gradient: transparent !default;

package/scss/timeline/_layout.scss

@@ -24,7 +24,7 @@
         }
 
         ul {
-            margin: 0;
+            margin: 0 0 1px 0;
             padding: 0;
 
             li {

package/scss/timeselector/_layout.scss

@@ -62,6 +62,7 @@
         display: flex;
         position: relative;
         flex: 1 1 auto;
+        overflow: hidden;
     }
 
 
@@ -121,7 +122,7 @@
             }
 
             &::before {
-                top: calc( var( --kendo-time-list-title-spacing, #{$kendo-time-list-title-spacing} ) + var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
+                top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
             }
 
             &::after {
@@ -197,7 +198,7 @@
         width: 0;
         height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
         align-self: center;
-        display: inline-flex;
+        display: var( --kendo-time-list-separator-display, #{$kendo-time-list-separator-display} );
         justify-content: center;
         align-items: center;
         position: relative;

package/scss/timeselector/_variables.scss

@@ -35,6 +35,9 @@ $kendo-time-selector-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
 /// @group time-selector
 $kendo-time-selector-header-border-width: 0px !default;
 
+/// Visibility of the time-selector separator.
+/// @group time-selector
+$kendo-time-list-separator-display: none;
 /// Minimum width of the time-selector columns.
 /// @group time-selector
 $kendo-time-list-width: 4em !default;
@@ -51,7 +54,10 @@ $kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// Line height of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-line-height: var( --kendo-line-height-lg, inherit ) !default;
-$kendo-time-list-title-height: calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
+/// Height of the time-selector titles.
+/// @group time-selector
+$kendo-time-list-title-height: calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
+
 /// Text color of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-text: var( --kendo-subtle-text, inherit ) !default;
@@ -61,14 +67,16 @@ $kendo-time-list-title-focus-text: $kendo-time-selector-text !default;
 
 /// Horizontal padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-x: map-get( $kendo-spacing, 2 ) !default; //$kendo-list-item-padding-x-md
+$kendo-time-list-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-y: map-get( $kendo-spacing, 1 ) !default; //$kendo-list-item-padding-y-md
+$kendo-time-list-item-padding-y: map-get( $kendo-spacing, 1 ) !default;
 
 /// Width of the border of the selected item in the time-selector.
 /// @group time-selector
 $kendo-time-list-highlight-border-width: 1px 0px !default;
+/// Height of the selected item in the time-selector.
+/// @group time-selector
 $kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} ) !default;
 /// Background color of the selected item in the time-selector.
 /// @group time-selector

package/scss/toolbar/_layout.scss

@@ -102,6 +102,13 @@
             align-items: center;
         }
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            outline-width: var( --kendo-toolbar-item-focus-outline-width, #{$kendo-toolbar-item-focus-outline-width} );
+            outline-style: var( --kendo-toolbar-item-focus-outline-style, #{$kendo-toolbar-item-focus-outline-style} );
+        }
+
     }
 
     // Toolbar group

package/scss/toolbar/_theme.scss

@@ -13,6 +13,12 @@
             border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
         }
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            outline-color: var( --kendo-toolbar-item-focus-outline-color, #{$kendo-toolbar-item-focus-outline-color} );
+        }
+
     }
 
     // Overflow container

package/scss/toolbar/_variables.scss

@@ -38,3 +38,13 @@ $kendo-toolbar-separator-border: get-theme-color-var( neutral-60 ) !default;
 /// The width of the input in the toolbar
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
+
+/// Border width of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-width: 1px !default;
+/// Border style of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-style: solid !default;
+/// Border color of the focused toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-focus-outline-color: get-theme-color-var( neutral-130 ) !default;