@progress/kendo-theme-fluent 5.8.2-dev.5 → 5.9.0

package/scss/coloreditor/_layout.scss

@@ -25,6 +25,13 @@
             }
         }
 
+        .k-coloreditor .k-colorgradient:focus,
+        .k-coloreditor .k-colorgradient.k-focus {
+            outline: var( --kendo-coloreditor-colorgradient-focus-outline, #{$kendo-coloreditor-colorgradient-focus-outline} ) dotted;
+            outline-offset: var( --kendo-coloreditor-colorgradient-focus-outline-offset, #{$kendo-coloreditor-colorgradient-focus-outline-offset} );
+            border-radius: 0;
+        }
+
         // Header
         .k-coloreditor-header {
             padding-inline: var( --kendo-coloreditor-header-padding-x, #{$kendo-coloreditor-header-padding-x} );

package/scss/coloreditor/_theme.scss

@@ -24,4 +24,9 @@
         );
     }
 
+    .k-coloreditor .k-colorgradient:focus,
+    .k-coloreditor .k-colorgradient.k-focus {
+        box-shadow: none;
+        outline-color: var( --kendo-coloreditor-colorgradient-focus-outline-color, #{$kendo-coloreditor-colorgradient-focus-outline-color} );
+    }
 }

package/scss/coloreditor/_variables.scss

@@ -81,3 +81,13 @@ $kendo-coloreditor-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the color editor footer.
 /// @group coloreditor
 $kendo-coloreditor-footer-padding-x: map-get( $kendo-spacing, 2 ) !default;
+
+/// The color of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
+/// The outline of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline: 2px !default;
+/// The outline offset of the focused colorgradient.
+/// @group coloreditor
+$kendo-coloreditor-colorgradient-focus-outline-offset: 2px !default;

package/scss/core/module-system/_components.scss

@@ -63,6 +63,7 @@ $components: (
     "dateinput",
     "datepicker",
     "timepicker",
+    "timedurationpicker",
     "datetimepicker",
     "daterangepicker",
     "dropdowngrid",

package/scss/gantt/_theme.scss

@@ -165,10 +165,18 @@
         }
     }
 
-    .k-task-delayed .k-task-complete {
-        @include fill(
-            $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
-        );
+    .k-task-delayed {
+        .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
+            );
+        }
+
+        &:hover .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-delayed-hover-bg, #{$kendo-gantt-delayed-hover-bg} )
+            );
+        }
     }
 
     .k-task-advanced {

package/scss/gantt/_variables.scss

@@ -203,6 +203,9 @@ $kendo-gantt-delayed-bg: get-theme-color-var( error-160 ) !default;
 /// Complement background color of the gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-bg-lighter: get-theme-color-var( error-110) !default;
+/// Background hover color of the gantt delayed task.
+/// @group gantt
+$kendo-gantt-delayed-hover-bg: get-theme-color-var( error-190 ) !default;
 
 /// Background color of the gantt advanced task.
 /// @group gantt

package/scss/index.scss

@@ -70,6 +70,7 @@
 @use "dateinput";
 @use "datepicker";
 @use "timepicker";
+@use "timedurationpicker";
 @use "datetimepicker";
 @use "daterangepicker";
 @use "dropdowngrid";
@@ -229,6 +230,7 @@
     @include dateinput.styles();
     @include datepicker.styles();
     @include timepicker.styles();
+    @include timedurationpicker.styles();
     @include datetimepicker.styles();
     @include daterangepicker.styles();
     @include dropdowngrid.styles();

package/scss/list/_layout.scss

@@ -3,6 +3,17 @@
 
 @mixin kendo-list--layout() {
 
+    // List container
+    .k-list-container {
+        display: flex;
+        flex-flow: column nowrap;
+
+        > .k-list {
+            flex: 1;
+            height: 100%;
+        }
+    }
+
     .k-list {
         margin: 0;
         padding: 0;

package/scss/signature/_layout.scss

@@ -19,6 +19,12 @@
                 border-bottom-width: var( --kendo-signature-maximized-line-width, #{$kendo-signature-maximized-line-width} );
             }
         }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: var( --kendo-signature-disabled-opacity, #{$kendo-signature-disabled-opacity} );
+        }
     }
 
     .k-signature-actions {

package/scss/signature/_theme.scss

@@ -8,6 +8,14 @@
         .k-signature-line {
             border-bottom-color: var( --kendo-signature-line-color, #{$kendo-signature-line-color} );
         }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            .k-signature-line {
+                border-bottom-color: var( --kendo-signature-line-disabled-color, #{$kendo-signature-line-disabled-color} );
+            }
+        }
     }
 
 }

package/scss/signature/_variables.scss

@@ -25,6 +25,10 @@ $kendo-signature-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
 $kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
 $kendo-signature-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
 
+/// The opacity of the disabled signature component.
+/// @group signature
+$kendo-signature-disabled-opacity: .3 !default;
+
 /// The bottom-border width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-width: 1px !default;
@@ -33,7 +37,10 @@ $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
 /// The color of the row line of the signature component.
 /// @group signature
-$kendo-signature-line-color: get-theme-color-var( primary-30 ) !default;
+$kendo-signature-line-color: rgba( get-theme-color( info, 100 ), .4 ) !default;
+/// The color of the row line of the disabled signature component.
+/// @group signature
+$kendo-signature-line-disabled-color: get-theme-color-var( neutral-60 ) !default;
 /// The width of the row line of the signature component.
 /// @group signature
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;

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/timedurationpicker/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-timedurationpicker--layout() {
+
+    // Time picker
+    .k-timedurationpicker {}
+
+}

package/scss/timedurationpicker/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-timedurationpicker--theme() {
+
+    // Time picker
+    .k-timedurationpicker {}
+
+}

package/scss/timedurationpicker/_variables.scss

@@ -0,0 +1 @@
+// Time Duration picker

package/scss/timedurationpicker/index.scss

@@ -0,0 +1,29 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "timedurationpicker",
+    dependencies: (
+        "button",
+        "icon",
+        "input",
+        "popup",
+        "list",
+        "timeselector"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "timedurationpicker" ) {
+        @include kendo-timedurationpicker--layout();
+        @include kendo-timedurationpicker--theme();
+    }
+}

package/scss/timepicker/index.scss

@@ -3,6 +3,7 @@ $_kendo-module-meta: (
     name: "timepicker",
     dependencies: (
         "button",
+        "icon",
         "input",
         "popup",
         "list",

package/scss/timeselector/_layout.scss

@@ -30,7 +30,7 @@
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
-        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x ) 0;
+        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x );
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -62,6 +62,7 @@
         display: flex;
         position: relative;
         flex: 1 1 auto;
+        overflow: hidden;
     }