@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/components/input/_layout.scss

@@ -0,0 +1,593 @@
+@use "sass:map";
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "./_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+@mixin kendo-input--layout-base() {
+
+    // Generic input
+    .k-input,
+    .k-picker {
+        @include border-radius( $kendo-input-border-radius );
+        margin: 0;
+        padding: 0;
+        width: $kendo-input-default-width;
+        min-width: 0;
+        box-sizing: border-box;
+        border-width: $kendo-input-border-width;
+        border-style: solid;
+        outline: 0;
+        font-family: $kendo-input-font-family;
+        font-size: $kendo-input-font-size;
+        line-height: $kendo-input-line-height;
+        font-weight: normal;
+        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: $kendo-input-placeholder-text;
+            opacity: $kendo-input-placeholder-opacity;
+            user-select: none;
+        }
+    }
+
+    // Input and Textarea
+    .k-input {}
+    input.k-input,
+    textarea.k-textarea {
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
+
+        &:disabled,
+        &[disabled] {
+            @include disabled( $kendo-disabled-styling... );
+        }
+    }
+
+    :is([disabled], .k-disabled) :is(input.k-input, textarea.k-textarea):is(:disabled, [disabled]) {
+        opacity: 1;
+        filter: grayscale(0);
+    }
+
+    textarea.k-textarea {
+        overflow: auto;
+    }
+
+
+    // Picker
+    .k-picker {
+        cursor: pointer;
+    }
+    select.k-picker {
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
+        appearance: auto;
+        align-items: center;
+
+        &:disabled,
+        &[disabled] {
+            @include disabled( $kendo-disabled-styling... );
+        }
+    }
+
+    :is([disabled], .k-disabled) select.k-picker:is(:disabled, [disabled]) {
+        opacity: 1;
+        filter: grayscale(0);
+    }
+
+
+    // Input inner
+    .k-input-inner {
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
+        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: $kendo-input-placeholder-text;
+            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;
+        cursor: text;
+    }
+    .k-input-values .k-chip-list {
+        display: contents;
+    }
+
+
+    // Icon picker
+    .k-icon-picker {
+        > .k-input-inner {
+            padding: $kendo-input-padding-y;
+            // TODO we need better way
+            // width: $kendo-input-inner-calc-height;
+            // height: $kendo-input-inner-calc-height;
+            justify-content: center;
+        }
+    }
+
+
+    // 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 {
+        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: $kendo-icon-size;
+    }
+
+    // Input with SVG icon
+    .k-input-icon,
+    .k-input-validation-icon,
+    .k-input-loading-icon {
+        &.k-svg-icon > svg,
+        &.k-icon-md > svg {
+            width: $kendo-icon-size-md;
+            height: $kendo-icon-size-md;
+        }
+
+        &.k-icon-xs > svg {
+            width: $kendo-icon-size-xs;
+            height: $kendo-icon-size-xs;
+        }
+
+        &.k-icon-sm > svg {
+            width: $kendo-icon-size-sm;
+            height: $kendo-icon-size-sm;
+        }
+
+        &.k-icon-lg > svg {
+            width: $kendo-icon-size-lg;
+            height: $kendo-icon-size-lg;
+        }
+
+        &.k-icon-xl > svg {
+            width: $kendo-icon-size-xl;
+            height: $kendo-icon-size-xl;
+        }
+
+        &.k-icon-xxl > svg {
+            width: $kendo-icon-size-xxl;
+            height: $kendo-icon-size-xxl;
+        }
+
+        &.k-icon-xxxl > svg {
+            width: $kendo-icon-size-xxxl;
+            height: $kendo-icon-size-xxxl;
+        }
+    }
+
+
+    // Clear value
+    .k-clear-value {
+        outline: 0;
+        color: $kendo-input-clear-value-text;
+        flex: none;
+        align-self: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: $kendo-input-clear-value-opacity;
+    }
+    .k-clear-value:hover,
+    .k-clear-value.k-hover {
+        color: $kendo-input-clear-value-hover-text;
+        opacity: $kendo-input-clear-value-hover-opacity;
+    }
+    .k-clear-value:focus-visible {
+        outline: 1px dotted;
+        outline-offset: -1px;
+    }
+
+
+    // Input button
+    .k-input-button {
+        width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto );
+        border-width: 0;
+        border-inline-start-width: $kendo-input-button-border-width;
+        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 {
+            box-shadow: none;
+        }
+    }
+    .k-picker .k-input-button {
+        color: inherit;
+        background: none;
+        border-color: transparent;
+    }
+
+
+    // Input spinner
+    .k-input-spinner {
+        width: if( $kendo-use-input-spinner-width, $kendo-input-spinner-width, auto );
+        flex: none;
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-spinner-increase,
+        .k-spinner-decrease {
+            border-width: 0;
+            border-inline-start-width: $kendo-input-button-border-width;
+            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 );
+        }
+    }
+
+
+    // 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: $kendo-input-border-width 0;
+        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+        background-image: none !important; // stylelint-disable-line declaration-no-important
+    }
+
+    .k-input-outline {
+        background: none !important; // stylelint-disable-line declaration-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 );
+        $_button-padding-x: map.get( $size-props, button-padding-x );
+        $_button-padding-y: map.get( $size-props, button-padding-y );
+
+        .k-input-#{$size},
+        .k-picker-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            .k-input-values {
+                padding: calc( #{$_padding-y} /2 );
+                gap: calc( #{$_padding-y} / 2 );
+            }
+            .k-input-values > .k-searchbar,
+            .k-input-values > .k-input-inner {
+                margin: calc( calc( #{$_padding-y} / 2 ) * -1 );
+            }
+
+            .k-input-inner {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+            }
+
+            .k-input-button,
+            .k-spinner-increase,
+            .k-spinner-decrease {
+                padding-block: $_button-padding-y;
+                padding-inline: $_button-padding-x;
+            }
+
+            .k-input-icon,
+            .k-input-validation-icon,
+            .k-input-loading-icon,
+            .k-clear-value,
+            .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;
+            }
+
+            .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 ) );
+                padding: $_padding-y;
+                box-sizing: content-box;
+            }
+        }
+        .k-dropdown-operator.k-picker-#{$size} {
+            .k-input-button {
+                padding: $_padding-y;
+            }
+        }
+        select.k-picker-#{$size} {
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
+        }
+    }
+
+
+    // 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;
+    }
+
+}
+
+
+@mixin kendo-input--layout() {
+    @include kendo-input--layout-base();
+}