bk-magic-vue/lib/ui/form.css

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

.bk-form.bk-inline-form{
        display:inline-block;

    }

.bk-form.bk-inline-form .bk-form-item{
            display:inline-block;
            margin-bottom:0;
            margin-left:8px;
            vertical-align:middle
        }

.bk-form.bk-inline-form .bk-form-item:first-child{
                margin-left:0;
            }

.bk-form.bk-inline-form .bk-form-item +.bk-form-item{
                margin-top:0;
            }

.bk-form.bk-inline-form .bk-form-item .bk-label{
                width:auto !important;
                float:left;
            }

.bk-form.bk-inline-form .bk-form-item .bk-form-content{
                margin-left:0 !important;
                float:left;
            }

.bk-form.bk-inline-form .bk-label{
            width:auto;
            line-height:32px;
            display:inline-block;
            padding:0 15px 0 0;
        }

.bk-form.bk-inline-form.is-required >.bk-label:after{
                    right:5px;
                }

.bk-form.bk-inline-form .bk-form-content{
            display:inline-block;
            margin-left:0;
        }

.bk-form.bk-form-vertical .bk-label{
            width:auto;
            text-align:left;
        }

.bk-form.bk-form-vertical .bk-form-content{
            clear:both;
            margin-left:0 !important;
        }

.bk-form.bk-form-vertical .bk-form-item+.bk-form-item{
                margin-top:8px;
            }

.bk-form.bk-form-vertical .bk-form-item.bk-form-action{
                margin-top:20px;
            }

.bk-form.bk-form-vertical .bk-form-tip{
            padding:0;
            margin:10px 0 0 0;
            position:relative;
            height:auto;
            line-height:1;
            left:0;
        }

.bk-form.bk-form-vertical .bk-form-tip .bk-tip-text{
                float:none;
                vertical-align:middle;
            }

.bk-form.bk-form-vertical .bk-form-tip .bk-badge{
                margin-right:5px;
            }

.bk-form .bk-label{
        width:150px;
        min-height:32px;
        text-align:right;
        vertical-align:middle;
        line-height:32px;
        float:left;
        font-size:14px;
        font-weight:normal;
        color:#63656E;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        padding:0 22px 0 0;
    }

.bk-form .bk-label .bk-label-text{
            display:inline-block;
            line-height:20px;
        }

.bk-form .bk-label .bk-label-text .bk-icon{
                cursor:pointer;
                color:#979BA5;
                font-size:16px;
            }

.bk-form .bk-label.has-desc > span{
            border-bottom:1px dashed #979BA5;
            cursor:pointer;
        }

.bk-form .bk-form-content{
        width:auto;
        min-height:32px;
        margin-left:150px;
        position:relative;
        outline:none;
        line-height:30px;
    }

.bk-form .bk-form-content .form-error-tip{
            font-size:12px;
            color:#ea3636;
            line-height:18px;
            margin:2px 0 0 0;
        }

.bk-form .bk-form-content .tooltips-icon{
            position:absolute;
            z-index:10;
            right:8px;
            top:8px;
            color:#ea3636;
            cursor:pointer;
            font-size:16px;
        }

.bk-form .bk-form-content >.bk-tip-text{
            font-size:14px;
            color:#63656e;
            margin:10px 0 0 0;
        }

.bk-form .bk-form-content >.bk-form-tip{
            padding:0;
            margin:10px 0 0 0;
            position:relative;
            height:auto;
            line-height:1;
            left:0;
        }

.bk-form .bk-form-content >.bk-form-tip .bk-tip-text{
                float:none;
                vertical-align:middle;
            }

.bk-form .bk-form-content >.bk-form-tip .bk-badge{
                margin-right:5px;
            }

.bk-form ::-webkit-input-placeholder{
        color:#c3cdd7;
    }

.bk-form ::-moz-placeholder{
        color:#c3cdd7;
    }

.bk-form :-ms-input-placeholder{
        color:#c3cdd7;
    }

.bk-form ::-ms-input-placeholder{
        color:#c3cdd7;
    }

.bk-form ::placeholder{
        color:#c3cdd7;
    }

.bk-form::after,
    .bk-form .bk-form-item::before{
        display:table;
        content:"";
        clear:both;
        visibility:hidden;
        font-size:0;
    }

.bk-form input:-webkit-autofill,
    .bk-form textarea:-webkit-autofill,
    .bk-form select:-webkit-autofill{
        background:#fff !important;
    }

.bk-form-item{
    position:relative;

}

.bk-form-item label{
        margin-bottom:0;
    }

.bk-form-item +.bk-form-item{
        margin-top:22px;
    }

.bk-form-item.is-required .bk-label{
            position:relative
        }

.bk-form-item.is-required .bk-label:after{
                height:8px;
                line-height:1;
                content:'*';
                color:#EA3636;
                font-size:12px;
                position:absolute;
                display:inline-block;
                vertical-align:middle;
                top:50%;
                -webkit-transform:translate(3px, -50%);
                        transform:translate(3px, -50%);
            }

.bk-form-item.is-readonly input[type="text"],
        .bk-form-item.is-readonly input[type="password"],
        .bk-form-item.is-readonly textarea,
        .bk-form-item.is-readonly select{
            background-color:#fafafa;
        }

.bk-form-item.is-disabled input[type="text"],
        .bk-form-item.is-disabled input[type="password"],
        .bk-form-item.is-disabled textarea,
        .bk-form-item.is-disabled select{
            background-color:#fafafa;
        }

.bk-form-item.is-checking .bk-form-content{
            position:relative;
        }

