Use SCSS nesting

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

diff --git a/apps/workflowengine/css/admin.scss b/apps/workflowengine/css/admin.scss
index 1896756a849a501f006e2bece3fba4d5d34b26be..523bb7f8ba62b8e7cbab516a34d8d47a6b6129a0 100644 (file)
--- 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;
+               }
+       }
+}