grid.layout.scss

@import "/src/shared/style/colors.scss";

.custom-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;

    .resize-handle-inner {
        position: absolute;
        right: 4px;
        bottom: 4px;
        width: 12px;
        height: 12px;
        border-right: 2px solid rgba(0, 0, 0, 0.2);
        border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    }
}

.react-grid-item {
    transition: none !important;

    &.resizing {
        z-index: 1;
        will-change: transform;
    }
}

.react-grid-item {
    height: 100px;
    /* Hide resize handle by default */
    .custom-resize-handle {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    /* Show resize handle on container hover */
    &:hover .custom-resize-handle {
        opacity: 1;
    }
}

.drag-handle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: grab;
    color: map-get($theme-colors, "dark");
    background-color: lighten(map-get($theme-colors, primary), 38%);
    border-radius: 0 0.25rem 0 0.25rem;
    border-left: 1px solid lighten(map-get($theme-colors, dark), 35%);
    border-bottom: 1px solid lighten(map-get($theme-colors, dark), 35%);
    z-index: 10;

    &:hover {
        color: map-get($theme-colors, primary);
        background-color: lighten(map-get($theme-colors, primary), 35%);
    }

    &:active {
        cursor: grabbing;
    }
}

.react-grid-item {
    &.react-draggable-dragging {
        .drag-handle {
            cursor: grabbing;
        }
    }
}

.react-grid-item.react-grid-placeholder {
    background: lighten(map-get($theme-colors, primary), 10%) !important;
    opacity: 0.2;
    transition-duration: 100ms;
    z-index: 2;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.react-grid-item {
    height: 100px;
    /* Hide resize handle by default */
    .react-resizable-handle-se {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    /* Show resize handle on container hover */
    &:hover .react-resizable-handle-se {
        opacity: 1;
    }
}

/* Style the resize handle */
.react-resizable-handle-se {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiPjxwYXRoIGQ9Ik02IDZIMHYtNmg2djZ6TTUgMUgxdjRoNFYxeiIgZmlsbD0iIzk5OTk5OSIvPjwvc3ZnPg==");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    cursor: se-resize;
    z-index: 10;
}