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

package/dist/all.css

@@ -2740,142 +2740,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;
 }
 
@@ -3052,18 +3192,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;
 }
 
@@ -13193,11 +13349,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 {
@@ -15454,13 +15610,9 @@ textarea.k-input-inner {
     background-color: #ff6358;
 }
 
-.k-menu-group .k-item > .k-link.k-focus,
-.k-menu.k-context-menu .k-item > .k-link.k-focus {
-    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
-}
-
-.k-menu-group .k-item:focus,
-.k-menu.k-context-menu .k-item:focus {
+.k-menu-group .k-item:focus, .k-menu-group .k-item.k-focus,
+.k-menu.k-context-menu .k-item:focus,
+.k-menu.k-context-menu .k-item.k-focus {
     box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
 }
 
@@ -16747,7 +16899,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 14 14'%3e%3ccircle cx='50%' cy='50%' r='4' fill='white'/%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='white'/%3e%3c/svg%3e");
 }
 
 .k-radio:disabled,

package/dist/all.scss

@@ -457,6 +457,7 @@ $wcag-light: white !default;
 // #endregion
 // #region @import "_misc.scss"; -> packages/default/scss/core/functions/_misc.scss
 $svg-escaped-characters: (
+    ("%", "%25"),
     ("<", "%3c"),
     (">", "%3e"),
     ("#", "%23"),
@@ -996,6 +997,7 @@ $enable-grid-classes: true !default;
 $use-calc-badge-size: true !default;
 $use-input-button-width: true !default;
 $use-input-spinner-width: true !default;
+$use-input-spinner-icon-offset: false !default;
 $use-picker-select-width: true !default;
 
 
@@ -3820,16 +3822,22 @@ $display4-letter-spacing: null !default;
     // 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; }
                 }
             }
         }
@@ -4079,8 +4087,10 @@ $display4-letter-spacing: null !default;
 
     @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; }
         }
     }
 
@@ -8811,6 +8821,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 $kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -8829,6 +8845,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !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;
 
@@ -9130,10 +9152,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 );
         }
     }
 
@@ -9318,6 +9340,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,
@@ -9381,6 +9416,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,
@@ -12568,14 +12616,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-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.1.1",
+  "version": "5.1.2-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "prepublishOnly": "echo 'no prebublish for default theme'",
     "postpublish": "echo 'no postpublish for default theme'"
   },
-  "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: true !default;
 $use-input-spinner-width: true !default;
+$use-input-spinner-icon-offset: false !default;
 $use-picker-select-width: true !default;
 
 

package/scss/core/functions/_misc.scss

@@ -1,4 +1,5 @@
 $svg-escaped-characters: (
+    ("%", "%25"),
     ("<", "%3c"),
     (">", "%3e"),
     ("#", "%23"),

package/scss/input/_layout.scss

@@ -266,10 +266,10 @@
             }
         }
         .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 );
         }
     }
 

package/scss/input/_theme.scss

@@ -37,6 +37,19 @@
             @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,
@@ -100,6 +113,19 @@
             @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,

package/scss/input/_variables.scss

@@ -71,6 +71,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 $kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -89,6 +95,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !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;
 

package/scss/menu/_theme.scss

@@ -80,14 +80,11 @@
                     $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/scss/utils/_overflow.scss

@@ -46,16 +46,22 @@
     // 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; }
                 }
             }
         }

package/scss/utils/_resize.scss

@@ -27,8 +27,10 @@
 
     @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; }
         }
     }