@progress/kendo-theme-default 5.5.0 → 5.5.1-dev.0

package/scss/scheduler/_layout.scss

@@ -441,7 +441,7 @@
             }
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -507,7 +507,7 @@
 
         // Hover
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
@@ -769,7 +769,7 @@
         .k-hover .k-task > .k-event-delete,
         .k-scheduler-content tr:hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
-        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
+        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
             visibility: visible;
         }
@@ -843,7 +843,7 @@
                 position: relative;
             }
 
-            td.k-state-selected ,
+            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }

package/scss/scheduler/_theme.scss

@@ -84,7 +84,7 @@
 
     .k-scheduler-layout td.k-state-selected,
     .k-scheduler-layout td.k-selected,
-    .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
+    .k-scheduler-layout .k-scheduler-cell.k-state-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
         background-color: rgba($selected-bg, .25);
     }
@@ -107,7 +107,7 @@
         );
         @include box-shadow( $scheduler-event-shadow );
 
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
@@ -118,7 +118,7 @@
             @include box-shadow( $scheduler-event-hover-shadow );
         }
 
-        &.k-state-selected ,
+        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
@@ -188,7 +188,7 @@
         .k-scheduler-content tr.k-state-hover,
         .k-scheduler-content tr.k-hover,
         .k-scheduler-content .k-scheduler-row:hover,
-        .k-scheduler-content .k-scheduler-row.k-state-hover ,
+        .k-scheduler-content .k-scheduler-row.k-state-hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
                 $hovered-text,
@@ -202,7 +202,7 @@
         .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
+        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
             @include fill(
                 $scheduler-text,
@@ -212,13 +212,13 @@
         }
 
         // Selected
-        .k-scheduler-content tr.k-state-selected ,
+        .k-scheduler-content tr.k-state-selected,
         .k-scheduler-content tr.k-selected {
             background-color: rgba($selected-bg, .25);
         }
         .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
+        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
             background-color: $scheduler-bg;
         }
@@ -236,7 +236,7 @@
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
 
-        .k-state-selected .k-day-indicator ,
+        .k-state-selected .k-day-indicator,
         .k-selected .k-day-indicator {
             @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
         }

package/scss/scrollview/_theme.scss

@@ -49,7 +49,7 @@
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
 
         &:focus,
-        &.k-state-focus ,
+        &.k-state-focus,
         &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -60,7 +60,7 @@
         }
 
         &:hover,
-        &.k-state-hover ,
+        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -80,14 +80,14 @@
         }
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             box-shadow: $scrollview-pagebutton-shadow;
         }
     }
 
     .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-state-hover ,
+    .k-scrollview-nav > .k-link.k-state-hover,
     .k-scrollview-nav > .k-link.k-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }

package/scss/signature/_index.scss

@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../input/_index.scss";
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/signature/_layout.scss

@@ -0,0 +1,63 @@
+@include exports("signature/layout") {
+
+    .k-signature {
+        width: $kendo-signature-width;
+        height: $kendo-signature-height;
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &.k-signature-maximized {
+            width: $kendo-signature-maximized-width;
+            height: $kendo-signature-maximized-height;
+
+            > .k-signature-line {
+                border-bottom-width: $kendo-signature-maximized-line-width;
+            }
+        }
+    }
+
+    .k-signature-actions {
+        display: flex;
+        width: min-content;
+        margin-inline-start: auto;
+        gap: $kendo-signature-actions-gap;
+        z-index: 2;
+    }
+
+    .k-signature-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+    }
+
+    .k-signature-line {
+        position: absolute;
+        z-index: 0;
+        border-bottom-width: $kendo-signature-line-width;
+        border-bottom-style: $kendo-signature-line-style;
+    }
+
+    // Sizes
+    @each $size, $size-props in $kendo-signature-sizes {
+        $_padding: map-get($size-props, padding);
+        $_line-size: map-get($size-props, line-size);
+        $_line-offset: map-get($size-props, line-offset);
+
+        .k-signature-#{$size} {
+            padding: $_padding;
+
+            .k-signature-line {
+                width: $_line-size;
+                bottom: $_line-offset;
+            }
+        }
+
+    }
+}

package/scss/signature/_theme.scss

@@ -0,0 +1,12 @@
+@include exports("signature/theme") {
+
+    // Solid signature
+    .k-signature {
+
+        .k-signature-line {
+            border-bottom-color: $kendo-signature-line-color;
+        }
+    }
+
+
+}

package/scss/signature/_variables.scss

