@progress/kendo-theme-material 5.1.2-dev.5 → 5.1.2-dev.6

package/dist/all.css

@@ -13677,7 +13677,9 @@ textarea.k-input-inner {
 
 .k-input-icon,
 .k-input-validation-icon,
-.k-input-loading-icon {
+.k-input-loading-icon,
+.k-input-prefix > .k-icon,
+.k-input-suffix > .k-icon {
     flex: none;
     align-self: center;
     display: inline-flex;
@@ -13842,10 +13844,14 @@ textarea.k-input-inner {
 .k-input-sm .k-input-validation-icon,
 .k-input-sm .k-input-loading-icon,
 .k-input-sm .k-clear-value,
+.k-input-sm .k-input-prefix > .k-icon,
+.k-input-sm .k-input-suffix > .k-icon,
 .k-picker-sm .k-input-icon,
 .k-picker-sm .k-input-validation-icon,
 .k-picker-sm .k-input-loading-icon,
-.k-picker-sm .k-clear-value {
+.k-picker-sm .k-clear-value,
+.k-picker-sm .k-input-prefix > .k-icon,
+.k-picker-sm .k-input-suffix > .k-icon {
     width: 28px;
     height: 28px;
 }
@@ -13901,10 +13907,14 @@ textarea.k-input-inner {
 .k-input-md .k-input-validation-icon,
 .k-input-md .k-input-loading-icon,
 .k-input-md .k-clear-value,
+.k-input-md .k-input-prefix > .k-icon,
+.k-input-md .k-input-suffix > .k-icon,
 .k-picker-md .k-input-icon,
 .k-picker-md .k-input-validation-icon,
 .k-picker-md .k-input-loading-icon,
-.k-picker-md .k-clear-value {
+.k-picker-md .k-clear-value,
+.k-picker-md .k-input-prefix > .k-icon,
+.k-picker-md .k-input-suffix > .k-icon {
     width: 32px;
     height: 32px;
 }
@@ -13960,10 +13970,14 @@ textarea.k-input-inner {
 .k-input-lg .k-input-validation-icon,
 .k-input-lg .k-input-loading-icon,
 .k-input-lg .k-clear-value,
+.k-input-lg .k-input-prefix > .k-icon,
+.k-input-lg .k-input-suffix > .k-icon,
 .k-picker-lg .k-input-icon,
 .k-picker-lg .k-input-validation-icon,
 .k-picker-lg .k-input-loading-icon,
-.k-picker-lg .k-clear-value {
+.k-picker-lg .k-clear-value,
+.k-picker-lg .k-input-prefix > .k-icon,
+.k-picker-lg .k-input-suffix > .k-icon {
     width: 36px;
     height: 36px;
 }
@@ -17218,10 +17232,6 @@ kendo-label > .k-label {
     max-width: 300px;
 }
 
-.k-textarea {
-    display: flex;
-}
-
 .k-listbox {
     width: 10em;
     height: 200px;
@@ -22927,34 +22937,28 @@ kendo-drawer .k-drawer-wrapper {
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-.k-notification-primary {
-    border-color: #3f51b5;
-    color: white;
-    background-color: #3f51b5;
-}
-
-.k-notification-secondary {
-    border-color: #e51a5f;
+.k-notification-inverse {
+    border-color: #424242;
     color: white;
-    background-color: #e51a5f;
+    background-color: #424242;
 }
 
-.k-notification-tertiary {
-    border-color: #00695c;
-    color: white;
-    background-color: #00695c;
+.k-notification-light {
+    border-color: #f5f5f5;
+    color: black;
+    background-color: #f5f5f5;
 }
 
-.k-notification-info {
-    border-color: #0058e9;
+.k-notification-dark {
+    border-color: #424242;
     color: white;
-    background-color: #0058e9;
+    background-color: #424242;
 }
 
-.k-notification-success {
-    border-color: #37b400;
+.k-notification-error {
+    border-color: #f31700;
     color: white;
-    background-color: #37b400;
+    background-color: #f31700;
 }
 
 .k-notification-warning {
@@ -22963,28 +22967,34 @@ kendo-drawer .k-drawer-wrapper {
     background-color: #ffc000;
 }
 
-.k-notification-error {
-    border-color: #f31700;
+.k-notification-success {
+    border-color: #37b400;
     color: white;
-    background-color: #f31700;
+    background-color: #37b400;
 }
 
-.k-notification-dark {
-    border-color: #424242;
+.k-notification-info {
+    border-color: #0058e9;
     color: white;
-    background-color: #424242;
+    background-color: #0058e9;
 }
 
-.k-notification-light {
-    border-color: #f5f5f5;
-    color: black;
-    background-color: #f5f5f5;
+.k-notification-tertiary {
+    border-color: #00695c;
+    color: white;
+    background-color: #00695c;
 }
 
-.k-notification-inverse {
-    border-color: #424242;
+.k-notification-secondary {
+    border-color: #e51a5f;
     color: white;
-    background-color: #424242;
+    background-color: #e51a5f;
+}
+
+.k-notification-primary {
+    border-color: #3f51b5;
+    color: white;
+    background-color: #3f51b5;
 }
 
 kendo-card,

package/dist/all.scss

@@ -10283,7 +10283,9 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
-    .k-input-loading-icon {
+    .k-input-loading-icon,
+    .k-input-prefix > .k-icon,
+    .k-input-suffix > .k-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -10457,7 +10459,9 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             .k-input-icon,
             .k-input-validation-icon,
             .k-input-loading-icon,
-            .k-clear-value {
+            .k-clear-value,
+            .k-input-prefix > .k-icon,
+            .k-input-suffix > .k-icon {
                 width: $_icon-size;
                 height: $_icon-size;
             }
@@ -15711,9 +15715,7 @@ $fieldset-legend-border: null !default;
 @include exports( "textarea/layout" ) {
 
     // Textarea
-    .k-textarea {
-        display: flex;
-    }
+    .k-textarea {}
 
 }
 
@@ -24825,22 +24827,23 @@ $notification-bg: $component-bg !default;
 $notification-text: $component-text !default;
 $notification-border: $component-border !default;
 
-$notification-themes: () !default;
+@function notification-theme( $colors ) {
+    $_theme: ();
 
-@function notification-theme($name: null, $color: null) {
-    // sass-lint:disable indentation
-    @return (
-        border: $color,
-        color: contrast-wcag( $color ),
-        bg: $color
-    );
-    // sass-lint:enable indentation
-}
+    @each $name, $color in $colors {
+        $_theme: map-merge(( $name: (
+            color: contrast-wcag( $color ),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
 
-@each $theme, $props in $kendo-theme-colors {
-    $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
+    @return $_theme;
 }
 
+$kendo-notification-theme-colors: $kendo-theme-colors !default;
+$kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/notification/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/notification/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/notification/_layout.scss
@@ -24953,11 +24956,13 @@ $notification-themes: () !default;
         box-shadow: $notification-shadow;
     }
 
-    @each $theme, $props in $notification-themes {
-        .k-notification-#{$theme} {
-            border-color: map-get( $props, border );
-            color: map-get( $props, color );
-            background-color: map-get( $props, bg );
+    @each $name, $props in $kendo-notification-theme {
+        .k-notification-#{$name} {
+            @include fill(
+                map-get( $props, color ),
+                map-get( $props, background-color ),
+                map-get( $props, border )
+            );
         }
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "5.1.2-dev.5",
+  "version": "5.1.2-dev.6",
   "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.2-dev.5"
+    "@progress/kendo-theme-default": "^5.1.2-dev.6"
   },
-  "gitHead": "b4a2644f36f4dd8559aadb2ce2eb3d08ef1e4c55"
+  "gitHead": "64d87da064a0cfce86ebb8ebe986ac30977f7fb7"
 }

package/scss/notification/_variables.scss

@@ -17,18 +17,19 @@ $notification-bg: $component-bg !default;
 $notification-text: $component-text !default;
 $notification-border: $component-border !default;
 
-$notification-themes: () !default;
-
-@function notification-theme($name: null, $color: null) {
-    // sass-lint:disable indentation
-    @return (
-        border: $color,
-        color: contrast-wcag( $color ),
-        bg: $color
-    );
-    // sass-lint:enable indentation
-}
+@function notification-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: map-merge(( $name: (
+            color: contrast-wcag( $color ),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
 
-@each $theme, $props in $kendo-theme-colors {
-    $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
+    @return $_theme;
 }
+
+$kendo-notification-theme-colors: $kendo-theme-colors !default;
+$kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;