@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0

package/scss/input/_layout.scss

@@ -2,62 +2,11 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/input/_layout.scss" as *;
 
 @mixin kendo-input--layout() {
 
-    // Generic input
-    .k-input,
-    .k-picker {
-        margin: 0;
-        padding: 0;
-        width: var( --kendo-input-width, #{$kendo-input-width} );
-        min-width: 0;
-        box-sizing: border-box;
-        border-width: var( --kendo-input-border-width, #{$kendo-input-border-width} );
-        border-style: solid;
-        outline: 0;
-        font-family: var( --kendo-input-font-family, #{$kendo-input-font-family} );
-        font-size: var( --kendo-input-font-size, inherit );
-        line-height: var( --kendo-input-line-height, #{$kendo-line-height-md} );
-        font-weight: var( --kendo-input-font-weight, #{$kendo-input-font-weight} );
-        text-align: start;
-        box-shadow: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        vertical-align: middle;
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-appearance: none;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        > .k-input,
-        > .k-picker {
-            border-width: 0 !important; // stylelint-disable-line declaration-no-important
-            color: inherit;
-            background: none;
-            font: inherit;
-            outline: 0;
-            box-shadow: none;
-        }
-
-        // fix for Safari
-        & > * {
-            margin: 0;
-        }
-
-        &::placeholder {
-            color: var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} );
-            opacity: var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} );
-            user-select: none;
-        }
-    }
+    @include kendo-input--layout-base();
 
     .k-input,
     .k-picker {
@@ -74,7 +23,7 @@
                 right: 0;
                 bottom: 0;
                 left: 0;
-                border-width: var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} );
+                border-width: $kendo-input-focus-border-width;
                 border-style: solid;
                 border-radius: inherit;
                 pointer-events: none;
@@ -93,103 +42,6 @@
         }
     }
 
-    // Input and Textarea
-    .k-input {}
-    input.k-input,
-    textarea.k-textarea {
-        padding-inline: var( --kendo-input-padding-x, 0 );
-        padding-block: var( --kendo-input-padding-y, 0 );
-    }
-    textarea.k-textarea {
-        overflow: auto;
-    }
-
-
-    // Picker
-    .k-picker {
-        cursor: pointer;
-    }
-    select.k-picker {
-        padding-inline: var( --kendo-input-padding-x, 0 );
-        padding-block: var( --kendo-input-padding-y,  0 );
-        appearance: auto;
-        align-items: center;
-    }
-
-
-    // Input inner
-    .k-input-inner {
-        padding-inline: var( --kendo-input-padding-x, #{$kendo-input-md-padding-x} );
-        padding-block: var( --kendo-input-padding-y, #{$kendo-input-md-padding-y} );
-        width: 100%;
-        border: 0;
-        outline: 0;
-        color: inherit;
-        background: none;
-        font: inherit;
-        flex: 1;
-        position: relative;
-        z-index: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-appearance: none;
-
-        // Placeholder text
-        &::placeholder {
-            color: var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} );
-            opacity: var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} );
-            user-select: none;
-        }
-
-        // Invalid
-        &:invalid {
-            box-shadow: none;
-        }
-    }
-    span.k-input-inner {
-        white-space: nowrap;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-    }
-    textarea.k-input-inner {
-        margin: 0;
-    }
-
-
-    // Input value
-    .k-input-value-icon {
-        flex: none;
-    }
-    .k-input-value-text {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .k-input-value-text::before {
-        content: "\200b";
-        width: 0px;
-        overflow: hidden;
-        flex: none;
-        display: inline-block;
-        vertical-align: top;
-    }
-
-
-    // Input multiple values
-    .k-input-values {
-        min-width: 0px;
-        width: 100%;
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        gap: calc( var( --kendo-input-padding-y, 0 ) / 2 );
-        cursor: text;
-    }
-    .k-input-values .k-chip-list {
-        display: contents;
-    }
-
 
     // Icon picker
     .k-icon-picker {
@@ -205,296 +57,47 @@
         }
     }
 
