@progress/kendo-theme-default 5.6.1-dev.5 → 5.7.0

package/scss/signature/_layout.scss

@@ -2,7 +2,7 @@
 
     .k-signature {
         width: $kendo-signature-width;
-        height: $kendo-signature-height;
+        min-height: $kendo-signature-height;
         position: relative;
         box-sizing: border-box;
         display: flex;
@@ -39,25 +39,28 @@
 
     .k-signature-line {
         position: absolute;
-        z-index: 0;
+        bottom: $kendo-signature-line-bottom-offset;
+        z-index: 2;
+        pointer-events: none;
         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);
+        $_padding-x: map-get($size-props, padding-x);
+        $_padding-y: map-get($size-props, padding-y);
         $_line-size: map-get($size-props, line-size);
         $_line-offset: map-get($size-props, line-offset);
 
         .k-signature-#{$size} {
-            padding: $_padding;
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
 
             .k-signature-line {
                 width: $_line-size;
-                bottom: $_line-offset;
             }
         }
-
     }
+
 }

package/scss/signature/_variables.scss

@@ -4,40 +4,42 @@ $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-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
+$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-lg: map-get( $spacing, 2 ) !default;
+
+$kendo-signature-padding-y: $kendo-signature-padding-x !default;
+$kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
+$kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
+$kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !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-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-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-line-bottom-offset: 33% !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
+        padding-x: $kendo-signature-padding-x-sm,
+        padding-y: $kendo-signature-padding-y-sm,
+        line-size: $kendo-signature-line-size-sm
     ),
     md: (
-        padding: $kendo-signature-padding-md,
-        line-size: $kendo-signature-line-size-md,
-        line-offset: $kendo-signature-line-bottom-offset-md
+        padding-x: $kendo-signature-padding-x-md,
+        padding-y: $kendo-signature-padding-y-md,
+        line-size: $kendo-signature-line-size-md
     ),
     lg: (
-        padding: $kendo-signature-padding-lg,
-        line-size: $kendo-signature-line-size-lg,
-        line-offset: $kendo-signature-line-bottom-offset-lg
+        padding-x: $kendo-signature-padding-x-lg,
+        padding-y: $kendo-signature-padding-y-lg,
+        line-size: $kendo-signature-line-size-lg
     )
 ) !default;
 

package/scss/slider/_layout.scss

@@ -44,7 +44,6 @@
         }
 
 
-        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,
@@ -338,8 +337,8 @@
                 left: auto;
             }
 
-            .k-button .k-i-arrow-e,
-            .k-button .k-i-arrow-w {
+            .k-button-increase .k-icon,
+            .k-button-decrease .k-icon {
                 transform: scaleX(-1);
             }
         }

package/scss/slider/_theme.scss

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

package/scss/splitter/_layout.scss

@@ -172,7 +172,7 @@
 
         .k-pane,
         .k-pane-flex {
-            &.k-state-hidden,
+            &.k-hidden,
             &[hidden] {
                 // sass-lint:disable-block no-important
                 // hidden panes need to be zero-width to allow pane animation

package/scss/splitter/_theme.scss

@@ -14,7 +14,6 @@
         background-color: $splitbar-bg;
     }
     .k-splitbar:hover,
-    .k-splitbar.k-state-hover,
     .k-splitbar.k-hover,
     .k-splitbar-horizontal-hover,
     .k-splitbar-vertical-hover {
@@ -22,9 +21,6 @@
         background-color: $splitbar-hover-bg;
     }
     .k-splitbar:focus,
-    .k-splitbar.k-state-focus,
-    .k-splitbar.k-focus,
-    .k-splitbar.k-state-focused,
     .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;

package/scss/spreadsheet/_layout.scss

@@ -88,7 +88,7 @@
         [data-tool="merge"],
         [data-tool="freeze"] {
             width: auto;
-            min-width: $form-line-height * 1em;
+            min-width: calc( #{$form-line-height} * 1em );
         }
 
         .k-color-picker {
@@ -257,7 +257,6 @@
         overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
-        .k-state-disabled,
         .k-disabled {
             pointer-events: auto;
         }
@@ -819,7 +818,6 @@
             background-position: 50% 50%;
 
             &:hover div,
-            &.k-state-hovered div,
             &.k-hover div {
                 margin: 0;
                 align-self: center;
@@ -885,7 +883,6 @@
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered,
                 &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }

package/scss/spreadsheet/_theme.scss

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

package/scss/stepper/_theme.scss

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

package/scss/tabstrip/_layout.scss

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

package/scss/tabstrip/_theme.scss

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

package/scss/taskboard/_layout.scss

@@ -182,10 +182,8 @@
 
             &:focus,
             &.k-focus,
-            &.k-state-focus,
             &:hover,
-            &.k-hover,
-            &.k-state-hover {
+            &.k-hover {
                 text-decoration: underline;
             }
         }

package/scss/taskboard/_theme.scss

@@ -28,7 +28,6 @@
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus,
     .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,
@@ -67,39 +66,33 @@
             @include fill( $color: $taskboard-card-header-text );
 
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 @include fill( $color: $taskboard-card-header-focus-text );
             }
 
             &:hover,
-            &.k-hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill( $color: $taskboard-card-header-hover-text );
             }
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill( $border: $taskboard-card-focus-border );
             @include box-shadow( $taskboard-card-focus-shadow );
         }
 
         &:hover,
