4dkankan-components/packages/theme-chalk/scss/components/_input.scss

.ui-input {
    display: inline-flex;
    align-items: center;
    --base-border-color: rgba(255, 255, 255, 0.2);
    --colors-content-color: #fff;
    height: 100%;
    &.error {
        position: relative;
        --colors-primary-base: #fa3f48;
        --base-border-color: #fa3f48;
        .error-msg {
            top: 100%;
            position: absolute;
            color: var(--colors-primary-base);
            margin-top: 5px;
        }
    }

    &.require {
        position: relative;

        &::before {
            content: '*';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 100%;
            margin-right: 4px;
            color: #fa3f48;
            line-height: 1.5em;
        }
    }

    .input {
        position: relative;
        align-items: center;
        display: inline-flex;

        .input-div,
        textarea,
        input {
            width: 100%;
            height: 100%;
            outline: none;
            border: none;
            font-size: 14px;
            color: var(--colors-content-color);
            padding-left: 4px;
            resize: none;

            & + .replace {
                position: absolute;
                z-index: 1;
            }

            &.replace-input {
                opacity: 0;
                cursor: pointer;
            }
        }

        .pre-icon {
            position: absolute;
            z-index: 1;
        }
    }

    .label {
        cursor: pointer;
        margin-left: 7px;
    }

    .radio,
    .checkbox {
        width: 16px;
        height: 16px;

        input {
            & + .replace {
                color: var(--colors-color);
                border: 1px solid currentColor;
                background-color: var(--colors-normal-back);
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                pointer-events: none;
                transition: all 0.1s linear;
            }

            &:focus + .replace {
                border-color: var(--colors-primary-base);
            }

            &:checked + .replace {
                color: var(--colors-primary-base);
            }
        }
    }

    .checkbox input {
        & + .replace {
            border-radius: 4px;
            .icon {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) scale(0);
                transition: all 0.1s linear;
            }
        }

        &:checked + .replace {
            .icon {
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }

    .radio input {
        & + .replace {
            border-radius: 50%;
            &::after {
                content: '';
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) scale(0);
                transition: all 0.1s linear;
                width: 60%;
                height: 60%;
                background-color: currentColor;
            }
        }

        &:checked + .replace::after {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .text {
        width: 100%;
        height: 100%;
        border-radius: 4px;

        input {
            background: var(--colors-normal-back);
            height: 100%;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid var(--base-border-color);
            transition: border 0.3s ease;

            &:focus {
                border-color: var(--colors-primary-base);
            }
            &.warn {
                border-color: var(--colors-warn);
                &:focus {
                    border-color: var(--colors-warn);
                }
            }

            &::placeholder {
                color: var(--colors-color);
            }
        }

        &.pre-suffix {
            input {
                padding-left: 30px;
            }
            .pre-icon {
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        &.right input {
            text-align: right;
        }

        &.suffix {
            input {
                padding-right: 60px;
            }
            .retouch {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;
                cursor: pointer;
            }

            .len {
                font-size: var(--small-size);
                color: rgba(var(--colors-primary-fill), 1);

                span {
                    color: var(--colors-primary-base);
                }
            }
        }

        &.ready {
            .retouch,
            input {
                transition: all 0.1s linear;
            }
        }
    }

    .textarea {
        width: 100%;
        height: 100%;
        min-height: 50px;

        > .replace {
            border-radius: 4px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background: var(--colors-normal-back);
            border: 1px solid var(--base-border-color);
            transition: border 0.3s ease;
        }

        .input-div {
            overflow-y: auto;

            a {
                color: var(--color-main-normal);
            }
        }
        .input-div,
        textarea {
            height: 100%;
            width: 100%;
            padding: 10px;

            &:focus + .replace {
                border-color: var(--colors-primary-base);
            }

            &::placeholder {
                color: var(--colors-color);
            }
        }

        &.right .input-div,
        &.right textarea {
            text-align: right;
        }

        &.suffix {
            --bar-height: 30px;

            .input-div,
            textarea {
                margin-bottom: var(--bar-height);
                height: calc(100% - var(--bar-height));
            }

            > .retouch {
                position: absolute;
                right: 0;
                left: 0;
                bottom: 0;
                background-color: rgba(var(--colors-primary-fill), 0.1);
                height: var(--bar-height);
                display: flex;
                padding: 0 10px;
                align-items: center;
                justify-content: space-between;
            }

            .len {
                justify-self: end;
                font-size: var(--small-size);
                color: rgba(var(--colors-primary-fill), 1);

                span {
                    color: var(--colors-primary-base);
                }
            }
        }
    }

    .number {
        input {
            -moz-appearance: textfield;
        }
        input::-webkit-inner-spin-button,
        input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .ctrls {
            position: absolute;
            inset: 2px 0;
            width: 8px;
            .icon {
                position: absolute;
                right: 0;

                &.up {
                    bottom: 0;
                }
                &.down {
                    top: 0;
                }
            }
        }

        &.ctrl.suffix input {
            padding-right: 20px;
            z-index: 1;
        }
    }

    .select {
        input {
            cursor: pointer;
            &.ui-text {
                padding-right: 0;
            }
            &.icon {
                padding-right: 30px;
            }
        }

        &.focus {
            input {
                border-color: var(--colors-primary-base);
            }
            .retouch {
                transform: translateY(-50%) rotateZ(180deg);
            }
        }
    }

    .range {
        width: 100%;
        height: 100%;
        display: flex;
        --height: 6px;
        --slideSize: calc(var(--height) + 8px);

        .range-content {
            flex: 1;
            background-color: var(--colors-normal-back);
            position: relative;
            cursor: pointer;
        }

        .range-content::before,
        .range-content {
            height: var(--height);
            border-radius: calc(var(--height) / 2);
        }

        .range-content::before,
        .range-content .range-slide {
            content: '';
            position: absolute;
        }

        .range-content::before {
            pointer-events: none;
            left: 0;
            top: 0;
            width: var(--percentage);
            background-color: var(--colors-primary-base);
        }

        .range-locus {
            width: calc(100% - var(--slideSize));
            height: var(--height);
            position: relative;

            .range-slide {
                cursor: pointer;
                height: var(--slideSize);
                width: var(--slideSize);
                top: 50%;
                left: var(--percentage);
                transform: translateY(-50%);
                background-color: var(--colors-content-color);
                border-radius: 50%;
                .tips{
                  position: absolute;
                  background: rgba(0, 0, 0, 0.6);
                  padding: 4px 6px;
                  border-radius: 4px;
                  bottom: 120%;
                  left: 50%;
                  -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
                  display: none;
                  font-size: 12px;
                }
                &:hover{
                  .tips{
                   display: block;
                  }
                }
            }
        }

        .range-text {
            margin-left: 10px;
            width: 65px;
        }

        .animation {
            &.range-content::before,
            .range-slide {
                transition: all 0.1s linear;
            }
        }
    }

    .switch {
        --height: 24px;
        width: 50px;
        height: var(--height);

        .replace {
            background-color: rgba(255, 255, 255, 0.3);
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: calc(var(--height) / 2);
            pointer-events: none;
            position: relative;
            transition: background-color 0.3s ease;

            &::after {
                content: '';
                --padding: 3px;
                --size: calc(var(--height) - var(--padding) * 2);
                position: absolute;
                width: var(--size);
                height: var(--size);
                top: var(--padding);
                background: var(--colors-content-color);
                border-radius: 50%;
                left: var(--padding);
                transition: left 0.3s ease;
            }
        }

        input:checked + .replace {
            background-color: var(--colors-primary-base);

            &::after {
                left: calc(100% - var(--size) - var(--padding));
            }
        }
    }

    .file {
        width: 100%;
        height: 100%;

        input {
            cursor: pointer;
            opacity: 0;
        }
        .use-replace {
            position: absolute;
        }
        .use-replace,
        .replace {
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        &:not(.valuable) {
            .replace {
                top: 0;
                bottom: 0;
                background: rgba(var(--colors-primary-fill), 0.1);
                border-radius: 4px;
                border: 1px solid rgba(var(--colors-primary-fill), 0.2);
                // position: relative;

                .placeholder {
                    text-align: center;
                    max-width: 80%;

                    p:not(:last-child) {
                        margin-bottom: 10px;
                    }

                    .bottom {
                        font-size: 12px;
                        color: rgba(255, 255, 255, 0.3);
                        width: 90%;
                        position: absolute;
                        bottom: 10px;
                        left: 50%;
                        transform: translateX(-50%);
                        text-align: left;
                    }
                }
            }

            input {
                width: 100%;
                height: 100%;

                &:focus + .replace {
                    border-color: var(--colors-primary-base);
                }
            }
        }
        &.valuable {
            background: rgba(var(--colors-primary-fill), 0.1);
            border-radius: 4px;
            border: 1px solid rgba(var(--colors-primary-fill), 0.2);

            input,
            .replace {
                position: absolute;
                bottom: 0;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%);
                height: 32px;
                line-height: 32px;

                .tj {
                    position: absolute;
                    right: 10px;
                    top: 0;
                    bottom: 0;
                    display: flex;
                    align-items: center;
                    font-size: 10px;

                    > span {
                        color: var(--colors-primary-base);
                        margin-right: 4px;
                    }
                }
            }

            .icons {
                position: absolute;
                right: 10px;
                top: 0;

                span {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: rgba(0, 0, 0, 0.3);
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.6);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 10px;
                }
            }
        }
    }

    .search {
        .retouch {
            transform: translateY(-50%) !important;

            .clear {
                // background-color: rgba(255,255,255,.3);
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(255, 255, 255, 0.6);
                border-radius: 50%;
                cursor: pointer;
            }
        }
    }

    .color {
        &.default {
            input {
                opacity: 1;
                border: inherit;
                outline: inherit;
            }
        }
        .replace {
            pointer-events: none;
        }
    }
}

.select-float {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center top;

    &:not(.show) {
        transform: scale(1, 0);
        opacity: 0;
        pointer-events: none;
    }
    &.show {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.select-replace {
    --colors-content-color: #fff;
    list-style: none;
    max-height: 288px;
    background: rgba(26, 26, 26, 0.8);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3), inset 0 0 1px rgb(255 255 255 / 90%);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    overflow-y: auto;
    color: var(--colors-content-color);
    &.hide-scroll{
      max-height: 100%;
    }
    li {
        padding: 10px 10px;
        font-size: 14px;

        &.un-data {
            padding: 20px;
            color: rgba(255, 255, 255, 0.3);
            pointer-events: none;
        }
        &.active {
            background: var(--colors-normal-back);
            color: var(--colors-primary-base);
        }

        &:not(.active):hover {
            cursor: pointer;
            background-color: var(--colors-primary-base);
        }
    }
}

.is-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px;
}
.no-vip {
    .file {
        input {
            pointer-events: none;
        }
        label {
            pointer-events: none;
        }
    }
}