@cw-devops/bk-magic-vue/lib/ui/input.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

:root{
    --font-size:12px;
}

:root .medium-font{
        --font-size:12px;
    }

:root .large-font{
        --font-size:12px;
    }

.bk-form-control{
    position:relative;
    display:inline-block;
    width:100%;
    display:block;
    color:#63656e;
}

.bk-form-control .bk-limit-box{
        position:absolute;
        bottom:2px;
        right:7px;
        font-size:12px;
        margin:0;
        padding:0;
        color:#979ba5;
        -webkit-transform:scale(0.8, 0.8);
                transform:scale(0.8, 0.8);
    }

.bk-form-control .bk-limit-box .strong{
            color:#63656e;
        }

.bk-form-control.control-active .bk-textarea-wrapper{
            border-color:#3a84ff !important;
            background-color:#fff !important
        }

.bk-form-control.control-active .bk-textarea-wrapper::-webkit-input-placeholder{
                color:#c4c6cc !important;
            }

.bk-form-control.control-active .bk-textarea-wrapper::-moz-placeholder{
                color:#c4c6cc !important;
            }

.bk-form-control.control-active .bk-textarea-wrapper:-ms-input-placeholder{
                color:#c4c6cc !important;
            }

.bk-form-control.control-active .bk-textarea-wrapper::-ms-input-placeholder{
                color:#c4c6cc !important;
            }

.bk-form-control.control-active .bk-textarea-wrapper::placeholder{
                color:#c4c6cc !important;
            }

.bk-form-control.control-disable .bk-textarea-wrapper{
            background-color:#fafbfd;
            cursor:not-allowed;
        }

.bk-form-control.control-prepend-group{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        background-color:#f2f4f8;
    }

.bk-form-control.control-prepend-group .bk-form-input,
        .bk-form-control.control-prepend-group .bk-form-password,
        .bk-form-control.control-prepend-group .bk-form-select,
        .bk-form-control.control-prepend-group .bk-form-textarea{
            border-radius:0 2px 2px 0;
        }

.bk-form-control.control-append-group{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
    }

.bk-form-control.control-append-group .bk-form-input,
        .bk-form-control.control-append-group .bk-form-password,
        .bk-form-control.control-append-group .bk-form-select,
        .bk-form-control.control-append-group .bk-form-textarea{
            border-radius:2px 0 0 2px;
        }

.bk-form-control.control-prepend-group.control-append-group .bk-form-input,
        .bk-form-control.control-prepend-group.control-append-group .bk-form-password,
        .bk-form-control.control-prepend-group.control-append-group .bk-form-select,
        .bk-form-control.control-prepend-group.control-append-group .bk-form-textarea{
            border-radius:0;
        }

.bk-form-control .group-box{
        vertical-align:middle;
        position:relative;
        border:1px solid #cbd5e0;
        border-radius:2px;
        height:30px;
        background-color:#fafbfd;
    }

.bk-form-control .group-box .group-text{
            display:inline-block;
            max-width:200px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            color:#8797aa;
            padding:0 15px;
            font-size:12px;
            font-size:var(--font-size);
            vertical-align:middle;
            line-height:28px
        }

.bk-form-control .group-box .group-text.bk-dropdown-menu{
                padding:0;
                overflow:visible;
                white-space:normal;
            }

.bk-form-control .group-box .group-text.bk-dropdown-menu .bk-button{
                    display:inline-block;
                    max-width:200px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    border:none;
                    border-radius:0;
                    padding-right:30px;
                    color:#8797aa;
                    background-color:#fafbfd;
                }

.bk-form-control .group-box .group-text.bk-dropdown-menu .bk-button .bk-icon{
                        position:absolute;
                        right:10px;
                        top:6px;
                    }

.bk-form-control .group-box.group-prepend{
            border-right:none;
            border-radius:2px 0 0 2px;
        }

.bk-form-control .group-box.group-prepend .bk-dropdown-trigger{
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
            }

.bk-form-control .group-box.group-prepend .bk-button{
                height:28px;
            }

.bk-form-control .group-box.group-append{
            border-left:none;
            border-radius:0 2px 2px 0;
        }

.bk-form-control .control-icon{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        position:absolute;
        font-size:16px;
        top:50%;
        -webkit-transform:translateY(-50%);
                transform:translateY(-50%);
        color:#c4c6cc;
    }

.bk-form-control .control-icon .clear-icon{
            cursor:pointer;
            font-size:14px
        }

.bk-form-control .control-icon .clear-icon:hover{
                color:#979ba5;
            }

.bk-form-control .control-icon.left-icon{
            left:10px;
        }