@@ -0,0 +1,45 @@
+$kendo-signature-width: 250px !default;
+$kendo-signature-height: 84px !default;
+
+$kendo-signature-maximized-width: 750px !default;
+$kendo-signature-maximized-height: 252px !default;
+
+$kendo-signature-padding: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
+$kendo-signature-padding-md: $kendo-signature-padding !default;
+$kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get($spacing, thin) !default;
+
+$kendo-signature-line-width: 1px !default;
+$kendo-signature-line-style: dashed !default;
+$kendo-signature-line-color: rgba( $info, .24 ) !default;
+
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
+$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
+$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
+$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+
+$kendo-signature-sizes: (
+    sm: (
+        padding: $kendo-signature-padding-sm,
+        line-size: $kendo-signature-line-size-sm,
+        line-offset: $kendo-signature-line-bottom-offset-sm
+    ),
+    md: (
+        padding: $kendo-signature-padding-md,
+        line-size: $kendo-signature-line-size-md,
+        line-offset: $kendo-signature-line-bottom-offset-md
+    ),
+    lg: (
+        padding: $kendo-signature-padding-lg,
+        line-size: $kendo-signature-line-size-lg,
+        line-offset: $kendo-signature-line-bottom-offset-lg
+    )
+) !default;
+
+$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;

package/scss/slider/_layout.scss

@@ -44,7 +44,7 @@
         }
 
 
-        &.k-state-disabled ,
+        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,

package/scss/slider/_theme.scss

@@ -47,20 +47,20 @@
             }
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             .k-draghandle {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-disabled ,
+        &.k-state-disabled,
         &.k-disabled {
             opacity: $slider-disabled-opacity;
         }

package/scss/splitter/_theme.scss

@@ -24,7 +24,7 @@
     .k-splitbar:focus,
     .k-splitbar.k-state-focus,
     .k-splitbar.k-focus,
-    .k-splitbar.k-state-focused ,
+    .k-splitbar.k-state-focused,
     .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;

package/scss/spreadsheet/_layout.scss

@@ -257,7 +257,7 @@
         overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
-        .k-state-disabled ,
+        .k-state-disabled,
         .k-disabled {
             pointer-events: auto;
         }
@@ -819,7 +819,7 @@
             background-position: 50% 50%;
 
             &:hover div,
-            &.k-state-hovered div ,
+            &.k-state-hovered div,
             &.k-hover div {
                 margin: 0;
                 align-self: center;
@@ -885,7 +885,7 @@
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered ,
+                &.k-state-hovered,
                 &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }

package/scss/spreadsheet/_theme.scss

@@ -142,7 +142,7 @@
             );
         }
 
-        &.k-state-active ,
+        &.k-state-active,
         &.k-active {
             @include fill(
                 $kendo-button-active-text,
@@ -160,7 +160,7 @@
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
 
-            .k-item.k-state-hover ,
+            .k-item.k-state-hover,
             .k-item.k-hover {
                 @include fill(
                     $kendo-list-item-hover-text,
@@ -191,7 +191,7 @@
         .k-button {}
 
         .k-button:hover,
-        .k-button.k-state-hover ,
+        .k-button.k-state-hover,
         .k-button.k-hover {
             @include fill(
                 $kendo-list-item-hover-text,
@@ -201,7 +201,7 @@
         .k-button:active,
         .k-button.k-state-active,
         .k-button.k-active,
-        .k-button.k-state-selected ,
+        .k-button.k-state-selected,
         .k-button.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -223,13 +223,13 @@
 
         .k-spreadsheet-has-image {
             &:hover,
-            &.k-state-hovered ,
+            &.k-state-hovered,
             &.k-hover {
                 box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
 
             &:hover div,
-            &.k-state-hovered div ,
+            &.k-state-hovered div,
             &.k-hover div {
                 color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
             }

package/scss/stepper/_layout.scss

@@ -136,7 +136,7 @@
             opacity: $stepper-optional-label-opacity;
         }
         .k-step-disabled .k-step-label-optional,
-        &.k-state-disabled .k-step-label-optional ,
+        &.k-state-disabled .k-step-label-optional,
         &.k-disabled .k-step-label-optional {
             color: inherit;
         }

package/scss/stepper/_theme.scss

@@ -182,7 +182,7 @@
                 $bg: $stepper-progressbar-bg
             );
 
-            .k-state-selected ,
+            .k-state-selected,
             .k-selected {
                 @include fill(
                     $color: $stepper-progressbar-fill-text,

package/scss/tabstrip/_layout.scss

@@ -97,13 +97,13 @@
         position: relative;
         z-index: 1;
 
-        &.k-state-active ,
+        &.k-state-active,
         &.k-active {
             display: block;
         }
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             outline-width: 1px;
             outline-style: dotted;
@@ -192,7 +192,7 @@
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-bottom-color: transparent;
             }
@@ -222,7 +222,7 @@
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-top-color: transparent;
             }
@@ -256,7 +256,7 @@
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-right-color: transparent;
             }
@@ -292,7 +292,7 @@
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active ,
+            .k-item.k-state-active,
             .k-item.k-active {
                 border-left-color: transparent;
             }
@@ -338,7 +338,7 @@
                     border-left-width: $tabstrip-indicator-size;
                 }
             }
-            .k-item.k-state-active::after ,
+            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 display: block;
             }

package/scss/tabstrip/_theme.scss

@@ -27,7 +27,7 @@
             );
 
             &:hover,
-            &.k-state-hover ,
+            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -40,7 +40,7 @@
             &:active,
             &.k-state-active,
             &.k-active,
-            &.k-state-selected ,
+            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $tabstrip-item-selected-text,
@@ -51,7 +51,7 @@
             }
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -74,7 +74,7 @@
         );
 
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -85,7 +85,7 @@
     @if ($tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
-            .k-item.k-state-active::after ,
+            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 border-color: $tabstrip-indicator-color;
             }

