Migrate MapMixin.css to SCSS

Open-EO · Sep 19, 2022 · 95cbf7e · 95cbf7e
1 parent c7ff116
commit 95cbf7e
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 49 deletions.
diff --git a/src/components/datatypes/GeoJsonEditor.vue b/src/components/datatypes/GeoJsonEditor.vue
@@ -53,4 +53,4 @@ export default {
 }
 </script>
 
-<style src="../maps/MapMixin.css"></style>
+<style src="../maps/MapMixin.scss" lang="scss"></style>
diff --git a/src/components/datatypes/MapAreaSelect.vue b/src/components/datatypes/MapAreaSelect.vue
@@ -147,4 +147,4 @@ export default {
 }
 </script>
 
-<style src="../maps/MapMixin.css"></style>
+<style src="../maps/MapMixin.scss" lang="scss"></style>
diff --git a/src/components/maps/GeoJsonMapEditor.vue b/src/components/maps/GeoJsonMapEditor.vue
@@ -153,7 +153,7 @@ export default {
 }
 </script>
 
-<style src="../maps/MapMixin.css"></style>
+<style src="../maps/MapMixin.scss" lang="scss"></style>
 
 <style lang="scss">
 .geojson-map-editor {

diff --git a/src/components/maps/MapExtentViewer.vue b/src/components/maps/MapExtentViewer.vue
@@ -61,4 +61,4 @@ export default {
 }
 </script>
 
-<style src="./MapMixin.css"></style>
+<style src="./MapMixin.scss" lang="scss"></style>
diff --git a/src/components/maps/MapMixin.css b/src/components/maps/MapMixin.css
diff --git a/src/components/maps/MapMixin.scss b/src/components/maps/MapMixin.scss
@@ -0,0 +1,57 @@
+/* Customize layerswitcher control */
+.ol-layerswitcher > button {
+    font-size: 1.14em;
+	background-color: rgba(0,60,136,.5);
+
+	&:before,
+	&:after {
+		background: transparent;
+		background-image: none;
+		box-shadow: none;
+		position: inherit;
+		transform: none;
+		display: inline-block;
+		width: auto;
+		height: auto;
+	}
+
+	&:after {
+		font-family: "Font Awesome\ 5 Free";
+		content: "\f5fd";
+		font-weight: 900;
+		left: 1px;
+		top: 1px;
+	}
+}
+
+/* Customize scale line control */
+.ol-scale-line {
+	background-color: rgba(0,60,136,.5);
+}
+.ol-scale-line-inner {
+	color: #fff;
+	border-color: #fff;
+}
+
+.ol-unselectable,
+.ol-control {
+	z-index: 2;
+
+	&.ol-timeline {
+		z-index: 1;
+
+		.ol-buttons {
+			width: auto;
+			font-size: 0.8em;
+
+			> button {
+				display: inline-block;
+			}
+
+			.timeline-date-label {
+				width: 7em;
+				font-weight: normal;
+			}
+		}
+	}
+}
diff --git a/src/components/viewer/MapViewer.vue b/src/components/viewer/MapViewer.vue
@@ -231,7 +231,7 @@ export default {
 }
 </script>
 
-<style src="../maps/MapMixin.css"></style>
+<style src="../maps/MapMixin.scss" lang="scss"></style>
 
 <style lang="scss">
 .map-viewer {
@@ -260,9 +260,4 @@ export default {
 	top: 0.5em;
 	left: 3em;
 }
-.ol-control.ol-timeline .timeline-date-label {
-	width: 7em;
-    font-size: 0.8em;
-    font-weight: normal;
-}
 </style>