174 lines
3.4 KiB
SCSS
174 lines
3.4 KiB
SCSS
@use "@styles/common";
|
|
@use "@styles/var";
|
|
@use "@styles/color";
|
|
|
|
$panel-width: 30vw;
|
|
$panel-width-max: "400px + 3 * #{var.$block-spacing}";
|
|
$panel-actual-width: min($panel-width, #{$panel-width-max});
|
|
|
|
.projects {
|
|
&.with-left-panel, &.with-right-panel {
|
|
#title {
|
|
max-width: calc(100vw - var.$block-spacing - $panel-actual-width - (var(--button-width) + var.$block-spacing * 2) * 2);
|
|
}
|
|
}
|
|
|
|
&.with-left-panel {
|
|
#submap {
|
|
transform: translateX(calc($panel-actual-width / 2));
|
|
}
|
|
|
|
.panel.panel-left {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
&.with-right-panel {
|
|
#submap {
|
|
transform: translateX(calc($panel-actual-width / -2));
|
|
}
|
|
|
|
#map .maplibregl-ctrl-bottom-right {
|
|
transform: translateX(calc($panel-actual-width * -1));
|
|
}
|
|
|
|
.panel.panel-right {
|
|
transform: translateX(calc(100vw - $panel-actual-width));
|
|
}
|
|
}
|
|
|
|
&.with-right-panel.with-left-panel {
|
|
#submap {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#title {
|
|
max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var(--button-width) + var.$block-spacing * 2) * 2);
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
user-select: none;
|
|
width: #{$panel-width};
|
|
max-width: calc(#{$panel-width-max});
|
|
transition: transform var.$trans-slow;
|
|
|
|
&.moving {
|
|
cursor: grabbing;
|
|
transition: none;
|
|
}
|
|
|
|
&.panel-left {
|
|
transform: translateX(-100%);
|
|
|
|
.panel-content {
|
|
width: calc(100% - var.$block-spacing);
|
|
margin: var.$block-spacing;
|
|
border-radius: var.$block-radius;
|
|
color: color.$default;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.panel-control {
|
|
left: calc(100% + var.$block-spacing);
|
|
}
|
|
}
|
|
|
|
&.panel-right {
|
|
transform: translateX(100vw);
|
|
|
|
.panel-content {
|
|
width: 100%;
|
|
padding-top: var.$block-spacing;
|
|
}
|
|
|
|
.panel-control {
|
|
right: calc(100% + var.$block-spacing);
|
|
}
|
|
}
|
|
|
|
.panel-content {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
input, textarea {
|
|
background-color: color.$post-input-bg;
|
|
color: color.$post;
|
|
outline: none;
|
|
}
|
|
|
|
button, a.button {
|
|
background-color: color.$default-inv-bg;
|
|
color: color.$default-inv;
|
|
|
|
&:hover, &:hover a, &:hover a:visited {
|
|
background-color: color.$default-bg;
|
|
color: color.$default;
|
|
}
|
|
|
|
a, a:visited {
|
|
background-color: color.$default-inv-bg;
|
|
color: color.$default-inv;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-control {
|
|
position: absolute;
|
|
|
|
&.panel-control-top {
|
|
top: var.$block-spacing;
|
|
}
|
|
|
|
&.panel-control-bottom {
|
|
bottom: var.$block-spacing;
|
|
}
|
|
|
|
.panel-control-elem {
|
|
background-color: color.$default-bg;
|
|
border-radius: var.$block-radius;
|
|
box-shadow: var.$map-shadow;
|
|
|
|
&.panel-control-icon {
|
|
cursor: pointer;
|
|
width: var(--button-width);
|
|
height: var(--button-width);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.spot-icon {
|
|
color: color.$default;
|
|
}
|
|
|
|
&:active {
|
|
background-color: color.$default-inv-bg;
|
|
|
|
.spot-icon {
|
|
color: color.$default-inv;
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
&:hover {
|
|
background-color: color.$default-inv-bg;
|
|
|
|
.spot-icon {
|
|
color: color.$default-inv;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |