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

package/dist/all.css

@@ -13309,7 +13309,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;
@@ -13474,10 +13476,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: 20px;
     height: 20px;
 }
@@ -13533,10 +13539,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: 24px;
     height: 24px;
 }
@@ -13592,10 +13602,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: 28px;
     height: 28px;
 }
@@ -16542,10 +16556,6 @@ kendo-label > .k-label {
     max-width: 300px;
 }
 
-.k-textarea {
-    display: flex;
-}
-
 .k-listbox {
     width: 10em;
     height: 200px;
@@ -22008,34 +22018,28 @@ kendo-drawer .k-drawer-wrapper {
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04);
 }
 
-.k-notification-primary {
-    border-color: #f35800;
+.k-notification-inverse {
+    border-color: #404040;
     color: white;
-    background-color: #f35800;
+    background-color: #404040;
 }
 
-.k-notification-secondary {
-    border-color: #e9e9e9;
+.k-notification-light {
+    border-color: #ebebeb;
     color: black;
-    background-color: #e9e9e9;
-}
-
-.k-notification-tertiary {
-    border-color: #03a9f4;
-    color: white;
-    background-color: #03a9f4;
+    background-color: #ebebeb;
 }
 
-.k-notification-info {
-    border-color: #2498bc;
+.k-notification-dark {
+    border-color: #404040;
     color: white;
-    background-color: #2498bc;
+    background-color: #404040;
 }
 
-.k-notification-success {
-    border-color: #3ea44e;
+.k-notification-error {
+    border-color: #d92800;
     color: white;
-    background-color: #3ea44e;
+    background-color: #d92800;
 }
 
 .k-notification-warning {
@@ -22044,28 +22048,34 @@ kendo-drawer .k-drawer-wrapper {
     background-color: #ff9800;
 }
 
-.k-notification-error {
-    border-color: #d92800;
+.k-notification-success {
+    border-color: #3ea44e;
     color: white;
-    background-color: #d92800;
+    background-color: #3ea44e;
 }
 
-.k-notification-dark {
-    border-color: #404040;
+.k-notification-info {
+    border-color: #2498bc;
     color: white;
-    background-color: #404040;
+    background-color: #2498bc;
 }
 
-.k-notification-light {
-    border-color: #ebebeb;
+.k-notification-tertiary {
+    border-color: #03a9f4;
+    color: white;
+    background-color: #03a9f4;
+}
+
+.k-notification-secondary {
+    border-color: #e9e9e9;
     color: black;
-    background-color: #ebebeb;
+    background-color: #e9e9e9;
 }
 
-.k-notification-inverse {
-    border-color: #404040;
+.k-notification-primary {
+    border-color: #f35800;
     color: white;
-    background-color: #404040;
+    background-color: #f35800;
 }
 
 kendo-card,

package/dist/all.scss

@@ -9209,7 +9209,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;
@@ -9383,7 +9385,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;
             }
@@ -14274,9 +14278,7 @@ $fieldset-legend-border: null !default;
 @include exports( "textarea/layout" ) {
 
     // Textarea
-    .k-textarea {
-        display: flex;
-    }
+    .k-textarea {}
 
 }
 
@@ -22896,22 +22898,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/classic/scss/notification/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/notification/_layout.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/notification/_layout.scss
@@ -23024,11 +23027,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-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.1.2-dev.5",
+  "version": "5.1.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,7 +49,7 @@
     "postpublish": "echo 'no postpublish for classic 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;