@progress/kendo-theme-material 5.4.2-dev.3 → 5.4.2-dev.4

package/dist/all.scss

@@ -889,42 +889,6 @@ $_kendo-imported-modules: ();
 
 // #endregion
 
-// Other
-// #region @import "_input-ripple.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/core/mixins/_input-ripple.scss
-@mixin input-ripple() {
-    $height: 2 * $kendo-input-border-width;
-
-    &::after {
-        display: block;
-        z-index: 2;
-        content: "";
-        position: absolute;
-        bottom: calc( 1px - #{$height} );
-        left: 0;
-        right: 0;
-        height: $height;
-        margin: auto;
-        opacity: 0;
-        transform: scaleX(.5);
-        transition: transform .3s;
-        background-color: $primary;
-    }
-
-    &.k-state-focused::after ,
-    &.k-focus::after {
-        opacity: 1;
-        transform: scaleX(1);
-    }
-
-
-    &.k-state-invalid::after ,
-    &.k-invalid::after {
-        background-color: $error;
-        transition: none;
-    }
-}
-
-// #endregion
 
 // #endregion
 
@@ -10064,7 +10028,7 @@ $kendo-input-sizes: (
 
 $kendo-input-bg: try-shade( $component-bg, .5 ) !default;
 $kendo-input-text: $component-text !default;
-$kendo-input-border: rgba( $component-border, .54 ) !default;
+$kendo-input-border: rgba( $component-border, .38 ) !default;
 $kendo-input-shadow: null !default;
 
 $kendo-input-hover-bg: null !default;
@@ -10084,27 +10048,30 @@ $kendo-input-disabled-gradient: null !default;
 $kendo-input-disabled-shadow: null !default;
 
 $kendo-input-outline-bg: null !default;
-$kendo-input-outline-text: null !default;
-$kendo-input-outline-border: null !default;
+$kendo-input-outline-text: $kendo-input-text !default;
+$kendo-input-outline-border: $kendo-input-border !default;
 
 $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
-$kendo-input-outline-hover-border: null !default;
+$kendo-input-outline-hover-border: $kendo-input-hover-border !default;
 
 $kendo-input-outline-focus-bg: null !default;
 $kendo-input-outline-focus-text: null !default;
-$kendo-input-outline-focus-border: null !default;
-$kendo-input-outline-focus-shadow: null !default;
+$kendo-input-outline-focus-border: $kendo-input-focus-border !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
+
+$kendo-input-flat-bg: null !default;
+$kendo-input-flat-text: $kendo-input-text !default;
+$kendo-input-flat-border: $kendo-input-border !default;
 
-$kendo-input-flat-bg: transparent !default;
-$kendo-input-flat-text: null !default;
-$kendo-input-flat-border: null !default;
+$kendo-input-flat-hover-bg: null !default;
+$kendo-input-flat-hover-text: null !default;
+$kendo-input-flat-hover-border: $kendo-input-hover-border !default;
 
 $kendo-input-flat-focus-bg: null !default;
 $kendo-input-flat-focus-text: null !default;
-$kendo-input-flat-focus-border: null !default;
-
-$kendo-input-flat-border-radius: null !default;
+$kendo-input-flat-focus-border: $kendo-input-focus-border !default;
+$kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 $kendo-picker-bg: $kendo-input-bg !default;
 $kendo-picker-text: $kendo-input-text !default;
@@ -10130,34 +10097,34 @@ $kendo-picker-disabled-border: $kendo-input-disabled-border !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
-$kendo-picker-outline-bg: transparent !default;
-$kendo-picker-outline-text: null !default;
-$kendo-picker-outline-border: null !default;
+$kendo-picker-outline-bg: null !default;
+$kendo-picker-outline-text: $kendo-picker-text !default;
+$kendo-picker-outline-border: $kendo-picker-border !default;
 
 $kendo-picker-outline-hover-bg: null !default;
 $kendo-picker-outline-hover-text: null !default;
-$kendo-picker-outline-hover-border: null !default;
+$kendo-picker-outline-hover-border: $kendo-picker-hover-border !default;
 
 $kendo-picker-outline-focus-bg: nul !default;
 $kendo-picker-outline-focus-text: null !default;
-$kendo-picker-outline-focus-border: null !default;
+$kendo-picker-outline-focus-border: $kendo-picker-focus-border !default;
 $kendo-picker-outline-focus-shadow: null !default;
 
 $kendo-picker-outline-hover-focus-bg: null !default;
 $kendo-picker-outline-hover-focus-text: null !default;
 $kendo-picker-outline-hover-focus-border: null !default;
 
-$kendo-picker-flat-bg: transparent !default;
-$kendo-picker-flat-text: null !default;
-$kendo-picker-flat-border: null !default;
+$kendo-picker-flat-bg: null !default;
+$kendo-picker-flat-text: $kendo-picker-text !default;
+$kendo-picker-flat-border: $kendo-picker-border !default;
 
 $kendo-picker-flat-hover-bg: null !default;
 $kendo-picker-flat-hover-text: null !default;
-$kendo-picker-flat-hover-border: null !default;
+$kendo-picker-flat-hover-border: $kendo-picker-hover-border !default;
 
 $kendo-picker-flat-focus-bg: null !default;
 $kendo-picker-flat-focus-text: null !default;
-$kendo-picker-flat-focus-border: null !default;
+$kendo-picker-flat-focus-border: $kendo-picker-focus-border !default;
 $kendo-picker-flat-focus-shadow: null !default;
 
 $kendo-picker-flat-hover-focus-bg: null !default;
@@ -10538,28 +10505,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
-        @include border-radius( 0 !important ); // sass-lint:disable-line no-important
+        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $kendo-input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
         background-image: none !important; // sass-lint:disable-line no-important
-
-        &:focus,
-        &.k-focus {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
-        &:focus-within {
-            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-        }
     }
 
     .k-input-outline {
         background: none !important; // sass-lint:disable-line no-important
     }
 
-    .k-picker.k-picker-flat {
-        @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
-    }
-
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
@@ -10679,22 +10634,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         .k-input-spinner .k-spinner-increase,
         .k-input-spinner .k-spinner-decrease {
             background: none;
+            border-color: transparent;
         }
     }
 
-    .k-input-solid:focus,
-    .k-input-solid.k-focus {
-        border-width: $kendo-input-border-width;
-        border-top-color: $kendo-input-focus-border !important; // sass-lint:disable-line no-important
-
-        &.k-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            border-top-color: $invalid-border !important; // sass-lint:disable-line no-important
-        }
-    }
-
-
 
     .k-input-flat,
     .k-picker-flat {
@@ -10703,9 +10646,11 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         .k-input-spinner .k-spinner-increase,
         .k-input-spinner .k-spinner-decrease {
             background: none;
+            border-color: transparent;
         }
 
         &:disabled,
+        &[disabled],
         &.k-disabled  {
             border-bottom-style: dashed;
         }
@@ -10715,6 +10660,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     // Disabled
     .k-input,
     .k-picker {
+
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -10731,8 +10677,59 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
 
     // Input ripple
-    .k-floating-label-container {
-        @include input-ripple();
+    .k-input-solid,
+    .k-input-flat,
+    .k-input-outline,
+    .k-picker-solid,
+    .k-picker-flat,
+    .k-picker-outline {
+        $_kendo-input-ripple-border-width: (2 * $kendo-input-border-width);
+
+        &::after {
+            content: "";
+            border-width: 0 0 $_kendo-input-ripple-border-width 0;
+            border-style: solid;
+            border-color: inherit;
+            border-radius: inherit;
+            display: block;
+            position: absolute;
+            z-index: 2;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            right: -1px;
+            opacity: 0;
+            transform: scaleX(0);
+            transition: opacity .3s, transform .3s;
+            pointer-events: none;
+        }
+
+        &.k-focus::after,
+        &.k-state-focused::after {
+            opacity: 1;
+            transform: scaleX(1);
+        }
+        &:focus-within::after {
+            opacity: 1;
+            transform: scaleX(1);
+        }
+    }
+    .k-input-outline,
+    .k-picker-outline {
+        $_kendo-input-ripple-border-width: (2 * $kendo-input-border-width);
+
+        &::after {
+            border-width: $_kendo-input-ripple-border-width;
+            transform: none;
+        }
+
+        &.k-focus::after,
+        &.k-state-focused::after {
+            transform: none;
+        }
+        &:focus-within::after {
+            transform: none;
+        }
     }
 
 }
@@ -10743,7 +10740,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 @include exports( "input/theme" ) {
 
     // Solid input
-    .k-input {
+    .k-input-solid {
         @include fill(
             $kendo-input-text,
             $kendo-input-bg,
@@ -10780,7 +10777,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -10797,7 +10794,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -10805,10 +10802,10 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
@@ -10816,7 +10813,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
 
     // Solid picker
-    .k-picker {
+    .k-picker-solid {
         @include fill(
             $kendo-picker-text,
             $kendo-picker-bg,
@@ -10857,7 +10854,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
-        //Disabled
+        // Disabled
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -10890,7 +10887,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
-    // Outline
+
+    // Outline input
     .k-input-outline {
         @include fill (
             $kendo-input-outline-text,
@@ -10911,6 +10909,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
            }
         }
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -10920,6 +10919,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -10929,12 +10929,33 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
              );
             @include box-shadow ( $kendo-input-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-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,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -10942,15 +10963,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
 
     }
 
+
+    // Outline picker
     .k-picker-outline {
         @include fill (
             $kendo-picker-outline-text,
@@ -10958,6 +10981,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-picker-outline-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -10967,6 +10991,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -10976,6 +11001,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
             @include box-shadow ( $kendo-picker-outline-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -10988,11 +11021,24 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // 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,
         &.ng-invalid.ng-dirty {
-            @include fill( $border: $invalid-border );
+            @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
                 color: $invalid-text;
@@ -11000,15 +11046,16 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
             &:focus,
             &.k-focus {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
             &:focus-within {
-                @include box-shadow($invalid-shadow);
+                @include box-shadow( $kendo-input-invalid-shadow );
             }
         }
     }
 
-    // Flat
+
+    // Flat input
     .k-input-flat {
         @include fill (
             $kendo-input-flat-text,
@@ -11016,6 +11063,17 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-input-flat-border
         );
 
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-flat-hover-text,
+                $kendo-input-flat-hover-bg,
+                $kendo-input-flat-hover-border
+            );
+        }
+
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -11023,6 +11081,28 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
                 $kendo-input-flat-focus-bg,
                 $kendo-input-flat-focus-border
             );
+            @include box-shadow( $kendo-input-flat-focus-shadow );
+        }
+        &:focus-within {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+            @include box-shadow( $kendo-input-flat-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
@@ -11045,6 +11125,8 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+
+    // Flat picker
     .k-picker-flat {
         @include fill (
             $kendo-picker-flat-text,
@@ -11052,6 +11134,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             $kendo-picker-flat-border
         );
 
+        // Hover
         &:hover,
         &.k-hover {
             @include fill (
@@ -11061,6 +11144,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // Focus
         &:focus,
         &.k-focus {
             @include fill (
@@ -11070,6 +11154,14 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
             @include box-shadow( $kendo-picker-flat-focus-shadow );
         }
+        &:focus-within {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
 
         &:focus:hover,
         &:focus.k-hover,
@@ -11082,6 +11174,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             );
         }
 
+        // 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,
@@ -11106,7 +11211,6 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
 
 // #endregion
 
-
 // #endregion
 
 // #endregion
@@ -14986,6 +15090,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
         .k-button-solid-base {
             background-color: try-shade( $kendo-button-bg );
             border-color: try-shade( $kendo-button-bg );
+
+            &.k-input-button,
+            &.k-input-spinner .k-spinner-increase,
+            &.k-input-spinner .k-spinner-decrease {
+                background: none;
+                border-color: transparent;
+            }
         }
 
     }
@@ -20130,6 +20241,9 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
         }
 
         .k-input-inner {
+            padding-inline-start: 2px;
+            padding-inline-end: 2px;
+            text-align: center;
             text-overflow: clip;
         }
     }
@@ -29087,6 +29201,7 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: (20 / 14) !default;
 $panelbar-border-width: 1px !default;
+$panelbar-border-style: solid !default;
 $panelbar-item-border-width: 1px !default;
 $panelbar-item-border-style: solid !default;
 
@@ -29195,7 +29310,7 @@ $panelbar-header-expanded-gradient: null !default;
         margin: 0;
         padding: 0;
         border-width: $panelbar-border-width;
-        border-style: solid;
+        border-style: $panelbar-border-style;
         box-sizing: border-box;
         outline: 0;
         font-family: $panelbar-font-family;

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "5.4.2-dev.3",
+    "version": "5.4.2-dev.4",
     "previewColors": [
         "#121212",
         "#212121",