index.scss

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    padding: 0 260px 0 200px;
    .widgets {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100%;
        padding-right: 5px;
        border-right: 1px solid #CCC;
        overflow: auto;
        span[widget] {
            cursor: move;
        }
    }
    .ppt {
        position: absolute;
        top: 0;
        right: 0;
        width: 260px;
        height: 100%;
        padding: 10px;
        border: 1px solid #CCC;
        overflow: auto;
    }
    .designer {
        width: 100%;
        height: 100%;
        padding: 44px 0 0;
        .nav-designer {
            position: relative;
            z-index: 225;
            height: 2.75rem;
            margin-top: -44px;
            box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05);
            .nav-link {
                padding-top: .75rem;
                padding-bottom: .75rem;
                font-size: .875rem;
                color: var(--secondary);
                outline: none;
                &:hover {
                    color: var(--blue);
                }
            }
        }
        .editor {
            width: 100%;
            height: 100%;
            padding: 10px;
            position: relative;
            overflow: auto;
            .content {
                overflow: hidden;
            }
        }
    }
}

.draggable {
    background: #FFF;
    border: 1px solid #CCC;
    padding: 3px 5px;
    border-radius: 3px;
    z-index: 1000;
}

.drag-status {
    [widget-container] {
        border: 1px dashed #CCC;
        padding: 10px;
    }
}

.droppable {
    border: 2px solid red;
    opacity: 0.5;
}

.drop-helper {
    display: block;
    width: 100%;
    height: 0px;
    background: #ACACAC;
    background-size: auto 100%;
    position: relative;
    pointer-events: none;
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 20px;
        background: #ACACAC;
        margin-top: -10px;
        position: absolute;
    }
}