@progress/kendo-theme-material 5.1.1 → 5.1.2-dev.3

package/dist/all.css

@@ -2745,142 +2745,282 @@ kendo-sortable {
 }
 
 .k-overflow-auto {
-    overflow: auto !important;
+    overflow: auto;
 }
 
 .k-overflow-x-auto {
-    overflow-x: auto !important;
+    overflow-x: auto;
 }
 
 .k-overflow-y-auto {
+    overflow-y: auto;
+}
+
+.\!k-overflow-auto {
+    overflow: auto !important;
+}
+
+.\!k-overflow-x-auto {
+    overflow-x: auto !important;
+}
+
+.\!k-overflow-y-auto {
     overflow-y: auto !important;
 }
 
 .k-overflow-hidden {
-    overflow: hidden !important;
+    overflow: hidden;
 }
 
 .k-overflow-x-hidden {
-    overflow-x: hidden !important;
+    overflow-x: hidden;
 }
 
 .k-overflow-y-hidden {
+    overflow-y: hidden;
+}
+
+.\!k-overflow-hidden {
+    overflow: hidden !important;
+}
+
+.\!k-overflow-x-hidden {
+    overflow-x: hidden !important;
+}
+
+.\!k-overflow-y-hidden {
     overflow-y: hidden !important;
 }
 
 .k-overflow-visible {
-    overflow: visible !important;
+    overflow: visible;
 }
 
 .k-overflow-x-visible {
-    overflow-x: visible !important;
+    overflow-x: visible;
 }
 
 .k-overflow-y-visible {
+    overflow-y: visible;
+}
+
+.\!k-overflow-visible {
+    overflow: visible !important;
+}
+
+.\!k-overflow-x-visible {
+    overflow-x: visible !important;
+}
+
+.\!k-overflow-y-visible {
     overflow-y: visible !important;
 }
 
 .k-overflow-scroll {
-    overflow: scroll !important;
+    overflow: scroll;
 }
 
 .k-overflow-x-scroll {
-    overflow-x: scroll !important;
+    overflow-x: scroll;
 }
 
 .k-overflow-y-scroll {
+    overflow-y: scroll;
+}
+
+.\!k-overflow-scroll {
+    overflow: scroll !important;
+}
+
+.\!k-overflow-x-scroll {
+    overflow-x: scroll !important;
+}
+
+.\!k-overflow-y-scroll {
     overflow-y: scroll !important;
 }
 
 .k-overflow-clip {
-    overflow: clip !important;
+    overflow: clip;
 }
 
 .k-overflow-x-clip {
-    overflow-x: clip !important;
+    overflow-x: clip;
 }
 
 .k-overflow-y-clip {
+    overflow-y: clip;
+}
+
+.\!k-overflow-clip {
+    overflow: clip !important;
+}
+
+.\!k-overflow-x-clip {
+    overflow-x: clip !important;
+}
+
+.\!k-overflow-y-clip {
     overflow-y: clip !important;
 }
 
 .k-overflow-auto-hidden {
+    overflow: auto hidden;
+}
+
+.\!k-overflow-auto-hidden {
     overflow: auto hidden !important;
 }
 
 .k-overflow-auto-visible {
+    overflow: auto visible;
+}
+
+.\!k-overflow-auto-visible {
     overflow: auto visible !important;
 }
 
 .k-overflow-auto-scroll {
+    overflow: auto scroll;
+}
+
+.\!k-overflow-auto-scroll {
     overflow: auto scroll !important;
 }
 
 .k-overflow-auto-clip {
+    overflow: auto clip;
+}
+
+.\!k-overflow-auto-clip {
     overflow: auto clip !important;
 }
 
 .k-overflow-hidden-auto {
+    overflow: hidden auto;
+}
+
+.\!k-overflow-hidden-auto {
     overflow: hidden auto !important;
 }
 
 .k-overflow-hidden-visible {
+    overflow: hidden visible;
+}
+
+.\!k-overflow-hidden-visible {
     overflow: hidden visible !important;
 }
 
 .k-overflow-hidden-scroll {
+    overflow: hidden scroll;
+}
+
+.\!k-overflow-hidden-scroll {
     overflow: hidden scroll !important;
 }
 
 .k-overflow-hidden-clip {
+    overflow: hidden clip;
+}
+
+.\!k-overflow-hidden-clip {
     overflow: hidden clip !important;
 }
 
 .k-overflow-visible-auto {
+    overflow: visible auto;
+}
+
+.\!k-overflow-visible-auto {
     overflow: visible auto !important;
 }
 
 .k-overflow-visible-hidden {
+    overflow: visible hidden;
+}
+
+.\!k-overflow-visible-hidden {
     overflow: visible hidden !important;
 }
 
 .k-overflow-visible-scroll {
+    overflow: visible scroll;
+}
+
+.\!k-overflow-visible-scroll {
     overflow: visible scroll !important;
 }
 
 .k-overflow-visible-clip {
+    overflow: visible clip;
+}
+
+.\!k-overflow-visible-clip {
     overflow: visible clip !important;
 }
 
 .k-overflow-scroll-auto {
+    overflow: scroll auto;
+}
+
+.\!k-overflow-scroll-auto {
     overflow: scroll auto !important;
 }
 
 .k-overflow-scroll-hidden {
+    overflow: scroll hidden;
+}
+
+.\!k-overflow-scroll-hidden {
     overflow: scroll hidden !important;
 }
 
 .k-overflow-scroll-visible {
+    overflow: scroll visible;
+}
+
+.\!k-overflow-scroll-visible {
     overflow: scroll visible !important;
 }
 
 .k-overflow-scroll-clip {
+    overflow: scroll clip;
+}
+
+.\!k-overflow-scroll-clip {
     overflow: scroll clip !important;
 }
 
 .k-overflow-clip-auto {
+    overflow: clip auto;
+}
+
+.\!k-overflow-clip-auto {
     overflow: clip auto !important;
 }
 
 .k-overflow-clip-hidden {
+    overflow: clip hidden;
+}
+
+.\!k-overflow-clip-hidden {
     overflow: clip hidden !important;
 }
 
 .k-overflow-clip-visible {
+    overflow: clip visible;
+}
+
+.\!k-overflow-clip-visible {
     overflow: clip visible !important;
 }
 
 .k-overflow-clip-scroll {
+    overflow: clip scroll;
+}
+
+.\!k-overflow-clip-scroll {
     overflow: clip scroll !important;
 }
 
