Use SCSS nesting

Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling 2019-07-10 11:32:19 +02:00
parent 80bd7cbabc
commit 89ca22b170
No known key found for this signature in database
GPG Key ID: 7076EA9751AACDDA
1 changed files with 79 additions and 68 deletions

View File

@ -1,75 +1,86 @@
.workflowengine .operation { .workflowengine {
padding: 5px; .pull-right {
padding-bottom: 20px; float: right
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 { .invalid-input {
float: right border-color: var(--color-error);
} }
.workflowengine .operation .msg { .operation {
border-radius: 3px; padding: 5px 5px 20px;
margin: 3px 3px 3px 0; margin-bottom: 20px;
padding: 5px; border-bottom: var(--color-border) 1px solid;
transition: opacity .5s; border-left: rgba(0, 0, 0, 0) 2px solid;
}
.workflowengine .operation .check:hover { &.modified {
background-color: var(--color-background-dark); border-left: var(--color-warning) 2px solid;
} }
.workflowengine .operation-header .operation-name { button {
align-self: flex-start; margin-bottom: 0;
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 { span.info {
display: inline-block; padding: 7px;
margin-right: 5px; color: var(--color-border);
} }
.workflowengine .invalid-input { .msg {
border-color: var(--color-error); 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;
}
}
}