magiccube-vue3/package/style/slide.less

vue3-js版组件库

@import './theme';

.mc-slide{
    position: absolute;
    right: 0;
    width: 420px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.4);
    transition: transform 300ms ease-out;

    &.fade-in{
        transform: translateX(0%);
        transition: all 300ms ease-out;
    }

    &.fade-out{
        transform: translateX(100%);
        transition: all 300ms ease-in;
    }

    &__header{
        display: flex;
        align-items: center;
        height: 70px;
        padding: 24px;
        box-sizing: border-box;

        &::before{
            content: '';
            margin-right: 8px;
            width: 4px;
            height: 14px;
            background: linear-gradient(10.5deg, rgba(131, 195, 251, 1) 0%,rgba(131, 195, 251, 1) 1%,rgba(68, 109, 234, 1) 99%,rgba(68, 109, 234, 1) 100%);
        }

        &--title{
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            color: rgba(20, 45, 76, 1)
        }

        &--close{
            display: flex;
            align-items: center;
            cursor: pointer;
        }

    }

    &__content{
        flex: 1;
        padding: 12px;
        height: calc(~'100vh - 70px');
        overflow-y: auto;
    }
}

.mc-side-slide-panel{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: @popup-z;
    width: 0%;
    height: 100%;
    transition: opacity 500ms ease;
    opacity: 0;

    &.slide-in{
        width: 100%;
        opacity: 1;
    }

    &.slide-out{
        width: 0%;
        opacity: 0;
    }

    &.dark{
        background: rgba(0,0,0,.4);
    }

    &.white{
        background: rgba(255,255,255,.7);
    }
}