@progress/kendo-theme-fluent 5.7.0

package/scss/input/_layout.scss

@@ -0,0 +1,441 @@
+@use "_variables.scss" as *;
+@use "../core/" 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( --INTERNAL--kendo-input-font-size, inherit );
+        line-height: var( --INTERNAL--kendo-input-line-height, #{$kendo-line-height} );
+        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; // sass-lint:disable-line 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;
+        }
+    }
+
+    .k-input,
+    .k-picker {
+
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+
+            &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                border-width: var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} );
+                border-style: solid;
+                border-radius: inherit;
+                pointer-events: none;
+                z-index: 1;
+            }
+        }
+    }
+
+    // Solid and flat Numeric Textbox
+    .k-numerictextbox.k-input-solid,
+    .k-numerictextbox.k-input-flat  {
+
+        .k-spinner-increase,
+        .k-spinner-decrease {
+            border: none;
+        }
+    }
+
+    // Input and Textarea
+    .k-input {}
+    input.k-input,
+    textarea.k-textarea {
+        padding-inline: var( --INTERNAL--kendo-input-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-input-padding-y, 0 );
+    }
+
+
+    // Picker
+    .k-picker {
+        cursor: pointer;
+    }
+    select.k-picker {
+        padding-inline: var( --INTERNAL--kendo-input-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-input-padding-y,  0 );
+        appearance: auto;
+    }
+
+
+    // Input inner
+    .k-input-inner {
+        padding-inline: var( --INTERNAL--kendo-input-padding-x, #{$kendo-input-padding-x-md} );
+        padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-padding-y-md} );
+        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 {
+        width: 100%;
+        gap: calc( var( --INTERNAL--kendo-input-padding-y, 0 ) / 2 );
+        cursor: text;
+    }
+
+
+    // Icon picker
+    .k-icon-picker {
+        .k-input-inner {
+            padding: 0;
+            box-sizing: content-box;
+            justify-content: center;
+        }
+
+        .k-value-icon {
+            border: 0;
+            border-radius: 0;
+        }
+    }
+
+
+    // Input prefix and suffix
+    .k-input-prefix,
+    .k-input-suffix {
+        border: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        flex: none;
+
+        > * {
+            flex-shrink: 0;
+        }
+    }
+
+    // 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 {
+        width: var( --INTERNAL--kendo-input-icon-size, min-content );
+        height: var( --INTERNAL--kendo-input-icon-size, min-content );
+        flex: none;
+        align-self: center;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: center;
+    }
+
+
+    // // Clear value
+    .k-clear-value {
+        width: var( --INTERNAL--kendo-input-icon-size, min-content );
+        height: var( --INTERNAL--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;
+    }
+
+    // Input button
+    .k-input-button {
+        padding-inline:  var( --INTERNAL--kendo-input-button-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-input-button-padding-y, 0 );
+        border-width: 0;
+        border-radius: 0;
+        border-color: inherit;
+        flex: none;
+        aspect-ratio: auto;
+        box-shadow: none;
+
+        > .k-button-icon {
+            min-width: auto !important; // sass-lint:disable-line no-important
+            // min-height: auto !important; // sass-lint:disable-line no-important
+        }
+
+        &:focus {
+            box-shadow: 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;
+    }
+
+
+    // Input spinner
+    .k-input-spinner {
+        flex: none;
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-spinner-increase,
+        .k-spinner-decrease {
+            padding-inline: var( --INTERNAL--kendo-input-button-padding-x, 0 );
+            padding-block: var( --INTERNAL--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( --INTERNAL--kendo-input-border, inherit );
+            flex: 1 1 50%;
+            box-shadow: none;
+            position: relative;
+            aspect-ratio: auto;
+
+            > .k-button-icon {
+                margin: -1em 0;
+                min-width: auto !important; // sass-lint:disable-line no-important
+                min-height: auto !important; // sass-lint:disable-line no-important
+            }
+        }
+        .k-spinner-increase .k-icon {
+            bottom: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
+        }
+        .k-spinner-decrease .k-icon {
+           top: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
+        }
+    }
+
+    // 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 ); // sass-lint:disable-line no-important
+        border-width: var( --kendo-input-border-width, #{$kendo-input-border-width} ) 0;
+        border-top-color: transparent !important; // sass-lint:disable-line no-important
+
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+
+            &::after {
+                border-width: 0 0 var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} ) 0;
+            }
+
+        }
+
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+
+            &:focus,
+            &.k-focus,
+            &:focus-within {
+
+                &::after {
+                    border-width: 0 0 var( --kendo-input-focus-border-width, #{$kendo-input-focus-border-width} ) 0;
+                }
+            }
+        }
+    }
+
+    .k-input-flat,
+    .k-input-outline {
+        background: none !important; // sass-lint:disable-line no-important
+    }
+
+    // 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 );
+
+        .k-input-#{$size},
+        .k-picker-#{$size} {
+            --INTERNAL--kendo-input-font-size: #{$_font-size};
+            --INTERNAL--kendo-input-line-height: #{$_line-height};
+            --INTERNAL--kendo-input-padding-x: #{$_padding-x};
+            --INTERNAL--kendo-input-padding-y: #{$_padding-y};
+            --INTERNAL--kendo-input-button-padding-x: #{$_button-padding-x};
+            --INTERNAL--kendo-input-button-padding-y: #{$_button-padding-y};
+            --INTERNAL--kendo-input-icon-size: #{$_icon-size};
+
+            .k-input-button {
+                width: if( $use-input-button-width, var( --kendo-input-button-width, #{$_button-width} ), auto );
+            }
+
+            .k-input-spinner {
+                width: if( $use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
+            }
+
+            &.k-icon-picker .k-input-inner {
+                width: var( --kendo-input-icon-picker-width, #{$_button-width} );
+            }
+        }
+    }
+
+    // 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 {
+        from {}
+        to {}
+    }
+    @keyframes autoFillEnd {
+        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;
+    }
+}

