devextreme/less/sources/widgets/common/resizable.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/resizable.less)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@HANDLE_OFFSET: 0;
@ONE_SIDE_HANDLE_SIZE: 3px + @HANDLE_OFFSET;
@TWO_SIDE_HANDLE_SIZE: 6px + @HANDLE_OFFSET;

.dx-resizable {
    display: block;
    position: relative;
}

.dx-resizable-handle {
    position: absolute;
    z-index: 50;

    .dx-state-disabled & {
        cursor: default;
    }
}

.dx-resizable-handle-left,
.dx-resizable-handle-right {
    top: -@HANDLE_OFFSET;
    height: 100%;
    width: @ONE_SIDE_HANDLE_SIZE;
}

.dx-resizable-handle-left {
    left: -@HANDLE_OFFSET;
    cursor: e-resize;
}

.dx-resizable-handle-right {
    right: -@HANDLE_OFFSET;
    cursor: e-resize;
}

.dx-resizable-handle-top,
.dx-resizable-handle-bottom {
    left: -@HANDLE_OFFSET;
    width: 100%;
    height: @ONE_SIDE_HANDLE_SIZE;
}

.dx-resizable-handle-top {
    top: -@HANDLE_OFFSET;
    cursor: s-resize;
}

.dx-resizable-handle-bottom {
    bottom: -@HANDLE_OFFSET;
    cursor: s-resize;
}

.dx-resizable-handle-corner-bottom-left,
.dx-resizable-handle-corner-bottom-right,
.dx-resizable-handle-corner-top-left,
.dx-resizable-handle-corner-top-right {
    width: @TWO_SIDE_HANDLE_SIZE;
    height: @TWO_SIDE_HANDLE_SIZE;
}

.dx-resizable-handle-corner-top-left,
.dx-resizable-handle-corner-bottom-right {
    cursor: se-resize;
}

.dx-resizable-handle-corner-top-right,
.dx-resizable-handle-corner-bottom-left {
    cursor: ne-resize;
}

.dx-resizable-handle-corner-top-left,
.dx-resizable-handle-corner-bottom-left {
    left: -@HANDLE_OFFSET;
    border-bottom-right-radius: 100%;
}

.dx-resizable-handle-corner-top-right,
.dx-resizable-handle-corner-bottom-right {
    right: -@HANDLE_OFFSET;
    border-bottom-left-radius: 100%;
}

.dx-resizable-handle-corner-top-left,
.dx-resizable-handle-corner-top-right {
    top: -@HANDLE_OFFSET;
}

.dx-resizable-handle-corner-bottom-left,
.dx-resizable-handle-corner-bottom-right {
    bottom: -@HANDLE_OFFSET;
}