magiccube-vue3/package/style/popup.less

vue3-js版组件库

@import './theme';

.mc-popup{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: @popup-inner-z;
    background: #fff;
    border-radius: var(--mc-float-layer-border-radius);
    box-shadow: var(--mc-float-layer-box-shadow);
    transform: translateY(-50%);
    transition: all 300ms;

    &__header{
        display: flex;
        align-items: center;
        padding: 24px;

        &::before{
            content: '';
            display: inline-block;
            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: var(--mc-normal-size);
            font-weight: bold;
        }

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

    }

    &__body{
        padding: 0 24px;
        min-height: 86px;
    }

    &__footer{
        display: flex;
        align-items: center;
        padding: 24px 24px 32px;

        &.align-center{
            justify-content: center;
        }

        &.align-right{
            justify-content: flex-end;
        }
    }
}


.mc-popup-panel{
    position: fixed;
    top: 100%;
    left: 0;
    z-index: @popup-z;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: opacity 300ms ease-out;
    opacity: 0;
    pointer-events: none;

    &.fade-in{
        top: 0;
        opacity: 1;
        pointer-events: all;
    }

    &.fade-out{
        animation: popup_out 300ms;
    }

    @keyframes popup_out{
        0%{
            top: 0;
            opacity: 1;
            pointer-events: all;
        }

        50%{
            top: 0;
            opacity: 0;
            pointer-events: none;
        }

        100%{
            top: 100%;
            opacity: 0;
            pointer-events: none;
        }
    }

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

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

    &.transparent{
        background: none;
    }
}