benivo-ui-library/pop-up.less

Benivo UI library

.entry-pop-up {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: 502px;
    background-color: var(--white);
    padding: 16px 0;
    border-radius: 16px 16px 0px 0px;
    .box-shadow(@modal-shadow);
    z-index: 1000;
    pointer-events: all;
    // cursor: grab;

    // &:active {
    //     cursor: grabbing;
    // }

    &.expanded {
        max-width: unset;
        border-radius: 16px;
    }

    @media @md-max {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }

    .pop-up-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;

        .header-content {
            font-size: @small-font-size;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .actions {
            display: flex;
            align-items: center;
            gap: 5px;

            .icon {
                cursor: pointer;
                font-size: 20px;

                &.small {
                    font-size: 14px;
                }
            }
        }
    }

    .body {
        margin-top: 16px;
        max-height: 700px;
    }

    &.minimized {
        position: static;
        max-width: 264px;
        cursor: auto;

        .body {
            margin-top: 0;
            max-height: 0px;
            overflow: hidden;
        }
    }
}