zmp-ui/input/styles/index.less

Zalo Mini App framework

@import "./variables.less";
@import "./mixins.less";

.@{input-prefix-cls} {
    .input(false);

    &-wrapper {
        .flex(column, center, flex-start);
        color: @light-input-text-color;
    }

    &-label {
        font-size: @input-label-font-size;
        line-height: @input-label-line-height;

        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
    }

    &-helper-text {
        .flex(row, flex-start, flex-start);

        font-size: @input-helper-text-font-size;
        line-height: @input-helper-text-line-height;

        color: @light-input-helper-text-color;

        &-icon {
            padding-right: 0;
            margin-right: @input-helper-icon-padding-right;
            margin-top: calc(calc(@input-helper-text-line-height - 16px) / 2);
        }

        &-content {
            flex: 1;
            display: inline-flex;
            line-height: @input-helper-text-line-height;
        }

        &-has-error {
            color: @light-input-error-text-color;
        }

        &-hidden {
            display: none;
        }
    }

    &-clear-btn {
        .flex(row, center, center);
        margin-right: @input-icon-space;

        &-hidden {
            display: none;
        }
    }

    &-clear-icon {
        color: @light-input-clear-icon-color;
    }

    &:not(:focus) {
        ~.@{input-prefix-cls}-suffix {
            .@{input-prefix-cls}-clear-icon-display-mode-focus {
                visibility: hidden;
            }
        }
    }

    &-status-success {
        .flex(row, center, center);

        padding-right: @input-padding;

        &-icon {
            color: @light-input-status-success-icon-color;
        }
    }

    &-password-icon {
        margin-right: @input-icon-space;
    }

    &-small {
        .input-size(unset, @input-height-small);
    }

    &-medium {
        .input-size(unset, @input-height-medium);
    }

    &-large {
        .input-size(unset, @input-height-large);
    }

    &:hover,
    &:focus,
    &:focus-visible {
        border-color: @light-input-hover-border-color;

        &.@{input-prefix-cls}-status-error {
            border-color: @light-input-status-error;
        }
    }

    &-status-error {
        border-color: @light-input-status-error;
    }

    &-disabled {
        color: @light-input-disabled-color;
        background-color: @light-input-disabled-background-color;
        border: none;
    }

    &-affix-wrapper {
        background-color: @light-input-background-color;

        .flex(row, flex-start, center);
        position: relative;
        width: 100%;
        border: @input-border-width solid @light-input-border-color;
        border-radius: @input-border-radius;
        margin: @input-margin 0px;

        &-focused {
            border-color: @light-input-hover-border-color;
        }

        .@{input-prefix-cls} {
            border: none;
            margin: 0;
        }

        .@{input-prefix-cls}-suffix {
            .flex(row, center, center);
        }

        &-status-error {
            border-color: @light-input-status-error;
        }

        &-disabled {
            border: none;
            color: @light-input-disabled-color;
            background-color: @light-input-disabled-background-color;

            .@{input-prefix-cls}-disabled {
                background-color: transparent;
            }

            .@{input-prefix-cls}-suffix {
                background-color: transparent;
            }
        }

        &:hover,
        &:focus,
        &:focus-visible {
            border-color: @light-input-hover-border-color;

            &.@{input-prefix-cls}-affix-wrapper-status-error {
                border-color: @light-input-status-error;
            }
        }
    }

    &-textarea {
        resize: none;
        padding: @input-padding;
        font-family: inherit;

        &::-webkit-resizer {
            -webkit-appearance: none;
        }

        &-min-height {
            min-height: @input-textarea-min-height;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        &-affix-wrapper {
            align-items: flex-start;
            padding: @input-padding 0;

            .@{input-prefix-cls}-textarea {
                padding-top: 0;
                padding-bottom: 0;
            }
        }

        ~.@{input-prefix-cls}-suffix {
            .@{input-prefix-cls}-show-count-suffix {
                position: absolute;
                bottom: @input-padding;
                right: @input-padding;
            }
        }

        &-has-show-count {
            margin-bottom: 24px !important;
        }
    }

    &-otp {
        position: relative;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: @input-otp-width;
        height: @input-otp-height;
        padding: @input-otp-padding;
        font-weight: @input-otp-font-weight;
        font-size: @input-otp-font-size;
        line-height: @input-otp-line-height;
        user-select: none;

        &:hover,
        &:focus,
        &:focus-visible {
            border-color: @light-input-border-color;
        }

        &-wrapper {
            position: relative;
        }

        &-hidden-input {
            position: absolute;
            width: 100%;
            opacity: 0;
            height: 0;
        }

        &-list {
            display: flex;

            .@{input-prefix-cls}-otp:not(:last-child) {
                margin-right: @input-otp-gap;
            }
        }

        &-active {
            border-color: @light-input-hover-border-color;
            border-width: 2px;

            &:hover,
            &:focus,
            &:focus-visible {
                border-color: @light-input-hover-border-color;
            }
        }

        &-cursor::after {
            position: absolute;
            content: "";
            width: 1px;
            background: @light-input-hover-border-color;
            height: 32px;
            animation: cursorAnimate 0.9s infinite;
        }

        &-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: @light-input-text-color;
        }
    }
}

