96 lines
2.0 KiB
SCSS
96 lines
2.0 KiB
SCSS
.vgl-layout {
|
|
--vgl-placeholder-bg: red;
|
|
--vgl-placeholder-opacity: 20%;
|
|
--vgl-placeholder-z-index: 2;
|
|
|
|
--vgl-item-resizing-z-index: 3;
|
|
--vgl-item-resizing-opacity: 60%;
|
|
--vgl-item-dragging-z-index: 3;
|
|
--vgl-item-dragging-opacity: 100%;
|
|
|
|
--vgl-resizer-size: 10px;
|
|
--vgl-resizer-border-color: #444;
|
|
--vgl-resizer-border-width: 2px;
|
|
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
transition: height 200ms ease;
|
|
}
|
|
|
|
.vgl-item {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
transition: 200ms ease;
|
|
transition-property: left, top, right;
|
|
|
|
&--placeholder {
|
|
z-index: var(--vgl-placeholder-z-index, 2);
|
|
user-select: none;
|
|
background-color: var(--vgl-placeholder-bg, red);
|
|
opacity: var(--vgl-placeholder-opacity, 20%);
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
&--no-touch {
|
|
touch-action: none;
|
|
}
|
|
|
|
&--transform {
|
|
right: auto;
|
|
left: 0;
|
|
transition-property: transform;
|
|
}
|
|
|
|
&--transform#{&}--rtl {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
&--resizing {
|
|
z-index: var(--vgl-item-resizing-z-index, 3);
|
|
user-select: none;
|
|
opacity: var(--vgl-item-resizing-opacity, 60%);
|
|
}
|
|
|
|
&--dragging {
|
|
z-index: var(--vgl-item-dragging-z-index, 3);
|
|
user-select: none;
|
|
opacity: var(--vgl-item-dragging-opacity, 100%);
|
|
transition: none;
|
|
}
|
|
|
|
&__resizer {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
width: var(--vgl-resizer-size);
|
|
height: var(--vgl-resizer-size);
|
|
cursor: se-resize;
|
|
|
|
$border-width: var(--vgl-resizer-border-width);
|
|
|
|
&::before {
|
|
position: absolute;
|
|
inset: 0 3px 3px 0;
|
|
content: '';
|
|
border: 0 solid var(--vgl-resizer-border-color);
|
|
border-right-width: $border-width;
|
|
border-bottom-width: $border-width;
|
|
}
|
|
|
|
&--rtl {
|
|
right: auto;
|
|
left: 0;
|
|
cursor: sw-resize;
|
|
|
|
&::before {
|
|
inset: 0 0 3px 3px;
|
|
border-right-width: 0;
|
|
border-bottom-width: $border-width;
|
|
border-left-width: $border-width;
|
|
}
|
|
}
|
|
}
|
|
}
|