From 80bd7cbabc2e8f14279ea7b7cf568b753ff90585 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 10 Jul 2019 11:23:14 +0200
Subject: [PATCH 1/2] Mover workflow to SCSS and support the dark theme

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 apps/workflowengine/css/{admin.css => admin.scss} | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)
 rename apps/workflowengine/css/{admin.css => admin.scss} (84%)

diff --git a/apps/workflowengine/css/admin.css b/apps/workflowengine/css/admin.scss
similarity index 84%
rename from apps/workflowengine/css/admin.css
rename to apps/workflowengine/css/admin.scss
index 0c34ffc8097..1896756a849 100644
--- a/apps/workflowengine/css/admin.css
+++ b/apps/workflowengine/css/admin.scss
@@ -2,11 +2,11 @@
 	padding: 5px;
 	padding-bottom: 20px;
 	margin-bottom: 20px;
-	border-bottom: #eee 1px solid;
-	border-left: rgba(0,0,0,0) 1px solid;
+	border-bottom: var(--color-border) 1px solid;
+	border-left: rgba(0, 0, 0, 0) 2px solid;
 }
 .workflowengine .operation.modified {
-	border-left: rgb(255, 94, 32) 1px solid;
+	border-left: var(--color-warning) 2px solid;
 }
 .workflowengine .operation button {
 	margin-bottom: 0;
@@ -17,7 +17,7 @@
 }
 .workflowengine .operation span.info {
 	padding: 7px;
-	color: #eee;
+	color: var(--color-border);
 }
 .workflowengine .rules .operation:nth-last-child(2) {
 	margin-bottom: 5px;
@@ -35,7 +35,7 @@
 }
 
 .workflowengine .operation .check:hover {
-	background-color: #f8f8f8;
+	background-color: var(--color-background-dark);
 }
 
 .workflowengine .operation-header .operation-name {
@@ -70,6 +70,6 @@
 }
 
 .workflowengine .invalid-input {
-	border-color: #aa0000;
+	border-color: var(--color-error);
 }
 

From 89ca22b17006adf033ab1fdff2b0e6353545e54b Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Wed, 10 Jul 2019 11:32:19 +0200
Subject: [PATCH 2/2] Use SCSS nesting

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 apps/workflowengine/css/admin.scss | 147 ++++++++++++++++-------------
 1 file changed, 79 insertions(+), 68 deletions(-)

diff --git a/apps/workflowengine/css/admin.scss b/apps/workflowengine/css/admin.scss
index 1896756a849..523bb7f8ba6 100644
--- a/apps/workflowengine/css/admin.scss
+++ b/apps/workflowengine/css/admin.scss
@@ -1,75 +1,86 @@
-.workflowengine .operation {
-	padding: 5px;
-	padding-bottom: 20px;
-	margin-bottom: 20px;
-	border-bottom: var(--color-border) 1px solid;
-	border-left: rgba(0, 0, 0, 0) 2px solid;
-}
-.workflowengine .operation.modified {
-	border-left: var(--color-warning) 2px solid;
-}
-.workflowengine .operation button {
-	margin-bottom: 0;
-}
-.workflowengine .operation-name {
-	width: 100%;
-	max-width: 500px;
-}
-.workflowengine .operation span.info {
-	padding: 7px;
-	color: var(--color-border);
-}
-.workflowengine .rules .operation:nth-last-child(2) {
-	margin-bottom: 5px;
-}
+.workflowengine {
+	.pull-right {
+		float: right
+	}
 
-.workflowengine .pull-right {
-	float: right
-}
+	.invalid-input {
+		border-color: var(--color-error);
+	}
 
-.workflowengine .operation .msg {
-	border-radius: 3px;
-	margin: 3px 3px 3px 0;
-	padding: 5px;
-	transition: opacity .5s;
-}
+	.operation {
+		padding: 5px 5px 20px;
+		margin-bottom: 20px;
+		border-bottom: var(--color-border) 1px solid;
+		border-left: rgba(0, 0, 0, 0) 2px solid;
 
-.workflowengine .operation .check:hover {
-	background-color: var(--color-background-dark);
-}
+		&.modified {
+			border-left: var(--color-warning) 2px solid;
+		}
 
-.workflowengine .operation-header .operation-name {
-	align-self: flex-start;
-	padding: 10px;
-}
-.workflowengine .operation-header {
-	display: flex;
-}
-.workflowengine .operation-header .select2-container {
-	align-self: flex-end;
-}
-.workflowengine .operation-header .icon-delete {
-	margin-left: auto;
-}
-.workflowengine .operation .button-delete,
-.workflowengine .operation .button-delete-check {
-	opacity: 0.5;
-	padding: 11px;
-}
-.workflowengine .operation .button-delete:hover,
-.workflowengine .operation .button-delete:focus,
-.workflowengine .operation .button-delete-check:hover,
-.workflowengine .operation .button-delete-check:focus {
-	opacity: 1;
-	cursor: pointer;
-}
+		button {
+			margin-bottom: 0;
+		}
 
-.workflowengine .rules .icon-loading-small {
-	display: inline-block;
-	margin-right: 5px;
-}
+		span.info {
+			padding: 7px;
+			color: var(--color-border);
+		}
 
-.workflowengine .invalid-input {
-	border-color: var(--color-error);
-}
+		.msg {
+			border-radius: 3px;
+			margin: 3px 3px 3px 0;
+			padding: 5px;
+			transition: opacity .5s;
+		}
 
+		.check {
+			padding-left: 5px;
+			&:hover {
+				background-color: var(--color-background-dark);
+			}
+		}
+
+		.button-delete,
+		.button-delete-check {
+			opacity: 0.5;
+			padding: 11px;
+
+			&:hover,
+			&:focus {
+				opacity: 1;
+				cursor: pointer;
+			}
+		}
+	}
+
+	.rules {
+		.icon-loading-small {
+			display: inline-block;
+			margin-right: 5px;
+		}
+
+		.operation:nth-last-child(2) {
+			margin-bottom: 5px;
+		}
+	}
+
+	.operation-header {
+		display: flex;
+		margin-left: 5px;
+
+		.operation-name {
+			width: 100%;
+			max-width: 500px;
+			align-self: flex-start;
+			padding: 10px;
+		}
+
+		.select2-container {
+			align-self: flex-end;
+		}
+
+		.icon-delete {
+			margin-left: auto;
+		}
+	}
+}