.bk-form-control.with-left-icon .bk-form-input,
        .bk-form-control.with-left-icon .bk-form-password,
        .bk-form-control.with-left-icon .bk-form-select,
        .bk-form-control.with-left-icon .bk-form-textarea{
            padding-left:30px;
        }

.bk-form-control.with-right-icon .bk-form-input,
        .bk-form-control.with-right-icon .bk-form-password,
        .bk-form-control.with-right-icon .bk-form-select,
        .bk-form-control.with-right-icon .bk-form-textarea{
            padding-right:30px;
        }

.bk-form-control.with-right-icon .bk-input-number{
            position:relative;
        }

.bk-form-control.with-right-icon .bk-input-number input{
                padding-right:12px;
            }

.bk-form-control .input-right-icon{
        cursor:pointer
    }

.bk-form-control .input-right-icon:hover{
            color:#3c96ff;
        }

.bk-form-input,
.bk-form-password,
.bk-form-select,
.bk-form-textarea{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    height:30px;
    line-height:normal;
    color:#63656e;
    background-color:#fff;
    border-radius:2px;
    width:100%;
    font-size:12px;
    font-size:var(--font-size);
    box-sizing:border-box;
    border:1px solid #c4c6cc;
    padding:0 10px;
    text-align:left;
    vertical-align:middle;
    outline:none;
    resize:none;
    -webkit-transition:border linear .2s;
    transition:border linear .2s
}

.bk-form-input.only-bottom-border, .bk-form-password.only-bottom-border, .bk-form-select.only-bottom-border, .bk-form-textarea.only-bottom-border{
        border-color:transparent transparent #c4c6cc transparent
    }

.bk-form-input.only-bottom-border:focus, .bk-form-password.only-bottom-border:focus, .bk-form-select.only-bottom-border:focus, .bk-form-textarea.only-bottom-border:focus{
            border-color:transparent transparent #3a84ff transparent !important;
            -webkit-box-shadow:none;
                    box-shadow:none;
        }

.bk-form-input.only-bottom-border[disabled],
        .bk-form-input.only-bottom-border[readonly],
        .bk-form-password.only-bottom-border[disabled],
        .bk-form-password.only-bottom-border[readonly],
        .bk-form-select.only-bottom-border[disabled],
        .bk-form-select.only-bottom-border[readonly],
        .bk-form-textarea.only-bottom-border[disabled],
        .bk-form-textarea.only-bottom-border[readonly]{
            border-color:transparent transparent #dcdee5 transparent !important;
        }

