Skip to content

re-added styling for submission success pop-up #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
queeringthemap wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

re-added styling for submission success pop-up #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions src/lib/toast.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
/*
When adding CSS to a component Svelte autofilters out CSS rules that have no
targets inside that component. Because we want to style elements inside
<SvelteToast> we can't add the CSS for that inside the components that use
<SvelteToast>. Adding them globally like this is one solution.
*/
.wrap ._toastContainer {
position: fixed !important;
top: unset !important;
left: 10px !important;
bottom: 6px !important;
bottom: 0px !important;
}

._toastItem {
background-color: black !important;
border: 1px solid var(--color-pink) !important;
}

._toastContainer div {
background-color: black;
right: 0px;
}

._toastContainer li > div {
color: var(--color-pink) !important;
min-width: 383px;
}

._toastContainer li > div > div {
flex: unset !important;
}

._toastBtn::after {
top: 4px;
right: 6px;
position: absolute;
}

.wrap ._toastContainer ._toastItem {
z-index: 999;
pointer-events: all;
cursor: pointer;
}
@media screen and (min-width: 800px) {
._toastContainer {
top: 9px !important;
right: 9px !important;
}
.wrap ._toastContainer ._toastItem {
width: 406px;
max-width: 90%;
top: calc(100% - 20px) !important;
bottom: var(--toastContainerBottom, unset) !important;
right: var(--toastContainerRight, unset) !important;
left: var(--toastContainerLeft, unset) !important;
}
.overlay--add .close-btn img {
width: 45px !important;
border: unset !important;
}
}
@media screen and (max-width: 800px) {
.wrap ._toastContainer {
left: 50% !important;
right: unset !important;
transform: none !important;
top: 0px;
left: 9px !important;
bottom: 0px !important;
}
.wrap ._toastContainer li > div {
min-width: unset !important;
}

._toastContainer {
top: 9px !important;
left: 50% !important;
right: unset !important;
transform: translateX(-50%) !important;
max-width: 100vw;
width: calc(100vw - 9px) !important;
padding-right: 0px !important;
padding-left: 0px !important;
overflow: hidden;
}
._toastItem {
width: unset !important;
}
.wrap ._toastItem {
width: var(--toastWidth, 16rem) !important;
}
._toastBtn::after {
top: 6px;
right: 10px;
}
.maplibregl-ctrl-group:not(:empty) {
top: unset !important;
position: fixed;
bottom: 0px;
right: 0em;
z-index: 999;
}
}
1 change: 1 addition & 0 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import '$lib/style.css';
import '$lib/maplibre_style.css';
import '$lib/toast.css';
import '$lib/navbar_buttons.css';
import AddOverlay from '$lib/AddOverlay.svelte';
import InfoOverlay from '$lib/InfoOverlay.svelte';
Expand Down