@progress/kendo-theme-material 5.4.2-dev.2 → 5.4.2-dev.5

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 {
@@ -15114,6 +15208,7 @@ textarea.k-input-inner {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    vertical-align: top;
 }
 
 .k-avatar-sm {
@@ -17028,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 {
@@ -18616,6 +18718,16 @@ kendo-label > .k-label {
     flex: 0 0 1px;
 }
 
+.k-slider .k-slider-track-wrap .k-tick-horizontal {
+    width: 1px;
+    min-height: 100%;
+}
+
+.k-slider .k-slider-track-wrap .k-tick-vertical {
+    width: 100%;
+    min-height: 1px;
+}
+
 .k-slider .k-slider-track-wrap .k-draghandle {
     position: absolute;
 }
@@ -20247,6 +20359,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;
 }
 
@@ -21110,6 +21225,7 @@ kendo-label > .k-label {
 
 .k-switch[dir="rtl"] .k-switch-thumb,
 [dir="rtl"] .k-switch .k-switch-thumb,
+.k-switch.k-rtl .k-switch-thumb,
 .k-rtl .k-switch .k-switch-thumb {
     transform: translate(50%, -50%);
 }
@@ -22875,6 +22991,7 @@ kendo-drawer .k-drawer-wrapper {
 
 .k-drawer {
     height: 100%;
+    max-width: 100%;
     border-width: 0;
     border-style: solid;
     box-sizing: border-box;
@@ -23019,6 +23136,33 @@ kendo-drawer .k-drawer-wrapper {
     padding: 0 16px;
     display: inline-block;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.k-drawer-item .k-drawer-toggle {
+    margin-inline-start: auto;
+    cursor: pointer;
+}
+
+.k-drawer-item.k-level-1 {
+    padding-inline-start: 16px;
+}
+
+.k-drawer-item.k-level-2 {
+    padding-inline-start: 32px;
+}
+
+.k-drawer-item.k-level-3 {
+    padding-inline-start: 48px;
+}
+
+.k-drawer-item.k-level-4 {
+    padding-inline-start: 64px;
+}
+
+.k-drawer-item.k-level-5 {
+    padding-inline-start: 80px;
 }
 
 .k-drawer-separator {
@@ -24725,7 +24869,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;
 }