@cw-devops/bk-magic-vue/lib/ui/date-picker.base.css

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

:root{
    --font-size:12px;
    --long-width:342px;
}

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

:root .medium-width{
        --long-width:362px;
    }

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

:root .large-width{
        --long-width:402px;
    }

.bk-date-picker{
    display:inline-block;
    line-height:normal;
    width:261px
}

.bk-date-picker.long{
        width:342px;
        width:var(--long-width);
    }

.bk-date-picker-rel{
    position:relative;
}

.bk-date-picker-rel .bk-date-picker-editor{
        display:block;
        width:100%;
        height:30px;
        line-height:30px;
        border:1px solid #c4c6cc;
        font-size:12px;
        font-size:var(--font-size);
        border-radius:2px;
        outline:none;
        padding:0 10px 0 30px;
        color:#63656e;
        cursor:pointer
    }

.bk-date-picker-rel .bk-date-picker-editor:hover{
            border:1px solid #979ba5;
          }

.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border{
            border-color:transparent transparent #c4c6cc transparent
        }

.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus{
                border-color:transparent transparent #3a84ff transparent;
                -webkit-box-shadow:none;
                        box-shadow:none;
            }

.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],
            .bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly{
                border-color:transparent transparent #dcdee5 transparent;
            }

.bk-date-picker-rel .bk-date-picker-editor:focus{
            border:1px solid #3a84ff;
        }

.bk-date-picker-rel .bk-date-picker-editor::-webkit-input-placeholder{
            color:#c4c6cc;
        }

.bk-date-picker-rel .bk-date-picker-editor::-moz-placeholder{
            color:#c4c6cc;
        }

.bk-date-picker-rel .bk-date-picker-editor:-ms-input-placeholder{
            color:#c4c6cc;
        }

.bk-date-picker-rel .bk-date-picker-editor::-ms-input-placeholder{
            color:#c4c6cc;
        }

.bk-date-picker-rel .bk-date-picker-editor::placeholder{
            color:#c4c6cc;
        }

.bk-date-picker-rel .bk-date-picker-editor[disabled]{
            color:#c4c6cc;
            background-color:#fafbfd;
            cursor:not-allowed;
            border-color:#c4c6cc;
        }

.bk-date-picker-rel .bk-date-picker-editor.readonly{
            background-color:#fafbfd;
            border-color:#c4c6cc;
        }

.bk-date-picker-rel .clear-action{
        position:absolute;
        right:10px;
        -webkit-transform:translateY(-50%);
                transform:translateY(-50%);
        top:50%;
        color:#c4c6cc;
        font-size:14px;
        cursor:pointer
    }

.bk-date-picker-rel .clear-action:hover{
            color:#979ba5;
        }

.bk-date-picker-rel .icon-wrapper{
        display:inline-block;
        width:30px;
        height:30px;
        position:absolute;
        left:0;
        top:0;
        color:#c4c6cc;
        background-color:transparent;
        cursor:pointer
    }

.bk-date-picker-rel .icon-wrapper.disabled{
            cursor:not-allowed;
        }

.bk-date-picker-rel .icon-wrapper i.icon-clock{
            -webkit-transform:translate(-50%, -50%);
                    transform:translate(-50%, -50%);
            top:50%;
            left:50%;
            position:absolute;
        }

.bk-date-picker-rel .icon-wrapper .picker-icon{
            width:18px;
            height:18px;
            position:absolute;
            -webkit-transform:translate(-50%, -50%);
                    transform:translate(-50%, -50%);
            top:50%;
            left:50%;
        }

.bk-date-picker-dropdown{
    overflow:auto;
    margin:4px 0 0 0;
    padding:5px 0 0 0;
    background-color:#fff;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    border-radius:2px;
    -webkit-box-shadow:0 3px 10px rgba(0, 0, 0, 0.1);
            box-shadow:0 3px 10px rgba(0, 0, 0, 0.1);
    border:1px solid #dcdee5;
    position:absolute;
    z-index:900;
}

.bk-date-picker .bk-select-dropdown{
    padding:0;
    overflow:visible;
    max-height:none;
}

.bk-date-picker-footer-wrapper{
    border-top:1px solid #dcdee5;
    clear:both;
    background-color:#fafbfd;
    color:#979ba5;
    font-size:14px;
}

.bk-date-picker-top-wrapper{
    margin-top:-5px;
    clear:both;
    color:#979ba5;
    font-size:14px;
}