package/scss/input/_theme.scss

@@ -0,0 +1,202 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-input--theme() {
+
+    .k-input {
+        --INTERNAL--kendo-input-text: var( --kendo-input-text );
+        --INTERNAL--kendo-input-bg: var( --kendo-input-bg );
+        --INTERNAL--kendo-input-border: var( --kendo-input-border );
+
+        color: var( --INTERNAL--kendo-input-text, initial );
+        background-color: var( --INTERNAL--kendo-input-bg, initial );
+        border-color: var( --INTERNAL--kendo-input-border, initial );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-input-text: var( --kendo-input-hover-text );
+            --INTERNAL--kendo-input-bg: var( --kendo-input-hover-bg );
+            --INTERNAL--kendo-input-border: var( --kendo-input-hover-border );
+        }
+
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+            --INTERNAL--kendo-input-text: var( --kendo-input-focus-text );
+            --INTERNAL--kendo-input-bg: var( --kendo-input-focus-bg );
+            --INTERNAL--kendo-input-border: var( --kendo-input-focus-border );
+
+            &::after {
+                border-color: var( --kendo-input-focus-border );
+            }
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            --INTERNAL--kendo-input-text: var( --kendo-input-hover-focus-text );
+            --INTERNAL--kendo-input-bg: var( --kendo-input-hover-focus-bg );
+            --INTERNAL--kendo-input-border: var( --kendo-input-hover-focus-border );
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            --INTERNAL--kendo-input-text: var( --kendo-input-disabled-text );
+            --INTERNAL--kendo-input-bg: var( --kendo-input-disabled-bg );
+            --INTERNAL--kendo-input-border: var( --kendo-input-disabled-border );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            --INTERNAL--kendo-input-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
+
+            &::after {
+                border-color: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
+            }
+
+            .k-input-validation-icon {
+                color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
+            }
+
+            &:focus:hover,
+            &.k-focus:hover,
+            &:focus.k-hover,
+            &.k-focus.k-hover {
+                --INTERNAL--kendo-input-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
+
+                .k-input-validation-icon {
+                    color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
+                }
+            }
+        }
+    }
+
+    .k-picker {
+        --INTERNAL--kendo-picker-text: var( --kendo-picker-text );
+        --INTERNAL--kendo-picker-bg: var( --kendo-picker-bg );
+        --INTERNAL--kendo-picker-border: var( --kendo-picker-border );
+
+        color: var( --INTERNAL--kendo-picker-text, initial );
+        background-color: var( --INTERNAL--kendo-picker-bg, initial );
+        border-color: var( --INTERNAL--kendo-picker-border, initial );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-picker-text: var( --kendo-picker-hover-text );
+            --INTERNAL--kendo-picker-bg: var( --kendo-picker-hover-bg );
+            --INTERNAL--kendo-picker-border: var( --kendo-picker-hover-border );
+        }
+
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+            --INTERNAL--kendo-picker-text: var( --kendo-picker-focus-text );
+            --INTERNAL--kendo-picker-bg: var( --kendo-picker-focus-bg );
+            --INTERNAL--kendo-picker-border: var( --kendo-picker-focus-border );
+
+            &::after {
+                border-color: var( --kendo-picker-focus-border );
+            }
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            --INTERNAL--kendo-picker-text: var( --kendo-picker-hover-focus-text );
+            --INTERNAL--kendo-picker-bg: var( --kendo-picker-hover-focus-bg );
+            --INTERNAL--kendo-picker-border: var( --kendo-picker-hover-focus-border );
+        }
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            --INTERNAL--kendo-picker-text: var( --kendo-picker-disabled-text );
+            --INTERNAL--kendo-picker-bg: var( --kendo-picker-disabled-bg );
+            --INTERNAL--kendo-picker-border: var( --kendo-picker-disabled-border );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            --INTERNAL--kendo-picker-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
+
+            &::after {
+                border-color: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
+            }
+
+            .k-input-validation-icon {
+                color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
+            }
+
+            &:focus:hover,
+            &.k-focus:hover,
+            &:focus.k-hover,
+            &.k-focus.k-hover {
+                --INTERNAL--kendo-picker-border: var( --kendo-input-invalid-border, #{$kendo-input-invalid-border} );
+
+                .k-input-validation-icon {
+                    color: var( --kendo-input-invalid-text, #{$kendo-input-invalid-text} );
+                }
+            }
+        }
+    }
+
+    @each $component, $fill-modes in $kendo-input-theme-colors {
+        @each $fill-mode, $color-props in $fill-modes {
+
+            $_text-color: map-get( $color-props, text );
+            $_background-color: map-get( $color-props, bg );
+            $_border-color: map-get( $color-props, border );
+
+            $_hover-text: map-get( $color-props, hover-text );
+            $_hover-bg: map-get( $color-props, hover-bg );
+            $_hover-border: map-get( $color-props, hover-border );
+
+            $_focus-text: map-get( $color-props, focus-text );
+            $_focus-bg: map-get( $color-props, focus-bg );
+            $_focus-border: map-get( $color-props, focus-border );
+
+            $_hover-focus-text: map-get( $color-props, hover-focus-text );
+            $_hover-focus-bg: map-get( $color-props, hover-focus-bg );
+            $_hover-focus-border: map-get( $color-props, hover-focus-border );
+
+            $_disabled-text: map-get( $color-props, disabled-text );
+            $_disabled-bg: map-get( $color-props, disabled-bg );
+            $_disabled-border: map-get( $color-props, disabled-border );
+
+            .k-#{$component}-#{$fill-mode} {
+                --kendo-#{$component}-text: var( --kendo-#{$component}-#{$fill-mode}-text, #{$_text-color} );
+                --kendo-#{$component}-bg: var( --kendo-#{$component}-#{$fill-mode}-bg, #{$_background-color} );
+                --kendo-#{$component}-border: var( --kendo-#{$component}-#{$fill-mode}-border, #{$_border-color} );
+
+
+                --kendo-#{$component}-hover-text: var( --kendo-#{$component}-#{$fill-mode}-hover-text, #{$_hover-text} );
+                --kendo-#{$component}-hover-bg: var( --kendo-#{$component}-#{$fill-mode}-hover-bg, #{$_hover-bg} );
+                --kendo-#{$component}-hover-border: var( --kendo-#{$component}-#{$fill-mode}-hover-border, #{$_hover-border} );
+
+
+
+                --kendo-#{$component}-focus-text: var( --kendo-#{$component}-#{$fill-mode}-focus-text, #{$_focus-text} );
+                --kendo-#{$component}-focus-bg: var( --kendo-#{$component}-#{$fill-mode}-focus-bg, #{$_focus-bg});
+                --kendo-#{$component}-focus-border: var( --kendo-#{$component}-#{$fill-mode}-focus-border, #{$_focus-border} );
+
+
+
+                --kendo-#{$component}-hover-focus-text: var( --kendo-#{$component}-#{$fill-mode}-hover-focus-text, #{$_hover-focus-text} );
+                --kendo-#{$component}-hover-focus-bg: var( --kendo-#{$component}-#{$fill-mode}-hover-focus-bg, #{$_hover-focus-bg} );
+                --kendo-#{$component}-hover-focus-border: var( --kendo-#{$component}-#{$fill-mode}-hover-focus-border, #{$_hover-focus-border} );
+
+
+                --kendo-#{$component}-disabled-text: var( --kendo-#{$component}-#{$fill-mode}-disabled-text, #{$_disabled-text} );
+                --kendo-#{$component}-disabled-bg: var( --kendo-#{$component}-#{$fill-mode}-disabled-bg, #{$_disabled-bg} );
+                --kendo-#{$component}-disabled-border: var( --kendo-#{$component}-#{$fill-mode}-disabled-border, #{$_disabled-border} );
+
+            }
+        }
+    }
+}