franzz/spot
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Migrate SASS

Browse Source
This commit is contained in:
Franzz
2026-01-09 23:41:47 +01:00
parent d9bc89b7f6
commit ac9fcbe0ba
26 changed files with 1153 additions and 1124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/styles/_page.project.panel.scss
View File

@@ -1,34 +1,39 @@
@use "common";
@use "var";
@use "color";
@use "fa";
$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{$block-spacing}";
$panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
$panel-width-max: "400px + 3 * #{var.$block-spacing}";
$panel-actual-width: min($panel-width, #{$panel-width-max});
#projects {
&.with-feed, &.with-settings {
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} - (#{$button-width} + #{$block-spacing} * 2) * 2);
max-width: calc(100vw - var.$block-spacing - $panel-actual-width - (var.$button-width + var.$block-spacing * 2) * 2);
}
}
&.with-feed {
#submap {
transform: translateX(calc(#{$panel-actual-width} / -2));
transform: translateX(calc($panel-actual-width / -2));
}
.map-container-right {
transform: translateX(calc(100vw - #{$panel-actual-width}));
transform: translateX(calc(100vw - $panel-actual-width));
}
}
&.with-settings {
#submap {
transform: translateX(calc(#{$panel-actual-width} / 2));
transform: translateX(calc($panel-actual-width / 2));
}
.map-container-left {
transform: translateX(0);
.map-panel {
box-shadow: 2px 2px $block-shadow 0px rgba(0, 0, 0, .5);
box-shadow: 2px 2px var.$block-shadow 0px rgba(0, 0, 0, .5);
}
}
}
@@ -39,7 +44,7 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
}
#title {
max-width: calc(100vw - #{$block-spacing} - #{$panel-actual-width} * 2 - (#{$button-width} + #{$block-spacing} * 2) * 2);
max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var.$button-width + var.$block-spacing * 2) * 2);
}
}
@@ -50,7 +55,7 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
z-index: 1;
user-select: none;
width: #{$panel-width};
max-width: calc(#{$panel-width-max});
max-width: calc(#{panel-width-max});
transition: transform 0.5s;
&.moving {
@@ -66,28 +71,28 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
}
input, textarea {
background-color: $post-input-bg;
color: $post-color;
background-color: color.$post-input-bg;
color: color.$post;
outline: none;
}
button, a.button {
background-color: $post-color;
color: $post-bg;
background-color: color.$post;
color: color.$post-bg;
&:hover, &:hover a, &:hover a:visited {
background-color: $post-input-bg;
color: $post-color;
background-color: color.$post-input-bg;
color: color.$post;
}
a, a:visited {
background-color: $post-color;
color: $post-bg;
background-color: color.$post;
color: color.$post-bg;
text-decoration: none;
}
&+ button, &+ a.button {
margin-left: $elem-spacing;
margin-left: var.$elem-spacing;
}
}
}
@@ -96,10 +101,10 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
transform: translateX(-100%);
.map-panel { //#settings-panel
width: calc(100% - #{$block-spacing});
margin: $block-spacing;
border-radius: $block-radius;
color: $post-color;
width: calc(100% - var.$block-spacing);
margin: var.$block-spacing;
border-radius: var.$block-radius;
color: color.$post;
background: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
@@ -112,25 +117,25 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
.map-panel { //#feed-panel
width: 100%;
padding-top: $block-spacing;
padding-top: var.$block-spacing;
}
}
.map-control {
position: absolute;
background-color: $post-bg;
padding: $elem-spacing;
background-color: color.$post-bg;
padding: var.$elem-spacing;
border-radius: 3px;
box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
font-size: 12px;
line-height: 1.5;
&.map-control-top {
top: $block-spacing;
top: var.$block-spacing;
}
&.map-control-bottom {
bottom: $block-spacing;
bottom: var.$block-spacing;
}
&.map-control-icon {
@@ -138,7 +143,7 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
.fa {
@extend .fa-fw;
color: $post-color;
color: color.$post;
}
&:hover .fa {
@@ -148,11 +153,11 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
}
.feed-control {
right: calc(100% + $block-spacing);
right: calc(100% + var.$block-spacing);
}
.settings-control {
left: calc(100% + $block-spacing);
left: calc(100% + var.$block-spacing);
}
#legend {
@@ -168,20 +173,20 @@ $panel-actual-width: min(#{$panel-width}, #{$panel-width-max});
.desc {
font-size: 1em;
margin-left: 0.5em;
color: $legend-color;
color: color.$legend;
}
}
}
#title {
left: calc(100% + #{$button-width} + 2 * #{$block-spacing});
max-width: calc(100vw - #{$block-spacing} - (#{$button-width} + 2 * #{$block-spacing}) * 2);
left: calc(100% + var.$button-width + 2 * var.$block-spacing);
max-width: calc(100vw - var.$block-spacing - (var.$button-width + 2 * var.$block-spacing) * 2);
transition: max-width 0.5s;
@include no-text-overflow();
@include common.no-text-overflow();
span {
font-size: 1.3em;
line-height: $block-spacing;
line-height: var.$block-spacing;
}
}