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

package/dist/all.css

@@ -14107,31 +14107,17 @@ textarea.k-input-inner {
 
 .k-input-flat,
 .k-picker-flat {
-    border-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
     border-width: 1px 0;
     border-top-color: transparent !important;
     background-image: none !important;
 }
 
-.k-input-flat:focus, .k-input-flat.k-focus,
-.k-picker-flat:focus,
-.k-picker-flat.k-focus {
-    border-radius: !important;
-}
-
-.k-input-flat:focus-within,
-.k-picker-flat:focus-within {
-    border-radius: !important;
-}
-
 .k-input-outline {
     background: none !important;
 }
 
-.k-picker.k-picker-flat {
-    border-radius: !important;
-}
-
 .k-input-sm,
 .k-picker-sm {
     font-size: 16px;
@@ -14371,19 +14357,7 @@ textarea.k-input-inner {
 .k-picker-solid .k-input-spinner .k-spinner-increase,
 .k-picker-solid .k-input-spinner .k-spinner-decrease {
     background: none;
-}
-
-.k-input-solid:focus,
-.k-input-solid.k-focus {
-    border-width: 1px;
-    border-top-color: #3f51b5 !important;
-}
-
-.k-input-solid:focus.k-invalid, .k-input-solid:focus.ng-invalid.ng-touched, .k-input-solid:focus.ng-invalid.ng-dirty,
-.k-input-solid.k-focus.k-invalid,
-.k-input-solid.k-focus.ng-invalid.ng-touched,
-.k-input-solid.k-focus.ng-invalid.ng-dirty {
-    border-top-color: #f31700 !important;
+    border-color: transparent;
 }
 
 .k-input-flat .k-input-button,
@@ -14393,10 +14367,12 @@ textarea.k-input-inner {
 .k-picker-flat .k-input-spinner .k-spinner-increase,
 .k-picker-flat .k-input-spinner .k-spinner-decrease {
     background: none;
+    border-color: transparent;
 }
 
-.k-input-flat:disabled, .k-input-flat.k-disabled,
+.k-input-flat:disabled, .k-input-flat[disabled], .k-input-flat.k-disabled,
 .k-picker-flat:disabled,
+.k-picker-flat[disabled],
 .k-picker-flat.k-disabled {
     border-bottom-style: dashed;
 }
@@ -14418,96 +14394,141 @@ textarea.k-input-inner {
     color: inherit;
 }
 
-.k-floating-label-container::after {
-    display: block;
-    z-index: 2;
+.k-input-solid::after,
+.k-input-flat::after,
+.k-input-outline::after,
+.k-picker-solid::after,
+.k-picker-flat::after,
+.k-picker-outline::after {
     content: "";
+    border-width: 0 0 2px 0;
+    border-style: solid;
+    border-color: inherit;
+    border-radius: inherit;
+    display: block;
     position: absolute;
+    z-index: 2;
+    top: -1px;
     bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 2px;
-    margin: auto;
+    left: -1px;
+    right: -1px;
     opacity: 0;
-    transform: scaleX(0.5);
-    transition: transform .3s;
-    background-color: #3f51b5;
+    transform: scaleX(0);
+    transition: opacity .3s, transform .3s;
+    pointer-events: none;
 }
 
-.k-floating-label-container.k-state-focused::after, .k-floating-label-container.k-focus::after {
+.k-input-solid.k-focus::after, .k-input-solid.k-state-focused::after,
+.k-input-flat.k-focus::after,
+.k-input-flat.k-state-focused::after,
+.k-input-outline.k-focus::after,
+.k-input-outline.k-state-focused::after,
+.k-picker-solid.k-focus::after,
+.k-picker-solid.k-state-focused::after,
+.k-picker-flat.k-focus::after,
+.k-picker-flat.k-state-focused::after,
+.k-picker-outline.k-focus::after,
+.k-picker-outline.k-state-focused::after {
     opacity: 1;
     transform: scaleX(1);
 }
 
-.k-floating-label-container.k-state-invalid::after, .k-floating-label-container.k-invalid::after {
-    background-color: #f31700;
-    transition: none;
+.k-input-solid:focus-within::after,
+.k-input-flat:focus-within::after,
+.k-input-outline:focus-within::after,
+.k-picker-solid:focus-within::after,
+.k-picker-flat:focus-within::after,
+.k-picker-outline:focus-within::after {
+    opacity: 1;
+    transform: scaleX(1);
 }
 
-.k-input {
-    border-color: rgba(0, 0, 0, 0.54);
+.k-input-outline::after,
+.k-picker-outline::after {
+    border-width: 2px;
+    transform: none;
+}
+
+.k-input-outline.k-focus::after, .k-input-outline.k-state-focused::after,
+.k-picker-outline.k-focus::after,
+.k-picker-outline.k-state-focused::after {
+    transform: none;
+}
+
+.k-input-outline:focus-within::after,
+.k-picker-outline:focus-within::after {
+    transform: none;
+}
+
+.k-input-solid {
+    border-color: rgba(0, 0, 0, 0.38);
     color: rgba(0, 0, 0, 0.87);
     background-color: whitesmoke;
 }
 
-.k-input:hover, .k-input.k-hover {
+.k-input-solid:hover, .k-input-solid.k-hover {
     border-color: rgba(0, 0, 0, 0.87);
 }
 
-.k-input:focus, .k-input.k-focus {
+.k-input-solid:focus, .k-input-solid.k-focus {
     border-color: #3f51b5;
 }
 
-.k-input:focus-within {
+.k-input-solid:focus-within {
     border-color: #3f51b5;
 }
 
-.k-input:disabled, .k-input[disabled], .k-input.k-disabled {
+.k-input-solid:disabled, .k-input-solid[disabled], .k-input-solid.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 {
+.k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
     border-color: #f31700;
 }
 
-.k-input.k-invalid .k-input-validation-icon, .k-input.ng-invalid.ng-touched .k-input-validation-icon, .k-input.ng-invalid.ng-dirty .k-input-validation-icon {
+.k-input-solid.k-invalid .k-input-validation-icon, .k-input-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-input-solid.ng-invalid.ng-dirty .k-input-validation-icon {
     color: #f31700;
 }
 
-.k-picker {
-    border-color: rgba(0, 0, 0, 0.54);
+.k-picker-solid {
+    border-color: rgba(0, 0, 0, 0.38);
     color: rgba(0, 0, 0, 0.87);
     background-color: whitesmoke;
 }
 
-.k-picker:hover, .k-picker.k-hover {
+.k-picker-solid:hover, .k-picker-solid.k-hover {
     border-color: rgba(0, 0, 0, 0.87);
 }
 
-.k-picker:focus, .k-picker.k-focus {
+.k-picker-solid:focus, .k-picker-solid.k-focus {
     border-color: #3f51b5;
 }
 
-.k-picker:focus-within {
+.k-picker-solid:focus-within {
     border-color: #3f51b5;
 }
 
-.k-picker:disabled, .k-picker[disabled], .k-picker.k-disabled {
+.k-picker-solid:disabled, .k-picker-solid[disabled], .k-picker-solid.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 {
+.k-picker-solid.k-invalid, .k-picker-solid.ng-invalid.ng-touched, .k-picker-solid.ng-invalid.ng-dirty {
     border-color: #f31700;
 }
 
-.k-picker.k-invalid .k-input-validation-icon, .k-picker.ng-invalid.ng-touched .k-input-validation-icon, .k-picker.ng-invalid.ng-dirty .k-input-validation-icon {
+.k-picker-solid.k-invalid .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-solid.ng-invalid.ng-dirty .k-input-validation-icon {
     color: #f31700;
 }
 
+.k-input-outline {
+    border-color: rgba(0, 0, 0, 0.38);
+    color: rgba(0, 0, 0, 0.87);
+}
+
 .k-input-outline > .k-input-button {
     border-color: inherit;
 }
@@ -14521,6 +14542,24 @@ textarea.k-input-inner {
     border-color: inherit;
 }
 
+.k-input-outline:hover, .k-input-outline.k-hover {
+    border-color: rgba(0, 0, 0, 0.87);
+}
+
+.k-input-outline:focus, .k-input-outline.k-focus {
+    border-color: #3f51b5;
+}
+
+.k-input-outline:focus-within {
+    border-color: #3f51b5;
+}
+
+.k-input-outline:disabled, .k-input-outline[disabled], .k-input-outline.k-disabled {
+    border-color: rgba(0, 0, 0, 0.06);
+    color: rgba(0, 0, 0, 0.38);
+    background-color: #fafafa;
+}
+
 .k-input-outline.k-invalid, .k-input-outline.ng-invalid.ng-touched, .k-input-outline.ng-invalid.ng-dirty {
     border-color: #f31700;
 }
@@ -14530,13 +14569,30 @@ textarea.k-input-inner {
 }
 
 .k-picker-outline {
-    background-color: transparent;
+    border-color: rgba(0, 0, 0, 0.38);
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.k-picker-outline:hover, .k-picker-outline.k-hover {
+    border-color: rgba(0, 0, 0, 0.87);
 }
 
 .k-picker-outline:focus, .k-picker-outline.k-focus {
+    border-color: #3f51b5;
     background-color: nul;
 }
 
+.k-picker-outline:focus-within {
+    border-color: #3f51b5;
+    background-color: nul;
+}
+
+.k-picker-outline:disabled, .k-picker-outline[disabled], .k-picker-outline.k-disabled {
+    border-color: rgba(0, 0, 0, 0.06);
+    color: rgba(0, 0, 0, 0.38);
+    background-color: #fafafa;
+}
+
 .k-picker-outline.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
     border-color: #f31700;
 }
@@ -14546,7 +14602,26 @@ textarea.k-input-inner {
 }
 
 .k-input-flat {
-    background-color: transparent;
+    border-color: rgba(0, 0, 0, 0.38);
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.k-input-flat:hover, .k-input-flat.k-hover {
+    border-color: rgba(0, 0, 0, 0.87);
+}
+
+.k-input-flat:focus, .k-input-flat.k-focus {
+    border-color: #3f51b5;
+}
+
+.k-input-flat:focus-within {
+    border-color: #3f51b5;
+}
+
+.k-input-flat:disabled, .k-input-flat[disabled], .k-input-flat.k-disabled {
+    border-color: rgba(0, 0, 0, 0.06);
+    color: rgba(0, 0, 0, 0.38);
+    background-color: #fafafa;
 }
 
 .k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
@@ -14558,7 +14633,26 @@ textarea.k-input-inner {
 }
 
 .k-picker-flat {
-    background-color: transparent;
+    border-color: rgba(0, 0, 0, 0.38);
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.k-picker-flat:hover, .k-picker-flat.k-hover {
+    border-color: rgba(0, 0, 0, 0.87);
+}
+
+.k-picker-flat:focus, .k-picker-flat.k-focus {
+    border-color: #3f51b5;
+}
+
+.k-picker-flat:focus-within {
+    border-color: #3f51b5;
+}
+
+.k-picker-flat:disabled, .k-picker-flat[disabled], .k-picker-flat.k-disabled {
+    border-color: rgba(0, 0, 0, 0.06);
+    color: rgba(0, 0, 0, 0.38);
+    background-color: #fafafa;
 }
 
 .k-picker-flat.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
@@ -17029,6 +17123,13 @@ kendo-toolbar-renderer {
     border-color: #ebebeb;
 }
 
+.k-toolbar .k-button-solid-base.k-input-button,
+.k-toolbar .k-button-solid-base.k-input-spinner .k-spinner-increase,
+.k-toolbar .k-button-solid-base.k-input-spinner .k-spinner-decrease {
+    background: none;
+    border-color: transparent;
+}
+
 .k-actions, .k-edit-buttons,
 .k-action-buttons,
 .k-columnmenu-actions, .k-form-buttons {
@@ -20248,6 +20349,9 @@ kendo-label > .k-label {
 }
 
 .k-colorgradient-inputs .k-input-inner {
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
+    text-align: center;
     text-overflow: clip;
 }
 
@@ -24727,7 +24831,7 @@ kendo-card-footer {
 
 .k-pager-md .k-pager-numbers .k-current-page .k-link,
 .k-pager-sm .k-pager-numbers .k-current-page .k-link {
-    border-color: rgba(0, 0, 0, 0.54);
+    border-color: rgba(0, 0, 0, 0.38);
     color: rgba(0, 0, 0, 0.87);
     background-color: whitesmoke;
 }