From be35c73f6ea584b0cc563f542f8dea105624a59d Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 18 Oct 2021 14:51:57 +0200
Subject: [PATCH] feat: merge color-picker.scss with component styles

---
 src/components/input/colorPicker.vue    | 57 ++++++++++++++++++++++++-
 src/styles/components/_index.scss       |  1 -
 src/styles/components/color-picker.scss | 48 ---------------------
 3 files changed, 56 insertions(+), 50 deletions(-)
 delete mode 100644 src/styles/components/color-picker.scss

diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 539a9dcb..51707e9a 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -99,4 +99,59 @@ export default {
 		},
 	},
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+// FIXME: should be @use so that classes dont get imported twice 
+// needed for
+// - $card-shadow
+@import "bulma/sass/components/card.sass";
+.color-picker-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+	// reset / see https://stackoverflow.com/a/11471224/15522256
+	input[type="color"] {
+		-webkit-appearance: none;
+		border: none;
+	}
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
+	$PICKER_SIZE: 24px;
+	$BORDER_WIDTH: 1px;
+	.picker {
+		display: grid;
+		width: $PICKER_SIZE;
+		height: $PICKER_SIZE;
+		overflow: hidden;
+		border-radius: 100%;
+		border: $BORDER_WIDTH solid $grey-300;
+		box-shadow: $card-shadow;
+
+		& > * {
+			grid-row: 1;
+			grid-column: 1;
+		}
+	}
+
+	input.picker__input {
+		padding: 0;
+		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+	}
+
+	.picker__input.is-empty {
+		opacity: 0;
+	}
+	
+	.picker__pattern {
+		pointer-events: none;
+	}
+}
+</style>
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index b78ccd3d..120ff58c 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -13,7 +13,6 @@
 @import "table-view";
 @import "kanban";
 @import "list-backgrounds";
-@import "color-picker";
 @import "namespaces";
 @import "legal";
 @import "keyboard-shortcuts";
diff --git a/src/styles/components/color-picker.scss b/src/styles/components/color-picker.scss
deleted file mode 100644
index 0dbaff73..00000000
--- a/src/styles/components/color-picker.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.color-picker-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-	// reset / see https://stackoverflow.com/a/11471224/15522256
-	input[type="color"] {
-		-webkit-appearance: none;
-		border: none;
-	}
-	input[type="color"]::-webkit-color-swatch-wrapper {
-		padding: 0;
-	}
-	input[type="color"]::-webkit-color-swatch {
-		border: none;
-	}
-
-	$PICKER_SIZE: 24px;
-	$BORDER_WIDTH: 1px;
-	.picker {
-		display: grid;
-		width: $PICKER_SIZE;
-		height: $PICKER_SIZE;
-		overflow: hidden;
-		border-radius: 100%;
-		border: $BORDER_WIDTH solid $grey-300;
-		box-shadow: $card-shadow;
-
-		& > * {
-			grid-row: 1;
-			grid-column: 1;
-		}
-	}
-
-	input.picker__input {
-		padding: 0;
-		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
-		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
-	}
-
-	.picker__input.is-empty {
-		opacity: 0;
-	}
-	
-	.picker__pattern {
-		pointer-events: none;
-	}
-}
\ No newline at end of file