@cn-ui/core/dist/lib/Modal/index.css

The @cn-ui/core is a collection of UI components and utilities for building modern web applications with SolidJS.

.cn-modal-list {
    /* top-left */
    --modal-show-position: -120px;
    pointer-events: none;
    z-index: 20000;
    .cn-virtual-list-container {
        pointer-events: auto;
    }
    .cn-virtual-list-item {
        transition:
            top 0.3s,
            bottom 0.3s,
            transform 0.3s,
            opacity linear 0.1s;
        animation: cn-modal-show 0.3s;
    }
}
.cn-modal-list {
    .cn-virtual-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .cn-virtual-list-item:nth-child(1) {
        z-index: 9999;
    }
}
.cn-modal-stack:not(:hover) {
    /* 压低容器高度，防止滚动条出现*/
    .cn-virtual-list-container {
        height: 100px !important;
    }
    .cn-virtual-list-normal {
        /* 其他元素的最终状态 */
        .cn-virtual-list-item {
            top: 1.25rem !important;
            transform: scale(0.8) !important;
            opacity: 0;
        }
        .cn-virtual-list-item:nth-child(1) {
            top: 0 !important;
            transform: scale(1) !important;
            z-index: 9999;
            opacity: 1;
        }
        /* 下面是起到装饰用途的倒数几个元素的样式 */
        .cn-virtual-list-item:nth-child(2) {
            top: 0.5rem !important;
            transform: scale(0.95) !important;
            z-index: 9998;
            opacity: 1;
        }
        .cn-virtual-list-item:nth-child(3) {
            top: 1rem !important;
            transform: scale(0.9) !important;
            z-index: 9997;
            opacity: 1;
        }
        /* 最后一个元素设置为最终消失态 */
        .cn-virtual-list-item:nth-child(4) {
            top: 1.25rem !important;
            transform: scale(0.8) !important;
            z-index: 9996;
            opacity: 0;
        }
    }

    /* 倒序状态 */
    .cn-virtual-list-reverse {
        /* 其他元素的最终状态 */
        .cn-virtual-list-item {
            bottom: 1.25rem !important;
            transform: scale(0.8);
            opacity: 0;
        }
        .cn-virtual-list-item:nth-child(1) {
            bottom: 0 !important;
            transform: scale(1);
            z-index: 9999;
            opacity: 1;
        }
        /* 下面是起到装饰用途的倒数几个元素的样式 */
        .cn-virtual-list-item:nth-child(2) {
            bottom: 0.5rem !important;
            transform: scale(0.95);
            z-index: 9998;
            opacity: 0.8;
        }
        .cn-virtual-list-item:nth-child(3) {
            bottom: 1rem !important;
            transform: scale(0.9);
            z-index: 9997;
            opacity: 0.5;
        }
        /* 最后一个元素设置为最终消失态 */
        .cn-virtual-list-item:nth-child(4) {
            bottom: 1.25rem !important;
            transform: scale(0.8);
            z-index: 9996;
            opacity: 0;
        }
    }
}

@keyframes cn-modal-show {
    from {
        opacity: 0;
        translate: var(--modal-show-position);
    }
    to {
        opacity: 1;
        translate: 0px;
    }
}