Feat: Add collapsible shell
This commit is contained in:
@@ -23,6 +23,14 @@
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.bodyRailCollapsed {
|
||||
--rail-width: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed {
|
||||
--sidebar-width: 0rem;
|
||||
}
|
||||
|
||||
.railColumn {
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
@@ -97,7 +105,7 @@
|
||||
position: absolute;
|
||||
bottom: var(--space-3);
|
||||
left: calc(var(--space-1) + (var(--rail-width) * 0.1));
|
||||
width: calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2));
|
||||
width: max(12rem, calc(var(--sidebar-width) + (var(--rail-width) * 0.9) - var(--space-2)));
|
||||
right: auto;
|
||||
z-index: calc(var(--z-modal) + 1);
|
||||
pointer-events: none;
|
||||
@@ -112,6 +120,14 @@
|
||||
--rail-width: 5rem;
|
||||
--sidebar-width: 17.25rem;
|
||||
}
|
||||
|
||||
.bodyRailCollapsed {
|
||||
--rail-width: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed {
|
||||
--sidebar-width: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-down(tablet) {
|
||||
@@ -119,6 +135,58 @@
|
||||
--rail-width: 4.5rem;
|
||||
--sidebar-width: 13.25rem;
|
||||
}
|
||||
|
||||
.bodyRailCollapsed {
|
||||
--rail-width: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed {
|
||||
--sidebar-width: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bodyRailCollapsed .railColumn {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .railColumn {
|
||||
--rail-dock-clearance: 0rem;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed:not(.bodyRailCollapsed) .railColumn {
|
||||
--rail-bottom-offset: var(--space-3);
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .sidebarColumn {
|
||||
--sidebar-dock-clearance: 0rem;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .workspaceRegion {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .workspaceMain {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceMain {
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--shell-frame-border);
|
||||
border-left-color: var(--shell-frame-border);
|
||||
border-top-left-radius: var(--shell-top-left-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed:not(.bodyRailCollapsed) .workspaceRegion::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bodySidebarCollapsed .sidebarDock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
|
||||
Reference in New Issue
Block a user