.if-dark-theme( {
        .@{input-prefix-cls} {
            .input(true);

            &-wrapper {
                color: @dark-input-text-color;
            }

            &-affix-wrapper {

                background-color: @dark-input-background-color;

                .@{input-prefix-cls} {
                    border: none;
                    margin: 0;
                }

                &-focused {
                    border-color: @dark-input-hover-border-color;
                }

                &-status-error {
                    border-color: @dark-input-status-error;
                }

                &-disabled {
                    color: @dark-input-disabled-color;
                    background-color: @dark-input-disabled-background-color;

                    .@{input-prefix-cls}-disabled {
                        background-color: transparent;
                    }

                    .@{input-prefix-cls}-disabled {
                        background-color: transparent;
                    }

                    .@{input-prefix-cls}-suffix {
                        background-color: transparent;
                    }
                }

            }

            &-suffix {
                background-color: @dark-input-background-color;
            }

            &-helper-text {
                color: @dark-input-helper-text-color;

                &-has-error {
                    color: @dark-input-error-text-color;
                }
            }

            &-clear-icon {
                color: @dark-input-clear-icon-color;
            }

            &-status-success-icon {
                color: @dark-input-status-success-icon-color;
            }

            &-status-error {
                border-color: @dark-input-status-error;
            }

            &-disabled {
                color: @dark-input-disabled-color;
                background-color: @dark-input-disabled-background-color;
                border: none;
            }

            &:hover,
            &:focus,
            &:focus-visible {
                border-color: @dark-input-hover-border-color;

                &.@{input-prefix-cls}-affix-wrapper-status-error {
                    border-color: @dark-input-status-error;
                }
            }

            &:hover,
            &:focus-visible {
                ~.@{input-prefix-cls}-suffix {
                    .@{input-prefix-cls}-status-success-icon {
                        color: @dark-input-status-success-icon-focus-visible-color;
                    }

                }
            }

            &-otp {
                width: @input-otp-width;
                height: @input-otp-height;
                padding: @input-otp-padding;
                font-weight: @input-otp-font-weight;
                font-size: @input-otp-font-size;
                line-height: @input-otp-line-height;

                &:hover,
                &:focus,
                &:focus-visible {
                    border-color: @dark-input-border-color;
                }

                &-active {
                    border-color: @dark-input-hover-border-color;
                    border-width: 2px;

                    &:hover,
                    &:focus,
                    &:focus-visible {
                        border-color: @dark-input-hover-border-color;
                    }
                }

                &-cursor::after {
                    background: @dark-input-hover-border-color;
                }

                &-dot {
                    background: @dark-input-text-color;
                }
            }
        }
    }

);