.bk-form-input.input-text-ellipsis, .bk-form-password.input-text-ellipsis, .bk-form-select.input-text-ellipsis, .bk-form-textarea.input-text-ellipsis{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

.bk-form-input:focus, .bk-form-password:focus, .bk-form-select:focus, .bk-form-textarea:focus{
        border-color:#3a84ff !important;
        background-color:#fff !important
    }

.bk-form-input:focus::-webkit-input-placeholder, .bk-form-password:focus::-webkit-input-placeholder, .bk-form-select:focus::-webkit-input-placeholder, .bk-form-textarea:focus::-webkit-input-placeholder{
            color:#c4c6cc !important;
        }

.bk-form-input:focus::-moz-placeholder, .bk-form-password:focus::-moz-placeholder, .bk-form-select:focus::-moz-placeholder, .bk-form-textarea:focus::-moz-placeholder{
            color:#c4c6cc !important;
        }

.bk-form-input:focus:-ms-input-placeholder, .bk-form-password:focus:-ms-input-placeholder, .bk-form-select:focus:-ms-input-placeholder, .bk-form-textarea:focus:-ms-input-placeholder{
            color:#c4c6cc !important;
        }

.bk-form-input:focus::-ms-input-placeholder, .bk-form-password:focus::-ms-input-placeholder, .bk-form-select:focus::-ms-input-placeholder, .bk-form-textarea:focus::-ms-input-placeholder{
            color:#c4c6cc !important;
        }

.bk-form-input:focus::placeholder, .bk-form-password:focus::placeholder, .bk-form-select:focus::placeholder, .bk-form-textarea:focus::placeholder{
            color:#c4c6cc !important;
        }

.bk-form-input::-webkit-input-placeholder, .bk-form-password::-webkit-input-placeholder, .bk-form-select::-webkit-input-placeholder, .bk-form-textarea::-webkit-input-placeholder{
        color:#c4c6cc;
    }

.bk-form-input::-moz-placeholder, .bk-form-password::-moz-placeholder, .bk-form-select::-moz-placeholder, .bk-form-textarea::-moz-placeholder{
        color:#c4c6cc;
    }

.bk-form-input:-ms-input-placeholder, .bk-form-password:-ms-input-placeholder, .bk-form-select:-ms-input-placeholder, .bk-form-textarea:-ms-input-placeholder{
        color:#c4c6cc;
    }

.bk-form-input::-ms-input-placeholder, .bk-form-password::-ms-input-placeholder, .bk-form-select::-ms-input-placeholder, .bk-form-textarea::-ms-input-placeholder{
        color:#c4c6cc;
    }

.bk-form-input::placeholder, .bk-form-password::placeholder, .bk-form-select::placeholder, .bk-form-textarea::placeholder{
        color:#c4c6cc;
    }

.bk-form-input[readonly], .bk-form-password[readonly], .bk-form-select[readonly], .bk-form-textarea[readonly]{
        background-color:#fafbfd !important;
        cursor:default;
        border-color:#dcdee5 !important;
    }

.bk-form-input[disabled], .bk-form-password[disabled], .bk-form-select[disabled], .bk-form-textarea[disabled]{
        background-color:#fafbfd !important;
        cursor:not-allowed;
        border-color:#dcdee5 !important;
    }

.bk-input-text,
.bk-input-textarea,
.bk-input-password,
.bk-input-number,
.bk-input-email,
.bk-input-url,
.bk-input-date{
    width:100%;
}

.bk-input-number{
    position:relative;
}

.bk-input-number input{
        padding-right:12px
    }

.bk-input-number input[type="number"]::-webkit-outer-spin-button,.bk-input-number input[type="number"]::-webkit-inner-spin-button{
                -webkit-appearance:none;
                        appearance:none;
            }

.bk-input-number input[type="number"]{
            -moz-appearance:textfield;
        }

.bk-input-number .input-number-option{
        position:absolute;
        right:2px;
        top:1px;
        bottom:1px;
        width:26px;
        text-align:center;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        background:#fff;
    }

.bk-input-number .input-number-option .number-option-item{
            -webkit-box-flex:1;
                -ms-flex:auto;
                    flex:auto;
            width:100%;
            max-height:45%;
            color:#979ba5;
            font-size:20px;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center
        }

.bk-input-number .input-number-option .number-option-item:hover{
                background:rgba(244, 246, 250, 1);
                cursor:pointer;
            }

.bk-textarea-wrapper{
    border:1px solid #c4c6cc;
    border-radius:2px;
}

.bk-textarea-wrapper .bk-form-textarea{
        border:none;
        height:auto
    }

.bk-textarea-wrapper .bk-form-textarea.textarea-maxlength{
            margin-bottom:16px;
        }

.bk-form-textarea{
    min-height:70px;
    line-height:20px;
    padding:5px 10px;
    line-height:1.5;
}

.bk-input-wrapper-small .group-box{
        height:26px;
    }

.bk-input-wrapper-small .group-box .group-text{
            font-size:12px;
            line-height:24px
        }

.bk-input-wrapper-small .group-box .group-text.bk-dropdown-menu{
                line-height:unset;
            }

.bk-input-wrapper-small .group-box .group-text.bk-dropdown-menu .bk-button{
                    height:24px;
                    line-height:24px;
                }

.bk-input-wrapper-small .group-box .group-text.bk-dropdown-menu .bk-button .bk-icon{
                        top:4px;
                    }

.bk-input-wrapper-small .input-number-option .number-option-item{
            font-size:14px;
        }

.bk-input-wrapper-large .group-box{
        height:32px;
    }

.bk-input-wrapper-large .group-box .group-text{
            font-size:14px;
            line-height:32px
        }

.bk-input-wrapper-large .group-box .group-text.bk-dropdown-menu{
                line-height:unset;
            }

.bk-input-wrapper-large .group-box .group-text.bk-dropdown-menu .bk-button{
                    color:#8797aa;
                    background-color:#fafbfd;
                }

.bk-input-wrapper-large .group-box .group-text.bk-dropdown-menu .bk-button .bk-icon{
                        top:7px;
                    }

.bk-input-wrapper-large .bk-input-large{
        height:32px;
        font-size:14px;
        line-height:32px;
    }

.bk-input-wrapper-large .input-number-option .number-option-item{
            font-size:22px;
        }

.bk-input-small{
    height:26px;
    font-size:12px;
    line-height:26px;
}

.bk-input-large{
    height:32px;
    font-size:14px;
    line-height:32px;
}

.large-font .bk-input-large,
    .large-font .bk-input-small,
    .large-font .group-text,
    .medium-font .bk-input-large,
    .medium-font .bk-input-small,
    .medium-font .group-text{
        font-size:12px !important;
        font-size:var(--font-size) !important;
    }