From a2c5c8a52aaac5cc88ae7d45db09f9b43e4882a1 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:20:16 +0200
Subject: [PATCH] feat: merge datepicker.scss styles with component

---
 src/components/input/datepicker.vue   | 76 +++++++++++++++++++++++++++
 src/styles/components/_index.scss     |  1 -
 src/styles/components/datepicker.scss | 68 ------------------------
 3 files changed, 76 insertions(+), 69 deletions(-)
 delete mode 100644 src/styles/components/datepicker.scss

diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 724764c75..8fb7678cb 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -243,3 +243,79 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+// FIXME: should be @use so that classes dont get imported twice 
+@import "bulma/sass/components/card.sass";
+// needed for
+// - $card-shadow
+
+.datepicker {
+	input.input {
+		display: none;
+	}
+
+	&.disabled a {
+		cursor: default;
+	}
+
+	.datepicker-popup {
+		position: absolute;
+		z-index: 99;
+		width: 320px;
+		background: $white;
+		border-radius: $radius;
+		box-shadow: $card-shadow;
+
+		@media screen and (max-width: ($tablet)) {
+			width: calc(100vw - 5rem);
+		}
+
+		a:not(.button) {
+			display: flex;
+			align-items: center;
+			padding: 0 .5rem;
+			width: 100%;
+			height: 2.25rem;
+			color: $text;
+			transition: all $transition;
+
+			&:first-child {
+				border-radius: $radius $radius 0 0;
+			}
+
+			&:hover {
+				background: $light;
+			}
+
+			.text {
+				width: 100%;
+				font-size: .85rem;
+				display: flex;
+				justify-content: space-between;
+				padding-right: .25rem;
+
+				.weekday {
+					color: $text-light;
+					text-transform: capitalize;
+				}
+			}
+
+			.icon {
+				width: 2rem;
+				text-align: center;
+			}
+		}
+			
+		a.button {
+			margin: 1rem;
+			width: calc(100% - 2rem);
+		}
+
+		::v-deep .flatpickr-calendar {
+			margin: 0 auto 8px;
+			box-shadow: none;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index cddca3021..4bcf52479 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -15,6 +15,5 @@
 @import "namespaces";
 @import "legal";
 @import "keyboard-shortcuts";
-@import "datepicker";
 @import "notifications";
 @import "quick-actions";
\ No newline at end of file
diff --git a/src/styles/components/datepicker.scss b/src/styles/components/datepicker.scss
deleted file mode 100644
index c4630b2ca..000000000
--- a/src/styles/components/datepicker.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.datepicker {
-	input.input {
-		display: none;
-	}
-
-	&.disabled a {
-		cursor: default;
-	}
-
-	.datepicker-popup {
-		position: absolute;
-		z-index: 99;
-		width: 320px;
-		background: $white;
-		border-radius: $radius;
-		box-shadow: $card-shadow;
-
-		a:not(.button) {
-			display: flex;
-			align-items: center;
-			padding: 0 .5rem;
-			width: 100%;
-			height: 2.25rem;
-			color: $text;
-			transition: all $transition;
-
-			&:first-child {
-				border-radius: $radius $radius 0 0;
-			}
-
-			&:hover {
-				background: $light;
-			}
-
-			.text {
-				width: 100%;
-				font-size: .85rem;
-				display: flex;
-				justify-content: space-between;
-				padding-right: .25rem;
-
-				.weekday {
-					color: $text-light;
-					text-transform: capitalize;
-				}
-			}
-
-			.icon {
-				width: 2rem;
-				text-align: center;
-			}
-		}
-			
-		a.button {
-			margin: 1rem;
-			width: calc(100% - 2rem);
-		}
-
-		.flatpickr-calendar {
-			margin: 0 auto 8px;
-			box-shadow: none;
-		}
-
-		@media screen and (max-width: ($tablet)) {
-			width: calc(100vw - 5rem);
-		}
-	}
-}
\ No newline at end of file