@directus/vue-split-panel
Version:
Split panel component for Vue based on WebAwesome Split Panel
84 lines (81 loc) • 1.99 kB
CSS
.sp-root {
&[data-v-4dbe2ceb] {
display: grid;
}
&.sp-collapsing[data-v-4dbe2ceb] {
transition-duration: var(--4dbe2ceb-transitionDurationCss);
transition-timing-function: var(--4dbe2ceb-transitionTimingFunctionCollapse);
}
&.sp-expanding[data-v-4dbe2ceb] {
transition-duration: var(--4dbe2ceb-transitionDurationCss);
transition-timing-function: var(--4dbe2ceb-transitionTimingFunctionExpand);
}
&.sp-horizontal {
&[data-v-4dbe2ceb] {
grid-template-columns: var(--4dbe2ceb-gridTemplate);
}
&.sp-collapsing[data-v-4dbe2ceb], &.sp-expanding[data-v-4dbe2ceb] {
transition-property: grid-template-columns;
}
&.sp-dragging[data-v-4dbe2ceb] {
cursor: ew-resize;
}
}
&.sp-vertical {
&[data-v-4dbe2ceb] {
grid-template-rows: var(--4dbe2ceb-gridTemplate);
}
&.sp-collapsing[data-v-4dbe2ceb], &.sp-expanding[data-v-4dbe2ceb] {
transition-property: grid-template-rows;
}
&.sp-dragging[data-v-4dbe2ceb] {
cursor: ns-resize;
}
}
&.sp-dragging[data-v-4dbe2ceb] {
user-select: none;
}
}
.sp-start[data-v-4dbe2ceb], .sp-end[data-v-4dbe2ceb] {
overflow: hidden;
}
.sp-divider {
&[data-v-4dbe2ceb] {
position: relative;
z-index: 1;
}
&:not(.disabled) {
&[data-v-4dbe2ceb] > :first-child {
&::after {
content: '';
position: absolute;
}
}
&.sp-horizontal {
&[data-v-4dbe2ceb] {
block-size: 100%;
inline-size: max-content;
}
&[data-v-4dbe2ceb] > :first-child::after {
block-size: 100%;
inset-inline-start: calc(var(--4dbe2ceb-dividerHitArea) / -2 + var(--4dbe2ceb-dividerSize) * 1px / 2);
inset-block-start: 0;
inline-size: var(--4dbe2ceb-dividerHitArea);
cursor: ew-resize;
}
}
&.sp-vertical {
&[data-v-4dbe2ceb] {
inline-size: 100%;
block-size: max-content;
}
&[data-v-4dbe2ceb] > :first-child::after {
inline-size: 100%;
inset-block-start: calc(var(--4dbe2ceb-dividerHitArea) / -2 + var(--4dbe2ceb-dividerSize) * 1px / 2);
inset-inline-start: 0;
block-size: var(--4dbe2ceb-dividerHitArea);
cursor: ns-resize;
}
}
}
}