mirror of
https://github.com/maputnik/editor.git
synced 2026-09-11 23:07:41 +00:00
Harel M
39d63ec7b1
## Launch Checklist This PR adds the ability to look at the entire style and edit it in a code editor that supports syntax highlight, errors, search and more. - Resolves #820 CC: @Kanahiro as I know you did something similar, probably has better performance... After: <img width="1920" height="937" alt="image" src="https://github.com/user-attachments/assets/f925cf92-2623-4390-8f75-14d7f6a79171" /> - [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: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Frank Elsinga <frank@elsinga.de>
59 lines
1.0 KiB
SCSS
59 lines
1.0 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;
|
|
}
|
|
|
|
&-list {
|
|
width: 200px;
|
|
background-color: vars.$color-black;
|
|
}
|
|
|
|
&-drawer {
|
|
width: 370px;
|
|
background-color: vars.$color-black;
|
|
// scroll-container is position: absolute
|
|
position: relative;
|
|
}
|
|
|
|
&-code-editor {
|
|
width: 570px;
|
|
background-color: vars.$color-black;
|
|
// scroll-container is position: absolute
|
|
position: relative;
|
|
}
|
|
|
|
&-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: vars.$layout-map-width;
|
|
background-color: vars.$color-black;
|
|
}
|
|
}
|