From 42d14ca5c9fd7f3e00617d2636460dc5a5734fa9 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 27 May 2021 17:33:43 +0100
Subject: [PATCH] Reorganise leaflet styles

---
 src/scss/_leaflet.scss         |  21 ++++++
 src/scss/leaflet/_markers.scss |  93 ++++++++++++++++++++++++++
 src/scss/style.scss            | 115 +--------------------------------
 3 files changed, 115 insertions(+), 114 deletions(-)
 create mode 100644 src/scss/_leaflet.scss
 create mode 100644 src/scss/leaflet/_markers.scss

diff --git a/src/scss/_leaflet.scss b/src/scss/_leaflet.scss
new file mode 100644
index 0000000..5107e49
--- /dev/null
+++ b/src/scss/_leaflet.scss
@@ -0,0 +1,21 @@
+@import "leaflet/controls";
+@import "leaflet/popups";
+@import "leaflet/markers";
+
+.leaflet-container {
+	font-family: inherit;
+	font-size: 1.5rem;
+	font-weight: inherit;
+	line-height: 1;
+
+	/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
+	* {
+		@include focus {
+			outline-style: auto !important;
+		}
+	}
+}
+
+.leaflet-players-pane {
+	z-index: 600;
+}
diff --git a/src/scss/leaflet/_markers.scss b/src/scss/leaflet/_markers.scss
new file mode 100644
index 0000000..55bc074
--- /dev/null
+++ b/src/scss/leaflet/_markers.scss
@@ -0,0 +1,93 @@
+/*******************
+ * players on the map
+ */
+
+.marker {
+	display: flex;
+	align-items: center;
+
+	&.marker--player {
+   		transition: transform 0.3s ease-in 0s;
+
+		.marker__label {
+			display: block;
+		}
+
+		.player__health,
+		.player__armor {
+			width: 50px;
+		}
+
+		.player__health,
+		.player__armor,
+		.player__health-bar,
+		.player__armor-bar {
+			height: 7px;
+		}
+
+		.player__health {
+			background: url(../assets/images/heart_depleted.png) repeat-x left center;
+		}
+
+		.player__health-bar {
+			background: url(../assets/images/heart.png) repeat-x left center;
+		}
+
+		.player__armor {
+			background: url(../assets/images/armor_depleted.png) repeat-x left center;
+		}
+
+		.player__armor-bar {
+			background: url(../assets/images/armor.png) repeat-x left center;
+		}
+	}
+
+	.marker__label {
+		flex: 0 0 auto;
+		margin-left: 2px;
+		z-index: 20;
+		font-size: 1.5rem;
+		line-height: 1;
+
+		white-space: nowrap;
+
+		color: var(--text-base);
+		background: var(--background-dark);
+		padding: 0.2rem;
+		display: none;
+		max-width: 25vw;
+		text-overflow: ellipsis;
+		overflow: hidden;
+
+		@at-root .leaflet-pane--show-labels .marker__label {
+			display: block;
+		}
+	}
+
+	&:hover {
+		z-index: 1000;
+	}
+
+	@include focus {
+		z-index: 1000;
+
+		.marker__label {
+			display: block;
+			outline: auto;
+		}
+	}
+
+	&:hover .marker__label {
+		display: block;
+	}
+
+	@at-root {
+		.no-animations .marker.marker--player {
+			transition: none;
+		}
+	}
+
+	@media print {
+		display: none !important;
+	}
+}
\ No newline at end of file
diff --git a/src/scss/style.scss b/src/scss/style.scss
index ca28579..aad3443 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -19,8 +19,7 @@
 @import "mixins";
 @import "placeholders";
 @import "notifications";
-@import "leaflet/controls";
-@import "leaflet/popups";
+@import "leaflet";
 
 @keyframes spin {
 	0% {
@@ -265,118 +264,6 @@ input {
 	}
 }
 
-/*******************
- * players on the map
- */
-
-.marker {
-	display: flex;
-	align-items: center;
-
-	&.marker--player {
-   		transition: transform 0.3s ease-in 0s;
-
-		.marker__label {
-			display: block;
-		}
-
-		.player__health,
-		.player__armor {
-			width: 50px;
-		}
-
-		.player__health,
-		.player__armor,
-		.player__health-bar,
-		.player__armor-bar {
-			height: 7px;
-		}
-
-		.player__health {
-			background: url(../assets/images/heart_depleted.png) repeat-x left center;
-		}
-
-		.player__health-bar {
-			background: url(../assets/images/heart.png) repeat-x left center;
-		}
-
-		.player__armor {
-			background: url(../assets/images/armor_depleted.png) repeat-x left center;
-		}
-
-		.player__armor-bar {
-			background: url(../assets/images/armor.png) repeat-x left center;
-		}
-	}
-
-	.marker__label {
-		flex: 0 0 auto;
-		margin-left: 2px;
-		z-index: 20;
-		font-size: 1.5rem;
-		line-height: 1;
-
-		white-space: nowrap;
-
-		color: var(--text-base);
-		background: var(--background-dark);
-		padding: 0.2rem;
-		display: none;
-		max-width: 25vw;
-		text-overflow: ellipsis;
-		overflow: hidden;
-
-		@at-root .leaflet-pane--show-labels .marker__label {
-			display: block;
-		}
-	}
-
-	&:hover {
-		z-index: 1000;
-	}
-
-	@include focus {
-		z-index: 1000;
-
-		.marker__label {
-			display: block;
-			outline: auto;
-		}
-	}
-
-	&:hover .marker__label {
-		display: block;
-	}
-
-	@at-root {
-		.no-animations .marker.marker--player {
-			transition: none;
-		}
-	}
-
-	@media print {
-		display: none !important;
-	}
-}
-
-.leaflet-container {
-	font-family: inherit;
-	font-size: 1.5rem;
-	font-weight: inherit;
-	line-height: 1;
-
-	/* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */
-	* {
-		@include focus {
-			outline-style: auto !important;
-		}
-	}
-}
-
-.leaflet-players-pane {
-	z-index: 600;
-}
-
 @media print {
 	@page {
 		size: 297mm 210mm;