components/View/Resizable/styles.scss
@import '../../../stylesheets/utils';
:root {
--width-resizable-separator: 8px;
}
.resizable-h {
.first {
position: relative;
padding: 0;
}
.second {
position: relative;
padding: 0;
.separator {
@include transition-medium;
position: absolute;
top: 0;
left: 0;
z-index: 1111;
border-left: var(--width-separator-medium) solid transparent;
cursor: col-resize;
width: var(--width-resizable-separator);
height: 100%;
&:hover {
border-left-color: var(--color-accent);
}
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: .1;
background-color: var(--color-foreground);
width: 100%;
height: 100%;
}
&.resizing {
cursor: col-resize;
user-select: none;
.separator {
border-right-color: var(--color-accent);
}
}
}
.resizable-v {
.first {
position: relative;
padding: 0;
}
.second {
position: relative;
padding: 0;
.separator {
@include transition-medium;
position: absolute;
top: 0;
left: 0;
z-index: 1111;
border-top: var(--width-separator-medium) solid transparent;
cursor: row-resize;
width: 100%;
height: var(--width-resizable-separator);
&:hover {
border-top-color: var(--color-accent);
}
}
}
&.resizing {
cursor: row-resize;
user-select: none;
.separator {
border-bottom-color: var(--color-accent);
}
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: .1;
background-color: var(--color-foreground);
width: 100%;
height: 100%;
}
}