@progress/kendo-theme-bootstrap 7.1.0-dev.6 → 7.1.0-dev.8

package/dist/all.css

@@ -32266,7 +32266,6 @@ textarea.k-input-inner {
 .k-input-suffix {
     border-color: inherit;
     display: flex;
-    flex-flow: row nowrap;
     align-items: center;
     flex: none;
 }
@@ -32274,23 +32273,40 @@ textarea.k-input-inner {
 .k-input-prefix > *,
 .k-input-suffix > * {
     flex-shrink: 0;
+    border: none;
+}
+
+.k-input-prefix-vertical,
+.k-input-suffix-vertical {
+    flex-flow: column wrap;
+}
+
+.k-input-prefix-horizontal,
+.k-input-suffix-horizontal {
+    flex-flow: row wrap;
 }
 
 .k-input-separator {
     margin: 0;
-    width: 0;
-    height: 16px;
-    border-width: 0 0 0 1px;
     border-style: solid;
     border-color: inherit;
-    align-self: center;
+    height: auto;
+    align-self: stretch;
+}
+
+.k-input-separator-horizontal {
+    margin-inline: 0.375rem;
+    border-width: 1px 0 0;
+}
+
+.k-input-separator-vertical {
+    margin-block: 0.375rem;
+    border-width: 0 0 0 1px;
 }
 
 .k-input-icon,
 .k-input-validation-icon,
-.k-input-loading-icon,
-.k-input-prefix > .k-icon,
-.k-input-suffix > .k-icon {
+.k-input-loading-icon {
     flex: none;
     align-self: center;
     display: inline-flex;
@@ -32510,18 +32526,32 @@ textarea.k-input-inner {
 .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-prefix > .k-input-prefix-text,
 .k-input-sm .k-input-suffix > .k-icon,
+.k-input-sm .k-input-suffix > .k-input-suffix-text,
 .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-input-prefix > .k-icon,
-.k-picker-sm .k-input-suffix > .k-icon {
+.k-picker-sm .k-input-prefix > .k-input-prefix-text,
+.k-picker-sm .k-input-suffix > .k-icon,
+.k-picker-sm .k-input-suffix > .k-input-suffix-text {
     padding-block: 0.25rem;
     padding-inline: 0.25rem;
     box-sizing: content-box;
 }
 
+.k-input-sm .k-input-separator-horizontal,
+.k-picker-sm .k-input-separator-horizontal {
+    margin-inline: 0.25rem;
+}
+
+.k-input-sm .k-input-separator-vertical,
+.k-picker-sm .k-input-separator-vertical {
+    margin-block: 0.25rem;
+}
+
 .k-input-sm.k-icon-picker .k-input-inner,
 .k-picker-sm.k-icon-picker .k-input-inner {
     width: 1.4285714286em;
@@ -32579,18 +32609,32 @@ select.k-picker-sm {
 .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-prefix > .k-input-prefix-text,
 .k-input-md .k-input-suffix > .k-icon,
+.k-input-md .k-input-suffix > .k-input-suffix-text,
 .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-input-prefix > .k-icon,
-.k-picker-md .k-input-suffix > .k-icon {
+.k-picker-md .k-input-prefix > .k-input-prefix-text,
+.k-picker-md .k-input-suffix > .k-icon,
+.k-picker-md .k-input-suffix > .k-input-suffix-text {
     padding-block: 0.375rem;
     padding-inline: 0.375rem;
     box-sizing: content-box;
 }
 
+.k-input-md .k-input-separator-horizontal,
+.k-picker-md .k-input-separator-horizontal {
+    margin-inline: 0.375rem;
+}
+
+.k-input-md .k-input-separator-vertical,
+.k-picker-md .k-input-separator-vertical {
+    margin-block: 0.375rem;
+}
+
 .k-input-md.k-icon-picker .k-input-inner,
 .k-picker-md.k-icon-picker .k-input-inner {
     width: 1.5em;
@@ -32648,18 +32692,32 @@ select.k-picker-md {
 .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-prefix > .k-input-prefix-text,
 .k-input-lg .k-input-suffix > .k-icon,
+.k-input-lg .k-input-suffix > .k-input-suffix-text,
 .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-input-prefix > .k-icon,
-.k-picker-lg .k-input-suffix > .k-icon {
+.k-picker-lg .k-input-prefix > .k-input-prefix-text,
+.k-picker-lg .k-input-suffix > .k-icon,
+.k-picker-lg .k-input-suffix > .k-input-suffix-text {
     padding-block: 0.5rem;
     padding-inline: 0.5rem;
     box-sizing: content-box;
 }
 
+.k-input-lg .k-input-separator-horizontal,
+.k-picker-lg .k-input-separator-horizontal {
+    margin-inline: 0.5rem;
+}
+
+.k-input-lg .k-input-separator-vertical,
+.k-picker-lg .k-input-separator-vertical {
+    margin-block: 0.5rem;
+}
+
 .k-input-lg.k-icon-picker .k-input-inner,
 .k-picker-lg.k-icon-picker .k-input-inner {
     width: 1.5em;
@@ -32752,6 +32810,34 @@ select.k-picker-lg {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-input-solid.k-valid {
+    border-color: #198754;
+}
+
+.k-input-solid.k-valid .k-input-validation-icon {
+    color: #198754;
+}
+
+.k-input-solid.k-valid:focus, .k-input-solid.k-valid.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-input-solid.k-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-input-solid .k-input-prefix {
+    color: #6c757d;
+}
+
+.k-input-solid .k-input-suffix {
+    color: #6c757d;
+}
+
+.k-input-solid .k-input-separator {
+    border-color: #dee2e6;
+}
+
 .k-picker-solid {
     border-color: #e4e7eb;
     color: #212529;
@@ -32791,6 +32877,22 @@ select.k-picker-lg {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-picker-solid.k-valid {
+    border-color: #198754;
+}
+
+.k-picker-solid.k-valid .k-input-validation-icon {
+    color: #198754;
+}
+
+.k-picker-solid.k-valid:focus, .k-picker-solid.k-valid.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-picker-solid.k-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
 .k-input-outline {
     border-color: rgba(33, 37, 41, 0.5);
     color: #212529;
@@ -32835,6 +32937,34 @@ select.k-picker-lg {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-input-outline.k-valid {
+    border-color: #198754;
+}
+
+.k-input-outline.k-valid .k-input-validation-icon {
+    color: #198754;
+}
+
+.k-input-outline.k-valid:focus, .k-input-outline.k-valid.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-input-outline.k-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-input-outline .k-input-prefix {
+    color: #6c757d;
+}
+
+.k-input-outline .k-input-suffix {
+    color: #6c757d;
+}
+
+.k-input-outline .k-input-separator {
+    border-color: #dee2e6;
+}
+
 .k-picker-outline {
     border-color: rgba(33, 37, 41, 0.5);
     color: #212529;
@@ -32870,6 +33000,22 @@ select.k-picker-lg {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-picker-outline.k-valid {
+    border-color: #198754;
+}
+
+.k-picker-outline.k-valid .k-input-validation-icon {
+    color: #198754;
+}
+
+.k-picker-outline.k-valid:focus, .k-picker-outline.k-valid.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-picker-outline.k-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
 .k-input-flat {
     border-color: #ced4da;
     color: #212529;
@@ -32901,6 +33047,34 @@ select.k-picker-lg {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-input-flat.k-valid {
+    border-color: #198754;
+}
+
+.k-input-flat.k-valid .k-input-validation-icon {
+    color: #198754;
+}
+
+.k-input-flat.k-valid:focus, .k-input-flat.k-valid.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-input-flat.k-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-input-flat .k-input-prefix {
+    color: #6c757d;
+}
+
+.k-input-flat .k-input-suffix {
+    color: #6c757d;
+}
+
+.k-input-flat .k-input-separator {
+    border-color: #dee2e6;
+}
+
 .k-picker-flat {
     border-color: #e4e7eb;
     color: #212529;
@@ -32934,6 +33108,22 @@ select.k-picker-lg {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }
 
+.k-picker-flat.k-valid {
+    border-color: #198754;
+}
+
+.k-picker-flat.k-valid .k-input-validation-icon {
+    color: #198754;
+}
+
+.k-picker-flat.k-valid:focus, .k-picker-flat.k-valid.k-focus {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
+.k-picker-flat.k-valid:focus-within {
+    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
+}
+
 .k-floating-label-container {
     padding-top: 1.5rem;
     box-sizing: border-box;
@@ -35928,6 +36118,20 @@ select.k-picker-lg {
     padding-inline: 0.5rem;
 }
 
+.k-multiselecttree .k-input-values {
+    width: auto;
+    max-width: 100%;
+}
+
+.k-multiselecttree .k-input-inner::before {
+    content: "\200b";
+    width: 0px;
+    overflow: hidden;
+    flex: none;
+    display: inline-block;
+    vertical-align: top;
+}
+
 .k-rating {
     margin: 0;
     padding: 0;
@@ -38082,6 +38286,7 @@ kendo-drawer .k-drawer-wrapper {
 
 .k-drawer-content {
     flex: 1 1 auto;
+    overflow: auto;
 }
 
 .k-drawer-overlay .k-drawer {

package/dist/all.scss

@@ -4063,6 +4063,11 @@ $kendo-invalid-text: $kendo-color-error !default;
 $kendo-invalid-border: $kendo-color-error !default;
 $kendo-invalid-shadow: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !default;
 
+$kendo-valid-bg: null !default;
+$kendo-valid-text: $kendo-color-success !default;
+$kendo-valid-border: $kendo-color-success !default;
+$kendo-valid-shadow: 0 0 0 .25rem rgba( $kendo-valid-border, .25 ) !default;
+
 // Loading
 $kendo-loading-opacity: .3 !default;
 $kendo-zindex-loading: 100 !default;
@@ -5344,6 +5349,11 @@ $kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
 $kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
 $kendo-invalid-shadow: null !default;
 
+$kendo-valid-bg: initial !default;
+$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-shadow: null !default;
+
 // Disabled Styling
 $kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
 $kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
@@ -24919,11 +24929,18 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: $kendo-component-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
 /// The border color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-border: $kendo-invalid-border !default;
@@ -24931,6 +24948,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default;
 /// @group input
 $kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
 
+/// The border color of the valid Input components.
+/// @group input
+$kendo-input-valid-border: $kendo-valid-border !default;
+/// The shadow of the valid Input components.
+/// @group input
+$kendo-input-valid-shadow: $kendo-valid-shadow !default;
+
 /// The background color of the Picker components.
 /// @group picker
 $kendo-picker-bg: $kendo-button-bg !default;
@@ -26565,12 +26589,20 @@ $_kendo-module-meta: (
     .k-input-suffix {
         border-color: inherit;
         display: flex;
-        flex-flow: row nowrap;
         align-items: center;
         flex: none;
 
         > * {
             flex-shrink: 0;
+            border: none;
+        }
+
+        &-vertical {
+            flex-flow: column wrap;
+        }
+
+        &-horizontal {
+            flex-flow: row wrap;
         }
     }
 
@@ -26578,21 +26610,27 @@ $_kendo-module-meta: (
     // Input separator
     .k-input-separator {
         margin: 0;
-        width: 0;
-        height: $kendo-icon-size;
-        border-width: 0 0 0 1px;
         border-style: solid;
         border-color: inherit;
-        align-self: center;
+        height: auto;
+        align-self: stretch;
+
+        &-horizontal {
+            margin-inline: $kendo-input-md-padding-y;
+            border-width: 1px 0 0;
+        }
+
+        &-vertical {
+            margin-block: $kendo-input-md-padding-y;
+            border-width: 0 0 0 1px;
+        }
     }
 
 
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
-    .k-input-loading-icon,
-    .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-loading-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -26810,12 +26848,24 @@ $_kendo-module-meta: (
             .k-input-loading-icon,
             .k-clear-value,
             .k-input-prefix > .k-icon,
-            .k-input-suffix > .k-icon {
+            .k-input-prefix > .k-input-prefix-text,
+            .k-input-suffix > .k-icon,
+            .k-input-suffix > .k-input-suffix-text {
                 padding-block: $_padding-y;
                 padding-inline: $_padding-y;
                 box-sizing: content-box;
             }
 
+            .k-input-separator {
+                &-horizontal {
+                    margin-inline: $_padding-y;
+                }
+
+                &-vertical {
+                    margin-block: $_padding-y;
+                }
+            }
+
             &.k-icon-picker .k-input-inner {
                 width: calc( #{ $_line-height * 1em } );
                 height: calc( #{ $_line-height * 1em } );
@@ -26965,6 +27015,35 @@ $_kendo-module-meta: (
             }
         }
 
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -27041,6 +27120,23 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
     }
 
 
@@ -27126,6 +27222,35 @@ $_kendo-module-meta: (
             }
         }
 
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -27208,6 +27333,23 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
     }
 
 
@@ -27279,6 +27421,36 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -27361,6 +27533,23 @@ $_kendo-module-meta: (
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
     }
 
 }
@@ -34914,6 +35103,22 @@ $kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
     }
 
+    .k-multiselecttree {
+        .k-input-values {
+            width: auto;
+            max-width: 100%;
+        }
+
+        .k-input-inner::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
 }
 
 
@@ -39050,6 +39255,7 @@ $kendo-drawer-selected-hover-text: $kendo-selected-text !default;
     }
     .k-drawer-content {
         flex: 1 1 auto;
+        overflow: auto;
     }