Migrate MapMixin.css to SCSS

m-mohr · m-mohr · commit 95cbf7ef896f · 2022-09-19T16:34:43.000+02:00
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>

Original file line number	Diff line number	Diff line change
`@@ -53,4 +53,4 @@ export default {`
`53`	`53`	`}`
`54`	`54`	`</script>`
`55`	`55`
`56`		`-<style src="../maps/MapMixin.css"></style>`
	`56`	`+<style src="../maps/MapMixin.scss" lang="scss"></style>`
Original file line number	Diff line number	Diff line change
`@@ -147,4 +147,4 @@ export default {`
`147`	`147`	`}`
`148`	`148`	`</script>`
`149`	`149`
`150`		`-<style src="../maps/MapMixin.css"></style>`
	`150`	`+<style src="../maps/MapMixin.scss" lang="scss"></style>`
Original file line number	Diff line number	Diff line change
`@@ -153,7 +153,7 @@ export default {`
`153`	`153`	`}`
`154`	`154`	`</script>`
`155`	`155`
`156`		`-<style src="../maps/MapMixin.css"></style>`
	`156`	`+<style src="../maps/MapMixin.scss" lang="scss"></style>`
`157`	`157`
`158`	`158`	`<style lang="scss">`
`159`	`159`	`.geojson-map-editor {`
Original file line number	Diff line number	Diff line change
`@@ -61,4 +61,4 @@ export default {`
`61`	`61`	`}`
`62`	`62`	`</script>`
`63`	`63`
`64`		`-<style src="./MapMixin.css"></style>`
	`64`	`+<style src="./MapMixin.scss" lang="scss"></style>`