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

Replace button width sass variable with a css one
All checks were successful
Deploy Spot / deploy (push) Successful in 34s
Details

Browse Source
This commit is contained in:
Franzz
2026-06-07 14:09:15 +02:00
parent 76fdc4be43
commit c738fe8d50
5 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/styles/_mobile.scss
View File

@@ -2,8 +2,7 @@
@media only screen and (max-width: 800px) {
$button-width: 51px;
$panel-width: "100vw - #{$button-width} - 2 * #{var.$block-spacing}";
$panel-width: "100vw - var(--button-width) - 2 * #{var.$block-spacing}";
$panel-width-max: $panel-width;
$panel-actual-width: $panel-width;
@@ -12,6 +11,8 @@
}
.projects {
--button-width: 51px;
.panel-control {
font-size: 2em;
}
@@ -22,8 +23,8 @@
}
#settings #title {
left: calc(100% + $button-width + 2rem);
max-width: calc(100vw - 1rem - ($button-width + 2rem) * 2);
left: calc(100% + var(--button-width) + 2rem);
max-width: calc(100vw - 1rem - (var(--button-width) + 2rem) * 2);
text-align: center;
width: 100%;
transition: none;
@@ -33,9 +34,17 @@
}
}
#settings #settings-panel .settings-header {
padding: var.$block-spacing;
img.logo-title {
margin-top: var.$elem-spacing;
}
}
&.with-right-panel, &.with-left-panel {
#title {
max-width: calc(100vw - var.$block-spacing - ($button-width + 2 * var.$block-spacing) * 2);
max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
}
#submap {
@@ -49,7 +58,7 @@
}
.panel.panel-right {
transform: translateX(calc($button-width + var.$block-spacing * 2));
transform: translateX(calc(var(--button-width) + var.$block-spacing * 2));
}
}

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

@@ -9,7 +9,7 @@ $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);
max-width: calc(100vw - var.$block-spacing - $panel-actual-width - (var(--button-width) + var.$block-spacing * 2) * 2);
}
}
@@ -43,7 +43,7 @@ $panel-actual-width: min($panel-width, #{$panel-width-max});
}
#title {
max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var.$button-width + var.$block-spacing * 2) * 2);
max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var(--button-width) + var.$block-spacing * 2) * 2);
}
}

11
src/styles/_page.project.panel.settings.scss
View File

@@ -11,13 +11,13 @@
}
.settings-header {
padding: var.$block-spacing;
padding: 2 * var.$block-spacing;
border-radius: var.$block-radius var.$block-radius;
@include common.topo-bg(radial, circle farthest-side at 50% 50%, color.$default-bg-light, 40%);
img {
display: block;
margin: auto;
margin: 0 auto;
object-fit: contain;
&.logo-icon {
@@ -25,7 +25,7 @@
}
&.logo-title {
width: 70%;
margin-top: var.$elem-spacing;
margin-top: var.$block-spacing;
}
}
@@ -45,6 +45,7 @@
.settings-sections {
flex: 1 1 auto;
overflow: auto;
border-radius: var.$block-radius;
#settings-sections-scrollbox {
height: 100%;
@@ -165,8 +166,8 @@
}
#title {
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);
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 common.no-text-overflow();

1
src/styles/_page.project.scss
View File

@@ -13,6 +13,7 @@
--track-main: #{color.$main-track};
--track-off-track: #{color.$off-track};
--track-hitchhiking: #{color.$hitchhiking};
--button-width: 31px;
overflow: hidden;
position: absolute;

1
src/styles/_var.scss
View File

@@ -6,7 +6,6 @@ $text-spacing: 0.3em;
$block-spacing: 1rem;
$block-radius: 3px;
$block-shadow: 3px;
$button-width: 31px;
//Common elements
$map-shadow: 2px 2px $block-shadow 0px color.$over-img-shadow;