52 lines
1.7 KiB
CSS
52 lines
1.7 KiB
CSS
/*
|
|
* New editor groups animate when split. Query results and their pane sizes
|
|
* update immediately, including when restoring a collapsed result pane.
|
|
*/
|
|
|
|
.sql-editor-workspace {
|
|
--sql-workspace-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
|
|
/* Override splitpanes' stock transition so ready results are not clipped
|
|
while the result pane expands. */
|
|
.sql-editor-workspace .sql-editor-workspace-split.splitpanes--ready > .splitpanes__pane {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* A group pane created after the workspace is interactive emerges from its
|
|
owner's side (the divider). No fill mode: the transform is released once
|
|
the animation ends so the pane never becomes a containing block. */
|
|
.sql-editor-workspace .workspace-pane-enter {
|
|
animation: dbx-workspace-pane-in 220ms var(--sql-workspace-ease-out);
|
|
}
|
|
.sql-editor-workspace .workspace-pane-enter--from-left {
|
|
--dbx-pane-enter-x: -12px;
|
|
}
|
|
.sql-editor-workspace .workspace-pane-enter--from-top {
|
|
--dbx-pane-enter-y: -12px;
|
|
}
|
|
@keyframes dbx-workspace-pane-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(var(--dbx-pane-enter-x, 0), var(--dbx-pane-enter-y, 0));
|
|
}
|
|
}
|
|
|
|
/* The splitter between the editor and result panes stays in the splitpanes
|
|
flow even when the result pane is collapsed; hide it and disable it so
|
|
the closed state is visually clean and cannot be dragged open into an
|
|
empty pane. */
|
|
.sql-editor-workspace-split > .splitpanes__splitter {
|
|
transition: none;
|
|
}
|
|
.sql-editor-workspace-split.result-pane-collapsed > .splitpanes__splitter {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sql-editor-workspace .workspace-pane-enter {
|
|
animation: none;
|
|
}
|
|
}
|