magiccube-vue3/package/style/date.less

vue3-js版组件库

@import './theme';

.mc-date{

    &__result{
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding: 0 12px;
        width: 100%;
        height: @input-height;
        border-radius: @input-radius;
        border: @input-border;
        background: @input-background;

        &.range{
            display: flex;
            align-items: center;
            transition: all 200ms;

            &.error{
                border-color: var(--mc-error-color);
            }

            &.focus:not(.error),
            &:hover:not(.error) {
                border: @input-hover-border;
                box-shadow: @input-hover-shadow;
            }
        }

        &--inner{
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 70%;
        }

        &--content{
            flex: 1;
            width: 35%;
            font-size: 12px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;

            & > em{
                &.placeholder{
                    color: @input-placeholder;
                    font-size: 12px;
                }
            }
        }

        &--separator{
            padding: 0 6px;
        }

        &--icon{
            margin-left: 8px;
            width: 18px;
            height: 22px;
        }
    }

    &__toolbar{
        display: flex;
        height: 40px;
        border-bottom: 1px solid #efefef;

        &--child{
            display: flex;
            flex-direction: row;
            width: 25%;
            cursor: pointer;
            user-select: none;

            &.current-date-view{
                width: 50%;
                font-weight: bold;
                font-size: 14px;

                & > span{
                    &.year{
                        padding-right: 5px;
                        justify-content: flex-end;
                        width: 60%;
                    }

                    &.month{
                        padding-left: 5px;
                        justify-content: flex-start;
                        width: 40%;
                    }

                    &.disabled{
                        cursor: default;
                    }

                    &:hover:not(.disabled){
                        color: @color-default;
                    }
                }
            }

            & > span{
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                width: 50%;
                height: 100%;
            }
        }

        &--year{
            flex: 1;
            &::before{
                content: '';
                display: block;
                margin-left: 12px;
                position: absolute;
                width: 6px;
                height: 6px;
                border: 1px solid #aaa;
                transform: rotate(132deg);
                border-top: 0;
                border-left: 0;
                cursor: pointer;
            }
            &::after{
                content: '';
                display: block;
                position: absolute;
                width: 6px;
                height: 6px;
                border: 1px solid #aaa;
                transform: rotate(132deg);
                border-top: 0;
                border-left: 0;
                cursor: pointer;
            }

            &.right::before{
                content: '';
                transform: rotate(-48deg) translate(-5px, -5px);
            }
            &.right::after{
                content: '';
                transform: rotate(-48deg) translate(-5px, -5px);
            }

            &:hover{
                &::after, &::before{
                    border-color: @color-default;
                }
            }
        }

        &--month{
            flex: 1;
            &::after{
                content: '';
                display: block;
                position: absolute;
                width: 6px;
                height: 6px;
                border: 1px solid #aaa;
                transform: rotate(132deg);
                border-top: 0;
                border-left: 0;
                cursor: pointer;
            }

            &.right::after{
                content: '';
                transform: rotate(-48deg);
            }

            &:hover{
                &::after{
                    border-color: @color-default;
                }
            }
        }
    }

    &__cube{
        display: flex;
        flex-wrap: wrap;

        &--child{
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100% / 3);
            height: 40px;
            cursor: pointer;

            &:hover{
                color: @color-default;
            }
        }
    }

    &__panel{
        display: flex;
        flex-direction: column;

        &.range{
            flex-direction: row;
        }
    }

    &__calendar{
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        width: 100%;
        font-size: 14px;
        color: var(--mc-title-color);

        &--cell{
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: calc(100% / 7);
            text-align: center;
            cursor: pointer;
            user-select: none;

            &:nth-child(-n+7){
                font-weight: bold;
            }

            & > span{
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                width: 100%;
                height: 100%;
            }

            &:hover:not(.active):not(.include):not(.disabled){
                color: @color-hover;
            }

            &::before{
                content: '';
                display: block;
                padding-bottom: 100%;
            }

            &.active{
                color: #fff;

                & > span::after{
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: -1;
                    width: 60%;
                    height: 60%;
                    background: @color-default;
                }
            }

            &.today:not(.active){
                color: @color-default;
            }

            &.disabled{
                color: #ccc;
                cursor: default;
            }

            &.include{
                & > span::before{
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: -1;
                    width: 100%;
                    height: 60%;
                    background: var(--mc-label-blue-bg-color);
                }
            }

            &.active.include.start > span::before{
                width: 50% !important;
                right: 0;
            }

            &.active.include.end > span::before{
                width: 50% !important;
                left: 0;
            }
        }
    }

    &__range{
        position: relative;
        width: 50%;

        &.right{
            &::before{
                content: '';
                position: absolute;
                width: 1px;
                height: 100%;
                border-left: 1px solid #efefef;
            }
        }
    }

    &__footer{
        padding: 6px 12px;
        text-align: right;
    }
}