diff --git a/src/components/datatypes/GeoJsonEditor.vue b/src/components/datatypes/GeoJsonEditor.vue
index b3707db84..a5472c6b7 100644
--- 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>
\ No newline at end of file
+<style src="../maps/MapMixin.scss" lang="scss"></style>
\ No newline at end of file
diff --git a/src/components/datatypes/MapAreaSelect.vue b/src/components/datatypes/MapAreaSelect.vue
index 5771151bf..54dde3779 100644
--- 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>
\ No newline at end of file
+<style src="../maps/MapMixin.scss" lang="scss"></style>
\ No newline at end of file
diff --git a/src/components/maps/GeoJsonMapEditor.vue b/src/components/maps/GeoJsonMapEditor.vue
index 2d31bea51..7712b4941 100644
--- 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
index e3ce50004..c128a0389 100644
--- a/src/components/maps/MapExtentViewer.vue
+++ b/src/components/maps/MapExtentViewer.vue
@@ -61,4 +61,4 @@ export default {
 }
 </script>
 
-<style src="./MapMixin.css"></style>
\ No newline at end of file
+<style src="./MapMixin.scss" lang="scss"></style>
\ No newline at end of file
diff --git a/src/components/maps/MapMixin.css b/src/components/maps/MapMixin.css
deleted file mode 100644
index 9c99c90cb..000000000
--- a/src/components/maps/MapMixin.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Customize layerswitcher control */
-.ol-layerswitcher > button {
-    font-size: 1.14em;
-	background-color: rgba(0,60,136,.5);
-}
-.ol-layerswitcher > button:before, .ol-layerswitcher > button:after {
-	background: transparent;
-	background-image: none;
-	box-shadow: none;
-	position: inherit;
-	transform: none;
-    display: inline-block;
-	width: auto;
-	height: auto;
-}
-.ol-layerswitcher > button: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-control.ol-timeline {
-	z-index: 1;
-}
\ No newline at end of file
diff --git a/src/components/maps/MapMixin.scss b/src/components/maps/MapMixin.scss
new file mode 100644
index 000000000..e96cd794c
--- /dev/null
+++ 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;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/components/viewer/MapViewer.vue b/src/components/viewer/MapViewer.vue
index 33e967277..84b47f00a 100644
--- 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>
\ No newline at end of file