set-resizable/src/set-resizable.css

A small JS library to convert any HTML element into a resizable element.

:root{
    --resizable-color:blue;
}

.resizable {
    display: var(--resizable-display);
    position: relative;
    min-width: var(--resizable-min-size);
    min-height: var(--resizable-min-size);
    overflow: visible;
}

.resizable .control {
    border-collapse: collapse;
    border: 1px solid var(--resizable-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.resizable .control .c {
    width: 100%;
    height: 100%;
}

.resizable .control .c span.info {
    color: #fff;
    background-color: var(--resizable-color);
    padding: 3px;
    border-radius: 3px;
    position: absolute;
    bottom: 15px;
    right: 15px;
}

.resizable .control .w:hover,
.resizable .control .e:hover {
    cursor: ew-resize;
}

.resizable .control .s.e:hover,
.resizable .control .n.w:hover {
    cursor: nwse-resize;
}

.resizable .control .s:hover,
.resizable .control .n:hover {
    cursor: ns-resize;
}

.resizable .control .n.e:hover,
.resizable .control .s.w:hover {
    cursor: nesw-resize;
}

.resizable .control td {
    padding: 5px;
    text-align: center;
}


/* Nodes */

.resizable .control.nodes td::after{
    content:"";
    display:inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: var(--resizable-color);
    position: absolute;
}

.resizable .control.nodes td.c::after{
    display: none;
}

.resizable .control.nodes td.w::after{
    margin-left: -10px;
}

.resizable .control.nodes td.n::after{
    margin-top: -10px;
}

.resizable .control.nodes td.e::after{
    margin-right: -10px;
}

.resizable .control.nodes td.s::after{
    margin-bottom: -10px;
}



/* Debug Styles */


/* .resizable .control {
    background-color: rgba(0,255,0,0.5);    
}

.resizable .control td {
    outline: 1px solid red;  
}

.resizable .control td:hover {
    background-color: blue;
} 

.resizable .control td.mc:hover {
    background: none;
} */