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

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

.bk-picker-panel-content-left{
    border-right:1px solid rgba(203, 213, 224, 0.5);
}

.bk-date-picker-cells{
    margin:9px 18px 0 20px;
    white-space:normal;
    color:#63656e;
    font-size:12px;
}

.bk-date-picker-cells span{
        display:inline-block;
        width:35px;
        height:35px;
        line-height:35px;
        text-align:center;
        margin:5px 0
    }

.bk-date-picker-cells span::before{
            top:0;
            bottom:0;
        }

.bk-date-picker-cells span em{
            display:inline-block;
            width:35px;
            height:35px;
            line-height:35px;
            font-style:normal;
            cursor:pointer;
        }

.bk-date-picker-cells .bk-date-picker-cells-header span{
            cursor:default;
            width:35px;
            height:30px;
            line-height:30px;
            color:#63656e;
        }

.bk-date-picker-cells-cell:hover em{
    background-color:rgba(58, 132, 255, 0.1);;
}

.bk-date-picker-cells-focused em{
    -webkit-box-shadow:0 0 0 1px #a3c5fd inset;
            box-shadow:0 0 0 1px #a3c5fd inset;
    color:#3a84ff;
}

.bk-date-picker-cells-cell-prev-month em,
.bk-date-picker-cells-cell-next-month em{
    color:#c4c6cc;
}

.bk-date-picker-cells-cell-prev-month:hover em,
.bk-date-picker-cells-cell-next-month:hover em{
    background:transparent;
}

span.bk-date-picker-cells-cell-week-label,
span.bk-date-picker-cells-cell-week-label:hover,
span.bk-date-picker-cells-cell-disabled,
span.bk-date-picker-cells-cell-disabled:hover{
    cursor:not-allowed;
    color:#c4c6cc;
}

span.bk-date-picker-cells-cell-week-label em,
span.bk-date-picker-cells-cell-week-label:hover em,
span.bk-date-picker-cells-cell-disabled em,
span.bk-date-picker-cells-cell-disabled:hover em{
    color:inherit;
    background:inherit;
    cursor:not-allowed;
}

span.bk-date-picker-cells-cell-disabled,
span.bk-date-picker-cells-cell-disabled:hover{
    background-color:#f0f1f5;
}

.bk-date-picker-cells-cell-today em{
    position:relative;
    -webkit-box-shadow:0 0 0 1px #a3c5fd inset;
            box-shadow:0 0 0 1px #a3c5fd inset;
    color:#3a84ff;
}

.bk-date-picker-cells-cell-range{
    position:relative
}

.bk-date-picker-cells-cell-range:before{
        content:'';
        display:block;
        background:#e1ecff;
        border-radius:0;
        border:0;
        position:absolute;
        top:5px;
        bottom:-5px;
        left:0;
        right:0;
    }

.bk-date-picker-cells-cell-range em{
        position:relative;
        z-index:1;
    }

.bk-date-picker-cells-cell-selected em,
.bk-date-picker-cells-cell-selected:hover em{
    background-color:#3a84ff;
    color:#fff;
    -webkit-box-shadow:0 0 0 1px #3a84ff inset;
            box-shadow:0 0 0 1px #3a84ff inset;
}

span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
    background:#c4c6cc;
    color:#f7f7f7;
}

.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after{
    background:#fff;
}

.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,
.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover{
    -webkit-box-shadow:0 0 0 1px #3a84ff inset;
            box-shadow:0 0 0 1px #3a84ff inset;
}

.bk-date-picker-cells-year,
.bk-date-picker-cells-month{
    margin-top:7px;
}

.bk-date-picker-cells-year span, .bk-date-picker-cells-month span{
        width:36px;
        height:32px;
        line-height:32px;
        margin:10px 12px;
        border-radius:3px;
        text-align:center;
    }

.bk-date-picker-cells-year span em, .bk-date-picker-cells-month span em{
            width:36px;
            height:32px;
            line-height:32px;
            text-align:center;
        }

.bk-date-picker-header{
    padding:0 20px;
    height:46px;
    line-height:46px;
    text-align:center;
    border-bottom:1px solid #dcdee5;
    font-size:14px;
    font-weight:700;
    color:#63656e;
}

.bk-date-picker-header .bk-date-picker-header-label{
        cursor:pointer
    }

.bk-date-picker-header .bk-date-picker-header-label:hover{
            color:#3a84ff;
        }

.bk-date-picker-header .up-to-now{
        font-weight:400;
        cursor:pointer;
        margin-left:3px
    }

.bk-date-picker-header .up-to-now.disabled{
            cursor:not-allowed;
            color:#c4c6cc;
        }

.bk-date-picker-prev-btn{
    float:left;
}

.bk-date-picker-prev-btn-arrow-double{
    margin-left:10px;
}

.bk-date-picker-prev-btn-arrow-double i:after{
    margin-left:-8px;
}

.bk-date-picker-next-btn{
    float:right;
}

.bk-date-picker-next-btn-arrow-double{
    margin-right:10px;
}

.bk-date-picker-next-btn-arrow-double i:after{
    margin-left:-8px;
}

.bk-date-picker-with-range .bk-picker-panel-body{
    min-width:572px;
}

.bk-date-picker-with-range .bk-picker-panel-content{
    float:left;
}

.bk-date-picker-with-range .bk-picker-cells-show-week-numbers{
    min-width:492px;
}

.bk-date-picker-transfer{
    z-index:1060;
    max-height:none;
}

.bk-picker-panel-icon-btn{
    display:inline-block;
    width:20px;
    height:46px;
    line-height:46px;
    text-align:center;
    cursor:pointer;
    color:#979ba5;
    -webkit-transition:color 0.2s ease-in-out;
    transition:color 0.2s ease-in-out;
}

.bk-picker-panel-icon-btn:hover{
    color:#2d8cf0;
}

.bk-picker-panel-icon-btn i{
    font-size:20px;
}

.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar{
        padding-right:140px;
    }

.bk-picker-panel-sidebar{
    width:140px;
    position:absolute;
    top:0;
    bottom:0;
    background-color:#fafbfd;
    border-left:1px solid #dcdee5;
    overflow:auto;
    right:0;
    color:#3a84ff;
    font-size:14px;
    padding:12px 0;
}

.bk-picker-panel-sidebar .bk-picker-panel-shortcut{
        padding:6px 21px;
        cursor:pointer;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

.bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover{
            background-color:#e1ecff;
        }

.bk-picker-panel-body{
    float:left;
}

.bk-picker-confirm{
    border-top:1px solid #dcdee5;
    text-align:right;
    clear:both;
    background-color:#fafbfd;
    height:42px;
    line-height:41px;
    font-size:14px;
    padding:0 20px;
}

.bk-picker-confirm a{
        color:#979ba5
    }

.bk-picker-confirm a.confirm{
            margin-left:10px;
            color:#3a84ff;
        }

.bk-picker-confirm a[disabled]{
            cursor:not-allowed;
            color:#c4c6cc;
        }

.bk-picker-confirm .bk-picker-confirm-time{
        float:left;
    }