mirror of
https://github.com/maputnik/editor.git
synced 2026-10-28 22:03:45 +00:00
Harel MandBart Louwers
2384adf517
- Replaces #1870, which replaced #1682, #1677 This mostly uses the code from there and addresses the comments I've left. I didn't change the code much. ## Launch Checklist Makes the sidebar panel resizable <img width="707" height="511" alt="image" src="https://github.com/user-attachments/assets/d010df38-faac-441c-bf7f-a4960e471c61" /> - [x] Briefly describe the changes in this PR. - [x] Link to related issues. - [x] Include before/after visuals or gifs if this PR includes visual changes. - [x] Write tests for all new functionality. - [x] Add an entry to `CHANGELOG.md` under the `## main` section. --------- Co-authored-by: Bart Louwers <bart.louwers@gmail.com>
104 lines
1.9 KiB
SCSS
104 lines
1.9 KiB
SCSS
@use "vars";
|
|
|
|
//SCROLLING
|
|
.maputnik-scroll-container {
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 1px;
|
|
position: absolute;
|
|
}
|
|
|
|
//APP LAYOUT
|
|
.maputnik-layout {
|
|
font-family: vars.$font-family;
|
|
color: vars.$color-white;
|
|
|
|
&-main {
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: calc(100% - #{vars.$toolbar-height + vars.$toolbar-offset});
|
|
top: vars.$toolbar-height + vars.$toolbar-offset;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
|
|
display: flex;
|
|
}
|
|
|
|
// The resizable panel group filling the main area.
|
|
&-panels {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
&-sidebar-panels,
|
|
&-sidebar,
|
|
&-code-editor,
|
|
&-list,
|
|
&-drawer,
|
|
&-map {
|
|
height: 100%;
|
|
// scroll-container is position: absolute
|
|
position: relative;
|
|
}
|
|
|
|
&-sidebar,
|
|
&-code-editor,
|
|
&-list,
|
|
&-drawer {
|
|
background-color: vars.$color-black;
|
|
}
|
|
|
|
&-resize-handle {
|
|
width: 5px;
|
|
background-color: transparent;
|
|
position: relative;
|
|
z-index: 5;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus-visible {
|
|
background-color: rgba(vars.$color-lowgray, 0.5);
|
|
}
|
|
|
|
// The separator is keyboard resizable, so it needs a visible focus ring.
|
|
&:focus-visible {
|
|
outline: #8e8e8e auto 1px;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 3px;
|
|
height: 30px;
|
|
border-radius: 2px;
|
|
background-color: vars.$color-lowgray;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
&:hover::after,
|
|
&:active::after,
|
|
&:focus-visible::after {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
&-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
inset-inline-start: var(--sidebar-width);
|
|
inset-inline-end: 0;
|
|
background-color: vars.$color-black;
|
|
}
|
|
}
|