@cw-devops/bk-magic-vue/lib/ui/compose-form-item.css

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

.bk-compose-form-item{
    display:inline-block
}
.bk-compose-form-item > .bk-form-control,
    .bk-compose-form-item > .bk-select,
    .bk-compose-form-item > .bk-cascade,
    .bk-compose-form-item > .bk-color-picker,
    .bk-compose-form-item > .bk-date-picker,
    .bk-compose-form-item > .bk-tag-input,
    .bk-compose-form-item > .bk-tag-selector,
    .bk-compose-form-item > .search-select-wrap{
        float:left;
        width:auto;
        margin-left:-1px;
    }
.bk-compose-form-item .bk-input-text{
        border:1px solid #cbd5e0;
    }
.bk-compose-form-item .bk-form-input,
    .bk-compose-form-item .bk-form-password{
        border:none;
    }
.bk-compose-form-item .bk-form-input,
    .bk-compose-form-item .bk-form-password,
    .bk-compose-form-item .bk-form-textarea,
    .bk-compose-form-item .bk-select,
    .bk-compose-form-item .bk-cascade,
    .bk-compose-form-item .bk-color-picker,
    .bk-compose-form-item .bk-date-picker .bk-date-picker-editor,
    .bk-compose-form-item .bk-tag-input,
    .bk-compose-form-item .bk-search-select{
        border-radius:0;
    }
.bk-compose-form-item .bk-form-control.control-active,
    .bk-compose-form-item .bk-select.is-focus,
    .bk-compose-form-item .bk-cascade.is-focus,
    .bk-compose-form-item .bk-color-picker.bk-color-picker-show-dropdown,
    .bk-compose-form-item .bk-color-picker:hover,
    .bk-compose-form-item .bk-date-picker .bk-date-picker-editor:focus,
    .bk-compose-form-item .bk-tag-input.active,
    .bk-compose-form-item .bk-tag-selector,
    .bk-compose-form-item .bk-search-select.is-focus{
        opacity:1;
        z-index:1;
    }
.bk-compose-form-item .bk-compose-form-item-head .bk-form-input,
        .bk-compose-form-item .bk-compose-form-item-head .bk-form-password,
        .bk-compose-form-item .bk-compose-form-item-head .bk-form-textarea,
        .bk-compose-form-item .bk-compose-form-item-head.bk-select,
        .bk-compose-form-item .bk-compose-form-item-head.bk-cascade,
        .bk-compose-form-item .bk-compose-form-item-head.bk-color-picker,
        .bk-compose-form-item .bk-compose-form-item-head.bk-date-picker .bk-date-picker-editor,
        .bk-compose-form-item .bk-compose-form-item-head.bk-tag-input,
        .bk-compose-form-item .bk-compose-form-item-head .bk-tag-input,
        .bk-compose-form-item .bk-compose-form-item-head .bk-search-select{
            margin-left:0;
            border-top-right-radius:0px;
            border-bottom-right-radius:0px;
        }
.bk-compose-form-item .bk-compose-form-item-tail .bk-form-input,
        .bk-compose-form-item .bk-compose-form-item-tail .bk-form-password,
        .bk-compose-form-item .bk-compose-form-item-tail .bk-form-textarea,
        .bk-compose-form-item .bk-compose-form-item-tail.bk-select,
        .bk-compose-form-item .bk-compose-form-item-tail.bk-cascade,
        .bk-compose-form-item .bk-compose-form-item-tail.bk-color-picker,
        .bk-compose-form-item .bk-compose-form-item-tail.bk-date-picker .bk-date-picker-editor,
        .bk-compose-form-item .bk-compose-form-item-tail.bk-tag-input,
        .bk-compose-form-item .bk-compose-form-item-tail .bk-tag-input,
        .bk-compose-form-item .bk-compose-form-item-tail .bk-search-select{
            border-top-right-radius:2px;
            border-bottom-right-radius:2px;
        }