.bk-form-item.is-checking .bk-form-content ::after{
                content:'';
                width:100%;
                height:100%;
                position:absolute;
                z-index:1000000;
                cursor:not-allowed;
                left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;
            }

.bk-form-item.is-danger input[type="text"],
        .bk-form-item.is-danger input[type="password"],
        .bk-form-item.is-danger input[type="number"],
        .bk-form-item.is-danger input[type="url"],
        .bk-form-item.is-danger textarea,
        .bk-form-item.is-danger select,
        .bk-form-item.is-error input[type="text"],
        .bk-form-item.is-error input[type="password"],
        .bk-form-item.is-error input[type="number"],
        .bk-form-item.is-error input[type="url"],
        .bk-form-item.is-error textarea,
        .bk-form-item.is-error select{
            border-color:#ea3636;
            color:#ea3636;
        }

.bk-form-item.is-danger .bk-textarea-wrapper, .bk-form-item.is-error .bk-textarea-wrapper{
            border-color:#ea3636;
        }

.bk-form-item.is-danger .bk-tag-selector .bk-tag-input, .bk-form-item.is-error .bk-tag-selector .bk-tag-input{
            border-color:#ea3636;
        }

.bk-form-item.is-danger .bk-form-tip .bk-tip-text, .bk-form-item.is-error .bk-form-tip .bk-tip-text{
                color:#ea3636;
            }

.bk-form-item.is-danger .bk-select, .bk-form-item.is-error .bk-select{
            border-color:#ea3636;
        }

.bk-form-item.is-warning input[type="text"],
        .bk-form-item.is-warning input[type="password"],
        .bk-form-item.is-warning textarea,
        .bk-form-item.is-warning select{
            border-color:#ffb848;
        }

.bk-form-item.is-success input[type="text"],
        .bk-form-item.is-success input[type="password"],
        .bk-form-item.is-success textarea,
        .bk-form-item.is-success select{
            border-color:#2dcb56;
        }

.bk-form-item input.bk-success +.bk-form-tip .bk-tip-text, .bk-form-item select.bk-success +.bk-form-tip .bk-tip-text, .bk-form-item textarea.bk-success +.bk-form-tip .bk-tip-text, .bk-form-item input.is-success +.bk-form-tip .bk-tip-text, .bk-form-item select.is-success +.bk-form-tip .bk-tip-text, .bk-form-item textarea.is-success +.bk-form-tip .bk-tip-text{
                color:#2dcb56;
            }

.bk-form-item input.bk-error,
    .bk-form-item select.bk-error,
    .bk-form-item textarea.bk-error,
    .bk-form-item input.is-danger,
    .bk-form-item select.is-danger,
    .bk-form-item textarea.is-danger{
        border-color:#ff5656;
        background-color:#fff4f4;
        color:#ff5656
    }

.bk-form-item input.bk-error::-webkit-input-placeholder, .bk-form-item select.bk-error::-webkit-input-placeholder, .bk-form-item textarea.bk-error::-webkit-input-placeholder, .bk-form-item input.is-danger::-webkit-input-placeholder, .bk-form-item select.is-danger::-webkit-input-placeholder, .bk-form-item textarea.is-danger::-webkit-input-placeholder{
            color:#ff5656;
        }

.bk-form-item input.bk-error::-moz-placeholder, .bk-form-item select.bk-error::-moz-placeholder, .bk-form-item textarea.bk-error::-moz-placeholder, .bk-form-item input.is-danger::-moz-placeholder, .bk-form-item select.is-danger::-moz-placeholder, .bk-form-item textarea.is-danger::-moz-placeholder{
            color:#ff5656;
        }

.bk-form-item input.bk-error:-ms-input-placeholder, .bk-form-item select.bk-error:-ms-input-placeholder, .bk-form-item textarea.bk-error:-ms-input-placeholder, .bk-form-item input.is-danger:-ms-input-placeholder, .bk-form-item select.is-danger:-ms-input-placeholder, .bk-form-item textarea.is-danger:-ms-input-placeholder{
            color:#ff5656;
        }

.bk-form-item input.bk-error::-ms-input-placeholder, .bk-form-item select.bk-error::-ms-input-placeholder, .bk-form-item textarea.bk-error::-ms-input-placeholder, .bk-form-item input.is-danger::-ms-input-placeholder, .bk-form-item select.is-danger::-ms-input-placeholder, .bk-form-item textarea.is-danger::-ms-input-placeholder{
            color:#ff5656;
        }

.bk-form-item input.bk-error::placeholder, .bk-form-item select.bk-error::placeholder, .bk-form-item textarea.bk-error::placeholder, .bk-form-item input.is-danger::placeholder, .bk-form-item select.is-danger::placeholder, .bk-form-item textarea.is-danger::placeholder{
            color:#ff5656;
        }

.bk-form-item input.bk-error +.bk-form-tip .bk-tip-text, .bk-form-item select.bk-error +.bk-form-tip .bk-tip-text, .bk-form-item textarea.bk-error +.bk-form-tip .bk-tip-text, .bk-form-item input.is-danger +.bk-form-tip .bk-tip-text, .bk-form-item select.is-danger +.bk-form-tip .bk-tip-text, .bk-form-item textarea.is-danger +.bk-form-tip .bk-tip-text{
                color:#ff5656;
            }

.bk-form-tip{
    height:36px;
    line-height:36px;
    padding:0 10px 0 35px;
    position:relative;

    position:absolute;
    left:100%;
    top:0;
}

.bk-form-tip .bk-badge{
        vertical-align:middle;
    }

.bk-form-tip .bk-tip-text{
        float:left;
        font-size:14px;
        color:#63656e;
        display:inline-block;
        padding:0;
        margin:0;
        white-space:nowrap;
    }