Mover workflow to SCSS and support the dark theme

Signed-off-by: Joas Schilling <coding@schilljs.com>

diff --git a/apps/workflowengine/css/admin.css b/apps/workflowengine/css/admin.css
deleted file mode 100644 (file)
index 0c34ffc..0000000
--- a/apps/workflowengine/css/admin.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.workflowengine .operation {
-       padding: 5px;
-       padding-bottom: 20px;
-       margin-bottom: 20px;
-       border-bottom: #eee 1px solid;
-       border-left: rgba(0,0,0,0) 1px solid;
-}
-.workflowengine .operation.modified {
-       border-left: rgb(255, 94, 32) 1px solid;
-}
-.workflowengine .operation button {
-       margin-bottom: 0;
-}
-.workflowengine .operation-name {
-       width: 100%;
-       max-width: 500px;
-}
-.workflowengine .operation span.info {
-       padding: 7px;
-       color: #eee;
-}
-.workflowengine .rules .operation:nth-last-child(2) {
-       margin-bottom: 5px;
-}
-
-.workflowengine .pull-right {
-       float: right
-}
-
-.workflowengine .operation .msg {
-       border-radius: 3px;
-       margin: 3px 3px 3px 0;
-       padding: 5px;
-       transition: opacity .5s;
-}
-
-.workflowengine .operation .check:hover {
-       background-color: #f8f8f8;
-}
-
-.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;
-}
-
-.workflowengine .rules .icon-loading-small {
-       display: inline-block;
-       margin-right: 5px;
-}
-
-.workflowengine .invalid-input {
-       border-color: #aa0000;
-}
-

diff --git a/apps/workflowengine/css/admin.scss b/apps/workflowengine/css/admin.scss
new file mode 100644 (file)
index 0000000..1896756
--- /dev/null
+++ b/apps/workflowengine/css/admin.scss
@@ -0,0 +1,75 @@
+.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 .operation .msg {
+       border-radius: 3px;
+       margin: 3px 3px 3px 0;
+       padding: 5px;
+       transition: opacity .5s;
+}
+
+.workflowengine .operation .check:hover {
+       background-color: var(--color-background-dark);
+}
+
+.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;
+}
+
+.workflowengine .rules .icon-loading-small {
+       display: inline-block;
+       margin-right: 5px;
+}
+
+.workflowengine .invalid-input {
+       border-color: var(--color-error);
+}
+