@progress/kendo-theme-material 5.3.2-dev.1 → 5.3.2-dev.4

package/dist/all.css

@@ -14026,7 +14026,7 @@ textarea.k-input-inner {
 .k-input-button {
     width: auto;
     border-width: 0;
-    border-inline-start-width: 0px;
+    border-inline-start-width: 1px;
     flex: none;
     aspect-ratio: auto;
     box-shadow: none;
@@ -14056,7 +14056,7 @@ textarea.k-input-inner {
 .k-input-spinner .k-spinner-increase,
 .k-input-spinner .k-spinner-decrease {
     border-width: 0;
-    border-inline-start-width: 0px;
+    border-inline-start-width: 1px;
     flex: 1 1 50%;
     box-shadow: none;
     position: relative;
@@ -14105,20 +14105,28 @@ textarea.k-input-inner {
     border-radius: 0 !important;
     border-width: 1px 0;
     border-top-color: transparent !important;
-    background: none !important;
+    background-image: none !important;
 }
 
-.k-input-flat .k-input-inner,
-.k-picker-flat .k-input-inner {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+.k-input-flat:focus, .k-input-flat.k-focus,
+.k-picker-flat:focus,
+.k-picker-flat.k-focus {
+    border-radius: !important;
 }
 
-.k-input-outline,
-.k-picker-outline {
+.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;
@@ -14355,6 +14363,19 @@ textarea.k-input-inner {
     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;
+}
+
 .k-input-flat .k-input-button,
 .k-input-flat .k-input-spinner .k-spinner-increase,
 .k-input-flat .k-input-spinner .k-spinner-decrease,
@@ -14414,7 +14435,7 @@ textarea.k-input-inner {
 }
 
 .k-input {
-    border-color: rgba(0, 0, 0, 0.12);
+    border-color: rgba(0, 0, 0, 0.54);
     color: rgba(0, 0, 0, 0.87);
     background-color: whitesmoke;
 }
@@ -14446,7 +14467,7 @@ textarea.k-input-inner {
 }
 
 .k-picker {
-    border-color: rgba(0, 0, 0, 0.12);
+    border-color: rgba(0, 0, 0, 0.54);
     color: rgba(0, 0, 0, 0.87);
     background-color: whitesmoke;
 }
@@ -14477,6 +14498,67 @@ textarea.k-input-inner {
     color: #f31700;
 }
 
+.k-input-outline > .k-input-button {
+    border-color: inherit;
+}
+
+.k-input-outline > .k-input-spinner {
+    border-color: inherit;
+}
+
+.k-input-outline > .k-input-spinner > .k-spinner-increase,
+.k-input-outline > .k-input-spinner > .k-spinner-decrease {
+    border-color: inherit;
+}
+
+.k-input-outline.k-invalid, .k-input-outline.ng-invalid.ng-touched, .k-input-outline.ng-invalid.ng-dirty {
+    border-color: #f31700;
+}
+
+.k-input-outline.k-invalid .k-input-validation-icon, .k-input-outline.ng-invalid.ng-touched .k-input-validation-icon, .k-input-outline.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #f31700;
+}
+
+.k-picker-outline {
+    background-color: transparent;
+}
+
+.k-picker-outline:focus, .k-picker-outline.k-focus {
+    background-color: nul;
+}
+
+.k-picker-outline.k-invalid, .k-picker-outline.ng-invalid.ng-touched, .k-picker-outline.ng-invalid.ng-dirty {
+    border-color: #f31700;
+}
+
+.k-picker-outline.k-invalid .k-input-validation-icon, .k-picker-outline.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-outline.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #f31700;
+}
+
+.k-input-flat {
+    background-color: transparent;
+}
+
+.k-input-flat.k-invalid, .k-input-flat.ng-invalid.ng-touched, .k-input-flat.ng-invalid.ng-dirty {
+    border-color: #f31700;
+}
+
+.k-input-flat.k-invalid .k-input-validation-icon, .k-input-flat.ng-invalid.ng-touched .k-input-validation-icon, .k-input-flat.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #f31700;
+}
+
+.k-picker-flat {
+    background-color: transparent;
+}
+
+.k-picker-flat.k-invalid, .k-picker-flat.ng-invalid.ng-touched, .k-picker-flat.ng-invalid.ng-dirty {
+    border-color: #f31700;
+}
+
+.k-picker-flat.k-invalid .k-input-validation-icon, .k-picker-flat.ng-invalid.ng-touched .k-input-validation-icon, .k-picker-flat.ng-invalid.ng-dirty .k-input-validation-icon {
+    color: #f31700;
+}
+
 .k-floating-label-container {
     padding-top: 20px;
     box-sizing: border-box;
@@ -14587,10 +14669,13 @@ textarea.k-input-inner {
     color: rgba(0, 0, 0, 0.54);
 }
 
+.k-floating-label-container.k-focus > .k-label,
 .k-floating-label-container.k-state-focused > .k-label {
     color: #3f51b5;
 }
 
+.k-floating-label-container.k-invalid + .k-label,
+.k-floating-label-container .k-invalid + .k-label,
 .k-floating-label-container.k-state-invalid + .k-label,
 .k-floating-label-container .k-state-invalid + .k-label,
 .k-floating-label-container .ng-invalid.ng-touched + .k-label,
@@ -19478,7 +19563,7 @@ kendo-label > .k-label {
     color: #e51a5f;
 }
 
-.k-calendar .k-nav-today:hover, .k-calendar .k-nav-today.k-state-hover, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-state-focus {
+.k-calendar .k-nav-today:hover, .k-calendar .k-nav-today.k-hover, .k-calendar .k-nav-today.k-state-hover, .k-calendar .k-nav-today:focus, .k-calendar .k-nav-today.k-state-focus, .k-calendar .k-nav-today.k-focus {
     color: #c2185b;
 }
 
@@ -19508,20 +19593,24 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-calendar-td:hover .k-link,
-.k-calendar .k-calendar-td.k-state-hover .k-link {
+.k-calendar .k-calendar-td.k-state-hover .k-link,
+.k-calendar .k-calendar-td.k-hover .k-link {
     border-color: rgba(0, 0, 0, 0.15);
     color: rgba(0, 0, 0, 0.87);
     background-color: rgba(0, 0, 0, 0.04);
 }
 
-.k-calendar .k-calendar-td.k-state-selected .k-link {
+.k-calendar .k-calendar-td.k-state-selected .k-link,
+.k-calendar .k-calendar-td.k-selected .k-link {
     border-color: #3f51b5;
     color: white;
     background-color: #3f51b5;
 }
 
 .k-calendar .k-calendar-td.k-state-selected:hover .k-link,
-.k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link {
+.k-calendar .k-calendar-td.k-state-selected.k-state-hover .k-link,
+.k-calendar .k-calendar-td.k-selected:hover .k-link,
+.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
     color: white;
     background-color: #3c4eae;
 }
@@ -19533,7 +19622,8 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-calendar-navigation li:hover,
-.k-calendar .k-calendar-navigation li.k-state-hover {
+.k-calendar .k-calendar-navigation li.k-state-hover,
+.k-calendar .k-calendar-navigation li.k-hover {
     color: #c2185b;
 }
 
@@ -19581,7 +19671,8 @@ kendo-label > .k-label {
 }
 
 .k-calendar .k-range-start.k-state-active .k-link,
-.k-calendar .k-range-end.k-state-active .k-link {
+.k-calendar .k-range-end.k-state-active .k-link,
+.k-calendar .k-range-end.k-active .k-link {
     box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
@@ -23516,7 +23607,11 @@ kendo-card-footer {
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-.k-card:focus, .k-card.k-state-focus {
+.k-card:focus, .k-card.k-focus, .k-card.k-state-focus {
+    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+
+.k-card.k-selected, .k-card.k-state-selected {
     box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
 
@@ -23641,7 +23736,7 @@ kendo-card-footer {
     color: inherit;
 }
 
-.k-card-wrap.k-state-focused > .k-card, .k-card-wrap.k-state-selected > .k-card {
+.k-card-wrap.k-state-focused > .k-card, .k-card-wrap.k-focus > .k-card, .k-card-wrap:focus > .k-card, .k-card-wrap.k-state-selected > .k-card, .k-card-wrap.k-selected > .k-card {
     box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
 
@@ -24544,7 +24639,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.12);
+    border-color: rgba(0, 0, 0, 0.54);
     color: rgba(0, 0, 0, 0.87);
     background-color: whitesmoke;
 }
@@ -26152,6 +26247,7 @@ kendo-card-footer {
 }
 
 .k-tilelayout-item:focus,
+.k-tilelayout-item.k-focus,
 .k-tilelayout-item.k-state-focus,
 .k-tilelayout-item.k-state-focused {
     box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
@@ -27920,6 +28016,7 @@ div.k-grid-norecords {
 .k-filter-menu-container kendo-numeric-filter-menu,
 .k-filter-menu-container kendo-grid-string-filter-menu,
 .k-filter-menu-container kendo-grid-date-filter-menu,
+.k-filter-menu-container kendo-grid-numeric-filter-menu,
 .k-filter-menu-container kendo-grid-filter-menu-input-wrapper {
     display: flex;
     flex-flow: column nowrap;
@@ -31582,7 +31679,7 @@ thead.k-grid-header > tr:not(:only-child) > th {
     overflow-wrap: anywhere;
 }
 
-.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-state-focus, .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
+.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-focus, .k-taskboard-card .k-card-title.k-state-focus, .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-hover, .k-taskboard-card .k-card-title.k-state-hover {
     text-decoration: underline;
 }
 
@@ -31655,29 +31752,29 @@ thead.k-grid-header > tr:not(:only-child) > th {
     color: #3f51b5;
 }
 
-.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-state-focus {
+.k-taskboard-card .k-card-title:focus, .k-taskboard-card .k-card-title.k-focus, .k-taskboard-card .k-card-title.k-state-focus {
     color: #303f9f;
 }
 
-.k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
+.k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-hover, .k-taskboard-card .k-card-title.k-state-hover {
     color: #303f9f;
 }
 
-.k-taskboard-card:focus, .k-taskboard-card.k-state-focus {
+.k-taskboard-card:focus, .k-taskboard-card.k-focus, .k-taskboard-card.k-state-focus {
     border-color: rgba(0, 0, 0, 0.1628);
     box-shadow: none;
 }
 
-.k-taskboard-card:hover, .k-taskboard-card.k-state-hover {
+.k-taskboard-card:hover, .k-taskboard-card.k-hover, .k-taskboard-card.k-state-hover {
     border-color: rgba(0, 0, 0, 0.172);
 }
 
-.k-taskboard-card.k-state-selected {
+.k-taskboard-card.k-selected, .k-taskboard-card.k-state-selected {
     border-color: #7986cb;
     box-shadow: none;
 }
 
-.k-taskboard-card.k-state-disabled {
+.k-taskboard-card.k-disabled, .k-taskboard-card.k-state-disabled {
     outline: none;
     cursor: default;
     opacity: 0.6;
@@ -33358,15 +33455,20 @@ td.k-editor-content {
 
 .k-gantt-tooltip-validation-label {
     display: inline-flex;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    min-width: 50px;
 }
 
 .k-gantt-tooltip-validation-value {
     font-weight: 500;
 }
 
+.k-gantt-tooltip-validation-label,
+.k-gantt-tooltip-validation-value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .k-pdf-export-shadow .k-gantt {
     float: left;
 }
@@ -37664,7 +37766,7 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
     border-color: transparent;
 }
 
-.k-orgchart-card:focus, .k-orgchart-card.k-state-focus {
+.k-orgchart-card:focus, .k-orgchart-card.k-focus, .k-orgchart-card.k-state-focus {
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
@@ -37675,6 +37777,7 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
 }
 
 .k-orgchart-node-group-container:focus,
+.k-orgchart-node-group-container.k-focus,
 .k-orgchart-node-group-container.k-state-focus,
 .k-orgchart-node-group-container.k-state-focused {
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);