@@ -3057,18 +3197,34 @@ kendo-sortable {
 }
 
 .k-resize-none {
+    resize: none;
+}
+
+.\!k-resize-none {
     resize: none !important;
 }
 
 .k-resize-both {
+    resize: both;
+}
+
+.\!k-resize-both {
     resize: both !important;
 }
 
 .k-resize-horizontal {
+    resize: horizontal;
+}
+
+.\!k-resize-horizontal {
     resize: horizontal !important;
 }
 
 .k-resize-vertical {
+    resize: vertical;
+}
+
+.\!k-resize-vertical {
     resize: vertical !important;
 }
 
@@ -13567,11 +13723,11 @@ textarea.k-input-inner {
 }
 
 .k-input-spinner .k-spinner-increase .k-icon {
-    bottom: -;
+    bottom: auto;
 }
 
 .k-input-spinner .k-spinner-decrease .k-icon {
-    top: -;
+    top: auto;
 }
 
 .k-searchbar {
@@ -13854,6 +14010,23 @@ textarea.k-input-inner {
     border-bottom-style: dashed;
 }
 
+.k-input:disabled, .k-input[disabled], .k-input.k-disabled,
+.k-picker:disabled,
+.k-picker[disabled],
+.k-picker.k-disabled {
+    opacity: 1;
+    filter: none;
+}
+
+.k-input .k-input-button,
+.k-input .k-input-spinner .k-spinner-increase,
+.k-input .k-input-spinner .k-spinner-decrease,
+.k-picker .k-input-button,
+.k-picker .k-input-spinner .k-spinner-increase,
+.k-picker .k-input-spinner .k-spinner-decrease {
+    color: inherit;
+}
+
 .k-floating-label-container::after {
     display: block;
     z-index: 2;
@@ -13898,6 +14071,12 @@ textarea.k-input-inner {
     border-color: #3f51b5;
 }
 
+.k-input:disabled, .k-input[disabled], .k-input.k-disabled {
+    border-color: rgba(0, 0, 0, 0.06);
+    color: rgba(0, 0, 0, 0.38);
+    background-color: #fafafa;
+}
+
 .k-input.k-invalid, .k-input.ng-invalid.ng-touched, .k-input.ng-invalid.ng-dirty {
     border-color: #f31700;
 }
@@ -13924,6 +14103,12 @@ textarea.k-input-inner {
     border-color: #3f51b5;
 }
 
+.k-picker:disabled, .k-picker[disabled], .k-picker.k-disabled {
+    border-color: rgba(0, 0, 0, 0.06);
+    color: rgba(0, 0, 0, 0.38);
+    background-color: #fafafa;
+}
+
 .k-picker.k-invalid, .k-picker.ng-invalid.ng-touched, .k-picker.ng-invalid.ng-dirty {
     border-color: #f31700;
 }
@@ -17509,7 +17694,7 @@ kendo-label > .k-label {
 
 .k-radio:checked,
 .k-radio.k-checked {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%' cy='50%' r='4' fill='%233f51b5'/%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%233f51b5'/%3e%3c/svg%3e");
 }
 
 .k-radio:disabled,
@@ -17524,7 +17709,7 @@ kendo-label > .k-label {
 
 .k-radio:disabled:checked,
 .k-radio.k-disabled.k-checked {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%' cy='50%' r='4' fill='%23adadad'/%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23adadad'/%3e%3c/svg%3e");
 }
 
 .k-radio-wrap {

package/dist/all.scss

@@ -458,6 +458,7 @@ $wcag-light: white !default;
 // #endregion
 // #region @import "_misc.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/core/functions/_misc.scss
 $svg-escaped-characters: (
+    ("%", "%25"),
     ("<", "%3c"),
     (">", "%3e"),
     ("#", "%23"),
@@ -1751,6 +1752,7 @@ $enable-grid-classes: true !default;
 $use-calc-badge-size: true !default;
 $use-input-button-width: false !default;
 $use-input-spinner-width: false !default;
+$use-input-spinner-icon-offset: false !default;
 $use-picker-select-width: false !default;
 
 
@@ -4701,16 +4703,22 @@ $utils-border-radius: (
     // sass-lint:disable no-important
     @if $utils-overflow {
         @each $overflow in $utils-overflow {
-            .k-overflow-#{$overflow} { overflow: $overflow !important; }
-            .k-overflow-x-#{$overflow} { overflow-x: $overflow !important; }
-            .k-overflow-y-#{$overflow} { overflow-y: $overflow !important; }
+            .k-overflow-#{$overflow} { overflow: $overflow; }
+            .k-overflow-x-#{$overflow} { overflow-x: $overflow; }
+            .k-overflow-y-#{$overflow} { overflow-y: $overflow; }
+
+            .\!k-overflow-#{$overflow}   { overflow: $overflow !important; }
+            .\!k-overflow-x-#{$overflow} { overflow-x: $overflow !important; }
+            .\!k-overflow-y-#{$overflow} { overflow-y: $overflow !important; }
         }
 
 
         @each $overflow-x in $utils-overflow {
             @each $overflow-y in $utils-overflow {
                 @if $overflow-x != $overflow-y {
-                    .k-overflow-#{$overflow-x}-#{$overflow-y} { overflow: $overflow-x $overflow-y !important; }
+                    .k-overflow-#{$overflow-x}-#{$overflow-y} { overflow: $overflow-x $overflow-y; }
+
+                    .\!k-overflow-#{$overflow-x}-#{$overflow-y} { overflow: $overflow-x $overflow-y !important; }
                 }
             }
         }
@@ -4969,8 +4977,10 @@ $utils-border-radius: (
 
     @if $utils-resize {
         @each $resize in $utils-resize {
+            .k-resize-#{$resize} { resize: $resize; }
+
             // sass-lint:disable-block no-important
-            .k-resize-#{$resize} { resize: $resize !important; }
+            .\!k-resize-#{$resize} { resize: $resize !important; }
         }
     }
 
@@ -10011,6 +10021,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $primary !default;
 $kendo-input-focus-shadow: null !default;
 
+$kendo-input-disabled-bg: try-shade( $component-bg, .25 ) !default;
+$kendo-input-disabled-text: $disabled-text !default;
+$kendo-input-disabled-border: rgba( $component-border, (alpha( $component-border ) / 2) ) !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-input-bg !default;
 $kendo-picker-text: $kendo-input-text !default;
 $kendo-picker-border: $kendo-input-border !default;
@@ -10029,7 +10045,11 @@ $kendo-picker-focus-border: $kendo-input-focus-border !default;
 $kendo-picker-focus-gradient: null !default;
 $kendo-picker-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-disabled-bg: rgb(189, 189, 189) !default;
+$kendo-picker-disabled-bg: $kendo-input-disabled-bg !default;
+$kendo-picker-disabled-text: $kendo-input-disabled-text !default;
+$kendo-picker-disabled-border: $kendo-input-disabled-border !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
 
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
@@ -10333,10 +10353,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             }
         }
         .k-spinner-increase .k-icon {
-            bottom: -$kendo-input-spinner-icon-offset;
+            bottom: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
         .k-spinner-decrease .k-icon {
-            top: -$kendo-input-spinner-icon-offset;
+            top: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
     }
 
@@ -10514,6 +10534,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     }
 
 
+    // Disabled
+    .k-input,
+    .k-picker {
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+
+        .k-input-button,
+        .k-input-spinner .k-spinner-increase,
+        .k-input-spinner .k-spinner-decrease {
+            color: inherit;
+        }
+    }
+
+
     // Input ripple
     .k-floating-label-container {
         @include input-ripple();
@@ -10563,6 +10601,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
+        //Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -10626,6 +10677,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
+        //Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -13982,14 +14046,11 @@ $tooltip-error-border: $tooltip-error-bg !default;
                     $kendo-menu-popup-item-expanded-gradient
                 );
             }
-
-            &.k-focus {
-                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
-            }
         }
 
         .k-item {
-            &:focus {
+            &:focus,
+            &.k-focus {
                 @include box-shadow( $kendo-menu-popup-item-focus-shadow );
             }
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.1.1",
+  "version": "5.1.2-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,7 +50,7 @@
     "postpublish": "echo 'no postpublish for material theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.1.1"
+    "@progress/kendo-theme-default": "^5.1.2-dev.3"
   },
-  "gitHead": "798d6d06021f47b42f71b16530f96ab23d2b9c04"
+  "gitHead": "8a1041b9ea9729c5edf718e1be1afc717c476262"
 }

package/scss/_variables.scss

@@ -13,6 +13,7 @@ $enable-grid-classes: true !default;
 $use-calc-badge-size: true !default;
 $use-input-button-width: false !default;
 $use-input-spinner-width: false !default;
+$use-input-spinner-icon-offset: false !default;
 $use-picker-select-width: false !default;
 
 

package/scss/input/_layout.scss

@@ -32,6 +32,24 @@
     }
 
 
+    // Disabled
+    .k-input,
+    .k-picker {
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+
+        .k-input-button,
+        .k-input-spinner .k-spinner-increase,
+        .k-input-spinner .k-spinner-decrease {
+            color: inherit;
+        }
+    }
+
+
     // Input ripple
     .k-floating-label-container {
         @include input-ripple();

package/scss/input/_variables.scss

@@ -71,6 +71,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $primary !default;
 $kendo-input-focus-shadow: null !default;
 
+$kendo-input-disabled-bg: try-shade( $component-bg, .25 ) !default;
+$kendo-input-disabled-text: $disabled-text !default;
+$kendo-input-disabled-border: rgba( $component-border, (alpha( $component-border ) / 2) ) !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-input-bg !default;
 $kendo-picker-text: $kendo-input-text !default;
 $kendo-picker-border: $kendo-input-border !default;
@@ -89,7 +95,11 @@ $kendo-picker-focus-border: $kendo-input-focus-border !default;
 $kendo-picker-focus-gradient: null !default;
 $kendo-picker-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-disabled-bg: rgb(189, 189, 189) !default;
+$kendo-picker-disabled-bg: $kendo-input-disabled-bg !default;
+$kendo-picker-disabled-text: $kendo-input-disabled-text !default;
+$kendo-picker-disabled-border: $kendo-input-disabled-border !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
 
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;