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 {
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;
}
}
}