-        &.k-hover,
-        &.k-state-hover {
+        &.k-hover {
             @include fill( $border: $taskboard-card-hover-border );
         }
 
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include fill( $border: $taskboard-card-selected-border );
             @include box-shadow( $taskboard-card-selected-shadow );
         }
 
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include disabled( $disabled-styling );
         }
     }

package/scss/tilelayout/_theme.scss

@@ -7,9 +7,6 @@
     }
 
     .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-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }

package/scss/timeline/_theme.scss

@@ -41,7 +41,6 @@
             color: $body-text;
         }
 
-        .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 +61,6 @@
         background-color: $timeline-flag-bg;
     }
 
-    .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,6 @@
             display: block;
         }
 
-        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {

package/scss/timeselector/_theme.scss

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

package/scss/toolbar/_layout.scss

@@ -117,6 +117,12 @@
             align-items: center;
         }
 
+        // Template item
+        .k-toolbar-item:focus {
+            text-decoration: none;
+            outline: 0;
+        }
+
     }
 
 

package/scss/toolbar/_theme.scss

@@ -17,6 +17,13 @@
         }
 
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            @include box-shadow( $kendo-button-focus-shadow );
+        }
+
+
         // Button group
         .k-button-group {}
 

package/scss/treelist/_layout.scss

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

package/scss/typography/_variables.scss

@@ -28,7 +28,7 @@ $line-height-xs: 1 !default;
 $line-height-sm: 1.25 !default;
 $line-height-md: $line-height !default;
 $line-height-lg: 1.5 !default;
-$line-height-em: $line-height * 1em !default;
+$line-height-em: calc( #{$line-height} * 1em ) !default;
 
 
 // Font weight

package/scss/upload/_layout.scss

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

package/scss/upload/_theme.scss

@@ -33,12 +33,10 @@
 
         .k-file {
 
-            &.k-state-focused,
             &.k-focus {
                 box-shadow: inset $upload-focused-shadow;
             }
 
-            .k-upload-action.k-state-focused,
             .k-upload-action.k-focus {
                 box-shadow: $upload-focused-shadow;
             }
@@ -130,7 +128,6 @@
         }
 
         // Invalid,
-        &.k-state-invalid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {

package/scss/utils/_position.scss

@@ -25,6 +25,9 @@
     @each $pos in (static, relative, absolute, fixed, sticky) {
         .k-#{$pos},
         .k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
+
+        .\!k-#{$pos},
+        .\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
     }
 
     /// @name k-pos-top

package/scss/utils/_theme-colors.scss

@@ -1,18 +1,28 @@
 @include exports( "common/decoration/color" ) {
 
     // sass-lint:disable-block no-important
+    // sass-lint:disable-block class-name-format
     // stylelint-disable block-opening-brace-space-before
 
     .k-text-base,
     .k-color-base {
         color: $base-text;
     }
+    .\!k-text-base,
+    .\!k-color-base {
+        color: $base-text !important;
+    }
 
     .k-color-inherit { color: inherit; }
+    .\!k-color-inherit { color: inherit !important; }
 
     @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
+            color: $color;
+        }
+        .\!k-text-#{$name},
+        .\!k-color-#{$name} {
             color: $color !important;
         }
     }
@@ -23,59 +33,15 @@
 @include exports( "common/decoration/background" ) {
 
     // sass-lint:disable-block no-important
+    // sass-lint:disable-block class-name-format
 
     @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
-            background-color: $bg-color !important;
+            background-color: $bg-color;
         }
-    }
-
-}
-
-
-@mixin variant( $base ) {
-    background-color: tint($base, 10);
-    color: shade($base, 6);
-    border-color: tint($base, 9);
-}
-
-@include exports( "common/decoration/variant" ) {
-
-    @each $name, $variant in $kendo-theme-colors {
-        .k-state-#{$name} {
-            @include variant( $variant );
+        .\!k-bg-#{$name} {
+            background-color: $bg-color !important;
         }
     }
-}
-
-
-@include exports( "common/decoration/legacy" ) {
-
-    .k-info-colored {
-        color: #50607f;
-        border-color: #d0d9df;
-        background-color: #f0f9ff;
-    }
-
-    .k-success-colored {
-        color: #507f50;
-        border-color: #d0dfd0;
-        background-color: #f0fff0;
-    }
-
-    .k-error-colored {
-        color: #7f5050;
-        border-color: #dfd0d0;
-        background-color: #fff0f0;
-    }
-
-    .k-shadow {
-        // Shadow moved to popup/_layout.scss due to variable flow
-        // box-shadow: $popup-shadow;
-    }
-
-    .k-inset {
-        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
-    }
 
 }

package/scss/window/_theme.scss

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

package/scss/wizard/_layout.scss

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