package/scss/taskboard/_theme.scss

@@ -28,7 +28,7 @@
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus ,
+    .k-taskboard-column.k-state-focus,
     .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,

package/scss/tilelayout/_theme.scss

@@ -9,7 +9,7 @@
     .k-tilelayout-item:focus,
     .k-tilelayout-item.k-focus,
     .k-tilelayout-item.k-state-focus,
-    .k-tilelayout-item.k-state-focused ,
+    .k-tilelayout-item.k-state-focused,
     .k-tilelayout-item.k-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }

package/scss/timeline/_theme.scss

@@ -41,7 +41,7 @@
             color: $body-text;
         }
 
-        .k-timeline-arrow.k-state-disabled ,
+        .k-timeline-arrow.k-state-disabled,
         .k-timeline-arrow.k-disabled {
             opacity: 1; // The arrow button in disabled mode should have a solid background
             color: $timeline-track-arrow-disabled-text;
@@ -62,7 +62,7 @@
         background-color: $timeline-flag-bg;
     }
 
-    .k-timeline-track-item.k-state-focus .k-timeline-circle ,
+    .k-timeline-track-item.k-state-focus .k-timeline-circle,
     .k-timeline-track-item.k-focus .k-timeline-circle {
         @include box-shadow( $timeline-track-item-focus-shadow );
     }

package/scss/timeselector/_layout.scss

@@ -100,7 +100,7 @@
             display: block;
         }
 
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {

package/scss/timeselector/_theme.scss

@@ -30,7 +30,7 @@
             color: $time-list-title-text;
         }
 
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;

package/scss/treelist/_layout.scss

@@ -25,7 +25,7 @@
         }
 
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover ,
+        .k-treelist-dragging .k-state-hover,
         .k-treelist-dragging .k-hover {
             cursor: default;
         }

package/scss/upload/_layout.scss

@@ -422,7 +422,7 @@
             z-index: 1;
         }
         input[disabled],
-        input.k-state-disabled ,
+        input.k-state-disabled,
         input.k-disabled {
             visibility: hidden;
         }

package/scss/upload/_theme.scss

@@ -33,12 +33,12 @@
 
         .k-file {
 
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 box-shadow: inset $upload-focused-shadow;
             }
 
-            .k-upload-action.k-state-focused ,
+            .k-upload-action.k-state-focused,
             .k-upload-action.k-focus {
                 box-shadow: $upload-focused-shadow;
             }

package/scss/window/_theme.scss

@@ -12,7 +12,7 @@
 
     .k-window {
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }

package/scss/wizard/_layout.scss

@@ -31,7 +31,7 @@
             justify-content: space-between;
 
             &:focus,
-            &.k-state-focused ,
+            &.k-state-focused,
             &.k-focus {
                 outline-width: 1px;
                 outline-style: dotted;

package/scss/wizard/_theme.scss

@@ -1,13 +1,13 @@
 @include exports("wizard/theme") {
     .k-wizard-step {
         &:focus,
-        &.k-state-focused ,
+        &.k-state-focused,
         &.k-focus {
             outline-color: $wizard-step-border-focused;
         }
 
         .k-ie &:focus,
-        .k-ie &.k-state-focused ,
+        .k-ie &.k-state-focused,
         .k-ie &.k-focus {
             @include box-shadow($wizard-focused-shadow);
             outline: none;