mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
21bdc6ba8f
* add resizing capabilities to the side bar Signed-off-by: Sebastian Malton <sebastian@malton.name>
64 lines
1.3 KiB
SCSS
Executable File
64 lines
1.3 KiB
SCSS
Executable File
.MainLayout {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"aside header"
|
|
"aside tabs"
|
|
"aside main"
|
|
"aside footer";
|
|
grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
|
|
grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
|
|
|
|
height: 100%;
|
|
|
|
> header {
|
|
grid-area: header;
|
|
background: $layoutBackground;
|
|
padding: $padding $padding * 2;
|
|
|
|
span + .lens-version {
|
|
margin-left: $margin;
|
|
}
|
|
|
|
.lens-version {
|
|
font-size: x-small;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
> aside {
|
|
grid-area: aside;
|
|
position: relative;
|
|
background: $sidebarBackground;
|
|
white-space: nowrap;
|
|
transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&.pinned {
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
&:not(.pinned) {
|
|
position: absolute;
|
|
width: var(--main-layout-header);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
&.accessible:hover {
|
|
width: var(--sidebar-width);
|
|
transition-delay: 750ms;
|
|
box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
|
|
z-index: $zIndex-sidebar-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
> main {
|
|
display: contents;
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
grid-area: footer;
|
|
min-width: 0; // restrict size when overflow content (e.g. <Dock> tabs scrolling)
|
|
}
|
|
}
|