@progress/kendo-theme-material 5.1.0 → 5.1.2-dev.2

package/dist/all.css

@@ -13567,11 +13567,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 +13854,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 +13915,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 +13947,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 +17538,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 +17553,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;
 
 
@@ -1968,12 +1970,12 @@ $dark: get-base-hue( gray, 800 ) !default;
 /// @type Color
 $light: get-base-hue( gray, 100 ) !default;
 
-/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -2009,7 +2011,7 @@ $app-border: map-get($theme, component-border) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: map-get($theme, component-bg) !default;
 /// Text color of a component.
@@ -4183,7 +4185,7 @@ $utils-border-radius: (
         0: 0
     ) !default;
 
-    $utils-border-color: $theme-colors !default;
+    $utils-border-color: $kendo-theme-colors !default;
 
     $utils-border-radius-sides: (
         default: border-radius,
@@ -5281,7 +5283,7 @@ $utils-border-radius: (
 
     .k-color-inherit { color: inherit; }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
             color: $color !important;
@@ -5295,7 +5297,7 @@ $utils-border-radius: (
 
     // sass-lint:disable-block no-important
 
-    @each $name, $bg-color in $theme-colors {
+    @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
             background-color: $bg-color !important;
         }
@@ -5312,7 +5314,7 @@ $utils-border-radius: (
 
 @include exports( "common/decoration/variant" ) {
 
-    @each $name, $variant in $theme-colors {
+    @each $name, $variant in $kendo-theme-colors {
         .k-state-#{$name} {
             @include variant( $variant );
         }
@@ -6824,7 +6826,7 @@ $message-box-link-text-decoration: underline !default;
 // #region @import "~@progress/kendo-theme-default/scss/messagebox/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/messagebox/_theme.scss
 @include exports("messagebox/theme") {
 
-    @each $color-name, $color in $theme-colors {
+    @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
             @include fill(
                 color-level( $color, $message-box-text-level ),
@@ -8252,7 +8254,7 @@ $listgroup-item-border-width: 1px !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/overlay/_variables.scss
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .32 !default;
@@ -8795,7 +8797,7 @@ $badge-dot-size-lg: 12px !default;
 @include exports( "badge/theme" ) {
 
     // Solid badges
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-solid.k-badge-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
@@ -8809,7 +8811,7 @@ $badge-dot-size-lg: 12px !default;
         background-color: $component-bg;
     }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-outline.k-badge-#{$name} {
             color: $color;
         }
@@ -8893,7 +8895,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
 
@@ -10011,6 +10013,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 +10037,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 +10345,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 +10526,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 +10593,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 +10669,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,
@@ -11926,7 +11982,7 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/avatar/_layout.scss
@@ -12130,10 +12186,10 @@ $kendo-chip-base-bg: if( $dark-theme, $white, $kendo-button-text ) !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.
@@ -13222,7 +13278,7 @@ $loader-container-font-size-lg: $font-size-lg !default;
 // #region @import "~@progress/kendo-theme-default/scss/loader/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/loader/_theme.scss
 @include exports( "loader/theme" ) {
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-loader-#{$name} {
             @if $name == "secondary" {
                 color: $loader-secondary-bg;
@@ -23082,7 +23138,7 @@ $appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
 
 
     // AppBar theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-appbar-#{$name} {
             @if $name == "light" {
                 color: $appbar-light-text;
@@ -23221,7 +23277,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
@@ -24763,7 +24819,7 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }
 
@@ -25477,7 +25533,7 @@ $card-focus-callout-box-shadow-w: null !default;
 
 
     // Card theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
             background-color: tint($color, 10);
             color: shade($color, 6);
@@ -25978,7 +26034,7 @@ $bottom-nav-flat-border: $component-border !default;
 @include exports("bottom-navigation/theme") {
 
     // Solid
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid.k-bottom-nav-#{$name} {
             @include fill(
                 $color: true-mix( $color, contrast-wcag( $color ), 35%),
@@ -26011,7 +26067,7 @@ $bottom-nav-flat-border: $component-border !default;
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
 
-        @each $name, $color in $theme-colors {
+        @each $name, $color in $kendo-theme-colors {
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.1.0",
+  "version": "5.1.2-dev.2",
   "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.0"
+    "@progress/kendo-theme-default": "^5.1.2-dev.2"
   },
-  "gitHead": "279941cb925d750fc123f66c3e15ce1e2b666191"
+  "gitHead": "df4c6f46ad3f3c8f20146b0301c4f9c2e4b8fa26"
 }

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;
 
 
@@ -230,12 +231,12 @@ $dark: get-base-hue( gray, 800 ) !default;
 /// @type Color
 $light: get-base-hue( gray, 100 ) !default;
 
-/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -271,7 +272,7 @@ $app-border: map-get($theme, component-border) !default;
 
 // Component
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: map-get($theme, component-bg) !default;
 /// Text color of a component.

package/scss/avatar/_variables.scss

@@ -24,4 +24,4 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;

package/scss/button/_variables.scss

@@ -54,7 +54,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
 

package/scss/chip/_variables.scss

@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, $white, $kendo-button-text ) !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.

package/scss/fab/_variables.scss

@@ -88,7 +88,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button

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;

package/scss/notification/_variables.scss

@@ -29,6 +29,6 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }

package/scss/overlay/_variables.scss

@@ -1,4 +1,4 @@
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .32 !default;