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

package/dist/all.css

@@ -13303,7 +13303,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;
@@ -13468,10 +13470,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;
 }
@@ -13527,10 +13533,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;
 }
@@ -13586,10 +13596,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;
 }
@@ -16539,10 +16553,6 @@ kendo-label > .k-label {
     max-width: 300px;
 }
 
-.k-textarea {
-    display: flex;
-}
-
 .k-listbox {
     width: 10em;
     height: 200px;
@@ -22000,34 +22010,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: #ff6358;
-    color: white;
-    background-color: #ff6358;
-}
-
-.k-notification-secondary {
-    border-color: #666666;
+.k-notification-inverse {
+    border-color: #424242;
     color: white;
-    background-color: #666666;
+    background-color: #424242;
 }
 
-.k-notification-tertiary {
-    border-color: #03a9f4;
-    color: white;
-    background-color: #03a9f4;
+.k-notification-light {
+    border-color: #ebebeb;
+    color: black;
+    background-color: #ebebeb;
 }
 
-.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 {
@@ -22036,28 +22040,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: #ebebeb;
-    color: black;
-    background-color: #ebebeb;
+.k-notification-tertiary {
+    border-color: #03a9f4;
+    color: white;
+    background-color: #03a9f4;
 }
 
-.k-notification-inverse {
-    border-color: #424242;
+.k-notification-secondary {
+    border-color: #666666;
     color: white;
-    background-color: #424242;
+    background-color: #666666;
+}
+
+.k-notification-primary {
+    border-color: #ff6358;
+    color: white;
+    background-color: #ff6358;
 }
 
 kendo-card,

package/dist/all.scss

@@ -9082,7 +9082,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;
@@ -9256,7 +9258,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;
             }
@@ -14044,9 +14048,7 @@ $fieldset-legend-border: null !default;
 @include exports( "textarea/layout" ) {
 
     // Textarea
-    .k-textarea {
-        display: flex;
-    }
+    .k-textarea {}
 
 }
 
@@ -22449,22 +22451,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/default/scss/notification/_layout.scss
 @include exports("notification/layout") {
@@ -22573,11 +22576,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-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.1.2-dev.5",
+  "version": "5.1.2-dev.6",
   "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": "b4a2644f36f4dd8559aadb2ce2eb3d08ef1e4c55"
+  "gitHead": "64d87da064a0cfce86ebb8ebe986ac30977f7fb7"
 }

package/scss/input/_layout.scss

@@ -185,7 +185,9 @@
     // 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;
@@ -359,7 +361,9 @@
             .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;
             }

package/scss/notification/_theme.scss

@@ -17,11 +17,13 @@
         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/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;

package/scss/textarea/_layout.scss

@@ -1,8 +1,6 @@
 @include exports( "textarea/layout" ) {
 
     // Textarea
-    .k-textarea {
-        display: flex;
-    }
+    .k-textarea {}
 
 }