-
-    // Input prefix and suffix
-    .k-input-prefix,
-    .k-input-suffix {
-        border-color: inherit;
-        display: flex;
-        align-items: center;
-        flex: none;
-
-        > * {
-            flex-shrink: 0;
-            border: none;
-        }
-
-        &-vertical {
-            flex-flow: column wrap;
-        }
-
-        &-horizontal {
-            flex-flow: row wrap;
-        }
-    }
-
-
-    // Input separator
-    .k-input-separator {
-        margin: 0;
-        border-style: solid;
-        border-color: inherit;
-        border-width: 0 0 0 1px;
-        height: $kendo-icon-size;
-        align-self: center;
-
-        &-horizontal {
-            height: auto;
-            margin-inline: $kendo-input-md-padding-y;
-            align-self: stretch;
-            border-width: 1px 0 0;
-        }
-
-        &-vertical {
-            height: auto;
-            margin-block: $kendo-input-md-padding-y;
-            align-self: stretch;
-            border-width: 0 0 0 1px;
-        }
-    }
-
-    // Input group
-    .k-input-group {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        box-sizing: border-box;
-        list-style: none;
-        outline: 0;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        > .k-input + .k-input {
-            margin-inline-start: if( $kendo-input-border-width == 0, null, -$kendo-input-border-width );
-        }
-
-        > .k-input:hover,
-        > .k-input.k-hover,
-        > .k-input:focus,
-        > .k-input:focus-within,
-        > .k-input.k-focus,
-        > .k-input:active,
-        > .k-input.k-active,
-        > .k-input.k-selected {
-            z-index: 2;
-        }
-
-        .k-input:not(:first-child):not(:last-child) {
-            border-start-end-radius: 0;
-            border-end-end-radius: 0;
-            border-start-start-radius: 0;
-            border-end-start-radius: 0;
-        }
-        > .k-input:first-child:not(:only-child) {
-            border-start-end-radius: 0;
-            border-end-end-radius: 0;
-        }
-        > .k-input:last-child:not(:only-child) {
-            border-start-start-radius: 0;
-            border-end-start-radius: 0;
-        }
-
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            opacity: 1;
-            filter: none;
-        }
-    }
-
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
     .k-input-loading-icon {
-        padding-inline: var( --kendo-input-padding-y, #{$kendo-input-md-padding-y} );
-        padding-block: var( --kendo-input-padding-y, #{$kendo-input-md-padding-y} );
-        flex: none;
-        align-self: center;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: center;
-        box-sizing: content-box;
-    }
-
-    .k-input-loading-icon {
-        width: 1em;
-        height: 1em;
-        font-size: var( --kendo-icon-size-md, 1rem );
-    }
-
-    // Input with SVG icon
-    .k-input-icon,
-    .k-input-validation-icon,
-    .k-input-loading-icon {
-        &.k-svg-icon > svg,
-        &.k-icon-md > svg {
-            width: var( --kendo-icon-size-md, 1rem );
-            height: var( --kendo-icon-size-md, 1rem );
-        }
-
-        &.k-icon-xs > svg {
-            width: var( --kendo-icon-size-sm, 0.75rem );
-            height: var( --kendo-icon-size-sm, 0.75rem )s;
-        }
-
-        &.k-icon-sm > svg {
-            width: var( --kendo-icon-size-sm, 0.875rem );
-            height: var( --kendo-icon-size-sm, 0.875rem );
-        }
-
-        &.k-icon-lg > svg {
-            width: var( --kendo-icon-size-lg, 1.25rem );
-            height: var( --kendo-icon-size-lg, 1.25rem );
-        }
-
-        &.k-icon-xl > svg {
-            width: var( --kendo-icon-size-xl, 1.5rem );
-            height: var( --kendo-icon-size-xl, 1.5rem );
-        }
-
-        &.k-icon-xxl > svg {
-            width: var( --kendo-icon-size-xxl, 2rem );
-            height: var( --kendo-icon-size-xxl, 2rem );
-        }
-
-        &.k-icon-xxxl > svg {
-            width: var( --kendo-icon-size-xxl, 3rem );
-            height: var( --kendo-icon-size-xxl, 3rem );
-        }
-    }
-
-
-    // Clear value
-    .k-clear-value {
-        width: var( --kendo-input-icon-size, min-content );
-        height: var( --kendo-input-icon-size, min-content );
-        outline: 0;
-        color: var( --kendo-input-clear-value-text, #{$kendo-input-clear-value-text} );
-        flex: none;
-        align-self: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        opacity: var( --kendo-input-clear-value-opacity, #{$kendo-input-clear-value-opacity} );
-    }
-    .k-clear-value:hover,
-    .k-clear-value.k-hover {
-        color: var( --kendo-input-clear-value-hover-text, #{$kendo-input-clear-value-hover-text} );
-        opacity: var( --kendo-input-clear-value-hover-opacity, #{$kendo-input-clear-value-hover-opacity} );
-    }
-    .k-clear-value:focus-visible {
-        outline: 1px dotted;
-        outline-offset: -1px;
+        padding-inline: $kendo-input-md-padding-y;
+        padding-block: $kendo-input-md-padding-y;
     }
 
     // Input button
     .k-input-button {
-        padding-inline:  var( --kendo-input-button-padding-x, 0 );
-        padding-block: var( --kendo-input-button-padding-y, 0 );
-        border-width: 0;
         border-radius: 0;
+        border-width: 0;
         border-color: inherit;
-        flex: none;
-        aspect-ratio: auto;
-        box-shadow: none;
-
-        > .k-button-icon {
-            min-width: auto !important; // stylelint-disable-line declaration-no-important
-            // min-height: auto !important; // stylelint-disable-line declaration-no-important
-        }
-
-        &:focus::after {
-            outline: none;
-        }
     }
     .k-input-outline .k-input-button {
-        border-inline-start-width: var( --kendo-input-button-border-width, 1px );
-    }
-    .k-picker .k-input-button {
-        color: inherit;
-        background: none;
-        border-color: transparent;
+        border-inline-start-width: $kendo-input-button-border-width;
     }
 
 
     // Input spinner
     .k-input-spinner {
-        flex: none;
-        display: flex;
-        flex-flow: column nowrap;
+        border-color: inherit;
 
         .k-spinner-increase,
         .k-spinner-decrease {
-            padding-inline: var( --kendo-input-button-padding-x, 0 );
-            padding-block: var( --kendo-input-button-padding-y, 0 );
-            border-width: 0;
-            border-inline-start-width: var( --kendo-input-button-border-width, 1px );
             border-radius: 0;
-            border-color: var( --kendo-input-border, inherit );
-            flex: 1 1 50%;
-            box-shadow: none;
-            position: relative;
-            aspect-ratio: auto;
-
-            .k-button-icon {
-                margin-block: -1em;
-                margin-inline: 0;
-                min-width: auto !important; // stylelint-disable-line declaration-no-important
-                min-height: auto !important; // stylelint-disable-line declaration-no-important
-            }
-        }
-        .k-spinner-increase .k-icon  {
-            bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
-        }
-
-        .k-spinner-decrease .k-icon  {
-           top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
+            border-color: inherit;
         }
     }
 
-    // Searchbar
-    .k-searchbar {
-        flex: 1 1 auto;
-        display: flex;
-        flex-flow: row nowrap;
-    }
-
-    // Legacy wrappers
-    .k-picker-wrap,
-    .k-dropdown-wrap,
-    .k-dateinput-wrap,
-    .k-multiselect-wrap,
-    .k-numeric-wrap {
-        width: 100%;
-        border-width: 0;
-        border-color: inherit;
-        box-sizing: border-box;
-        flex: 1 1 auto;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: hidden;
-        position: relative;
-    }
 
     // Fill mode
     .k-input-flat,
     .k-picker-flat {
-        @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
-        border-width: var( --kendo-input-border-width, #{$kendo-input-border-width} ) 0;
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
 
         &:focus,
         &.k-focus,
         &:focus-within {
 
             &::after {
-                border-width: 0 0 var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} ) 0;
+                border-width: 0 0 $kendo-input-focus-border-width;
             }
 
         }
@@ -508,7 +111,7 @@
             &:focus-within {
 
                 &::after {
-                    border-width: 0 0 var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} ) 0;
+                    border-width: 0 0 $kendo-input-focus-border-width;
                 }
             }
         }
@@ -521,87 +124,52 @@
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_icon-size: map.get( $size-props, icon-size );
         $_button-padding-x: map.get( $size-props, button-padding-x );
         $_button-padding-y: map.get( $size-props, button-padding-y );
         $_button-width: map.get( $size-props, button-width );
+        $_icon-size: map.get( $size-props, icon-size );
 
         .k-input-#{$size},
         .k-picker-#{$size} {
-            --kendo-input-font-size: #{$_font-size};
-            --kendo-input-line-height: #{$_line-height};
-            --kendo-input-padding-x: #{$_padding-x};
-            --kendo-input-padding-y: #{$_padding-y};
-            --kendo-input-button-padding-x: #{$_button-padding-x};
-            --kendo-input-button-padding-y: #{$_button-padding-y};
-            --kendo-input-icon-size: #{$_icon-size};
+
+            .k-input-values {
+                padding: 0;
+            }
+            .k-input-values > .k-searchbar,
+            .k-input-values > .k-input-inner {
+                margin: 0;
+            }
 
             .k-input-button {
                 width: if( $kendo-use-input-button-width, var( --kendo-input-button-width, #{$_button-width} ), auto );
+                padding-inline: $_button-padding-x;
+                padding-block: $_button-padding-y;
             }
 
             .k-input-spinner {
                 width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
+
+                .k-spinner-increase,
+                .k-spinner-decrease {
+                    padding-inline: $_button-padding-x;
+                    padding-block: $_button-padding-y;
+                }
             }
 
             &.k-icon-picker > .k-input-inner {
                 width: var( --kendo-input-icon-picker-width, #{$_button-width} );
+                height: auto;
+                padding: 0;
             }
 
-            .k-input-prefix > .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;
+            // Clear value
+            .k-clear-value {
+                width: $_icon-size;
+                height: $_icon-size;
+                padding: 0;
+                box-sizing: border-box;
             }
 
-            .k-input-separator {
-                &-horizontal {
-                    margin-inline: $_padding-y;
-                }
-
-                &-vertical {
-                    margin-block: $_padding-y;
-                }
-            }
         }
     }
-
-    // Angular specific
-    .k-input > kendo-popup,
-    .k-picker > kendo-popup {
-        position: fixed;
-    }
-
-    // This is needed for the textbox container to capture browser autofill
-    @keyframes autoFillStart { // stylelint-disable-line
-        from {}
-        to {}
-    }
-    @keyframes autoFillEnd { // stylelint-disable-line
-        from {}
-        to {}
-    }
-
-    // Generic class for autofill animations
-    .k-autofill:-webkit-autofill {
-        animation-name: autoFillStart;
-    }
-    .k-autofill:not(:-webkit-autofill) {
-        animation-name: autoFillEnd;
-    }
-
-
-    .k-input:-webkit-autofill {
-        animation-name: autoFillStart;
-    }
-    .k-input:not(:-webkit-autofill) {
-        animation-name: autoFillEnd;
-    }
 }