Move scss variables to dedicated file

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/board/Board.vue

@@ -157,11 +157,8 @@ export default {
 
 <style lang="scss" scoped>
 
-	@import '../../css/animations.scss';
+	@import "../../css/animations.scss";
-
+	@import "../../css/variables.scss";
-	$board-spacing: 15px;
-	$stack-spacing: 10px;
-	$stack-width: 300px;
 
 	form {
 		text-align: center;

src/components/board/Stack.vue

@@ -253,8 +253,7 @@ export default {
 
 <style lang="scss" scoped>
 
-	$stack-spacing: 10px;
+	@import './../../css/variables';
-	$stack-width: 260px;
 
 	.stack {
 		width: $stack-width;

src/components/cards/CardItem.vue

@@ -165,9 +165,7 @@ export default {
 
 <style lang="scss" scoped>
 	@import './../../css/animations';
-
+	@import './../../css/variables';
-	$card-spacing: 10px;
-	$card-padding: 10px;
 
 	body.dark .card {
 		border: 1px solid var(--color-border);

src/components/dashboards/Dashboards.vue

@@ -132,25 +132,26 @@ export default {
 			})
 			return all
 
-		}
+		},
-	},
-	created() {
-		this.$store.dispatch('loadDashboards')
 	},
 
 }
 </script>
 
 <style lang="scss" scoped>
+@import './../../css/variables';
 
 .dashboard {
-  display: flex;
+	display: flex;
 	align-items: stretch;
+	margin: $board-spacing;
 
-  .dashboard-column {
+	.dashboard-column {
-    display: flex;
+		display: flex;
-    flex-direction: column;
+		flex-direction: column;
-  }
+		width: $stack-width;
+		margin: $stack-spacing;
+	}
 }
 
 </style>

src/css/variables.scss

@@ -0,0 +1,5 @@
+$card-spacing: 10px;
+$card-padding: 10px;
+$stack-spacing: 10px;
+$stack-width: 260px;
+$board-spacing: 15px;