yyzone/src/assets/styles/components/input-multilang.less

yyzone vue components and utils

@prefixInputMultiLangCls: ~'@{yy-css-prefix}input-multilang';

.@{prefixInputMultiLangCls} {
    display: inline-block;
    width: 100%;

    &-selection {
        .input;
        min-height: @yy-input-height-base;
        line-height: normal;
        padding: 3px 90px 3px 10px;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &-disabled {
            .disabled;
            input {
                .cursor(not-allowed);
            }
        }

        &-readonly {
            .readonly;
            input {
                .cursor(not-allowed);
            }
        }
        &-focus {
            .active;
        }

        .@{prefixFormItemCls}-error & {
            .input-error()
        }


        &-placeholder {
            font-size: @yy-font-size-small;
            line-height: 22px;
            color: @yy-input-placeholder-color;
        }

        &-bar {
            color: @yy-text-info-color;
            font-size: @yy-font-size-small;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -15px;
            height: 30px;
            line-height: 30px;
            padding-left: 8px;
            .cursor();
            .yy-icon {
                font-size: 10px;
            }
            &:before {
                content: '';
                width: 1px;
                height: 12px;
                position: absolute;
                top: 50%;
                margin-top: -6px;
                left: 0;
                background-color: #D8D8D8;
            }
        }

        input, textarea {
            outline: none;
            border: none;
            background-color: transparent;
            .square(100%);
            font-size: @yy-font-size-small;
            resize: none;
            &::placeholder {
                color: @yy-input-placeholder-color;
            }
        }
        textarea {
            padding: 7px 0;
        }

        input {
            height: 24px;
            line-height: 24px;
        }

        &-large {
            min-height: @yy-input-height-large;
            font-size: @yy-font-size-base;
            input {
                font-size: @yy-font-size-base;
            }
        }
    
        &-small {
            min-height: @yy-input-height-small;
            padding: 2px 20px 2px 10px;
        }
    }

    &-item {
        list-style: none;
        padding: 5px 9px;
        line-height: 22px;
        font-size: @yy-font-size-small;
        color: @yy-text-primary-color;
        .cursor();

        .yy-checkbox-wrapper {
            font-size: @yy-font-size-small;
        }

        &:hover {
            background-color: @yy-background-color-base;
        }

        &-selected {
            background-color: @yy-background-color-base;
        }

        &-disabled {
            .cursor(not-allowed);
            background-color: @yy-btn-disable-color;

            &:hover {
                background-color: @yy-btn-disable-color;
            }
        }
    }

    .@{prefixSelectCls}-dropdown {
        padding: 0;
        max-height: none;
    }
    
    &-drop {
        &-head {
            padding: 6px 10px;
            line-height: normal;
            background-color: @yy-background-color-disabled;
            .yy-checkbox-wrapper {
                font-size: @yy-font-size-small;
            }
        }
        &-body {
            padding: 4px 10px 0;
            .yy-form-item {
                margin-top: 8px;
            }
            .yy-form-item-label {
                font-size: 12px;
                color: @yy-text-primary-color;
            }
        }
        &-foot {
            padding: 15px 10px;
            text-align: right;
        }
    }
}