mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-03-06 20:56:42 +08:00
Add back status_flow.scss, deleted by accident
This commit is contained in:
Martin Artnik
parent
dc535bce52
commit
cb023cd9c8
1 changed files with 248 additions and 0 deletions
248
app/assets/stylesheets/my_modules/status_flow.scss
Normal file
248
app/assets/stylesheets/my_modules/status_flow.scss
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
// scss-lint:disable SelectorFormat
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
.task-sharing-and-flows {
|
||||
#dropdownTaskFlowList {
|
||||
min-width: 230px;
|
||||
}
|
||||
|
||||
.status-flow-dropdown {
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-buttons {
|
||||
display: flex;
|
||||
|
||||
&.status-light {
|
||||
@include not-started;
|
||||
}
|
||||
|
||||
> :not(:first-child):not(.dropdown-menu) {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.status-flow-dropdown[data-status-changing=true] {
|
||||
.caret.pull-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> div > .btn {
|
||||
min-width: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-transition-error {
|
||||
@include font-small;
|
||||
color: $brand-danger;
|
||||
margin-top: .5em;
|
||||
|
||||
.fas {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
@include font-button;
|
||||
flex-basis: 50%;
|
||||
margin-right: .5em;
|
||||
text-align: right;
|
||||
|
||||
.status-title {
|
||||
@include font-small;
|
||||
color: var(--sn-grey);
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
.status-note {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-flow-dropdown {
|
||||
.dropdown-toggle {
|
||||
color: $color-white;
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&.btn-not-started {
|
||||
border: 1px solid var(--sn-sleepy-grey);
|
||||
color: var(--sn-black);
|
||||
}
|
||||
|
||||
.caret {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-light {
|
||||
@include not-started;
|
||||
}
|
||||
|
||||
&.open .dropdown-menu{
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, auto) 12px minmax(0, auto);
|
||||
min-width: 230px;
|
||||
padding: .5em 0 0;
|
||||
|
||||
li {
|
||||
display: contents;
|
||||
|
||||
> * {
|
||||
cursor: pointer;
|
||||
line-height: 2em;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
&:hover > *{
|
||||
background: $color-concrete;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
||||
.status-name {
|
||||
background: $color-alto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa-long-arrow-alt-right {
|
||||
color: $color-silver-chalice;
|
||||
padding: 1.5em 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.status-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
border-radius: $border-radius-tag;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: .5em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-not-started {
|
||||
border: 1px solid var(--sn-sleepy-grey);
|
||||
color: var(--sn-black);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
@include font-small;
|
||||
color: $color-silver-chalice;
|
||||
grid-column: span 3;
|
||||
line-height: 1em;
|
||||
padding: 0em 1em .5em;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.permission-error {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#viewTaskFlow {
|
||||
border-top: $border-default;
|
||||
cursor: pointer;
|
||||
display: list-item;
|
||||
grid-column: span 3;
|
||||
line-height: 2em;
|
||||
margin-top: .5em;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#statusFlowModal {
|
||||
.status-flow {
|
||||
padding: 2em;
|
||||
|
||||
.status-container {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content 1fr;
|
||||
grid-template-rows: 28px;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
|
||||
.current-status {
|
||||
@include font-small;
|
||||
justify-self: end;
|
||||
|
||||
.fas {
|
||||
margin: 0 .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.status-block {
|
||||
@include font-button;
|
||||
border-radius: $border-radius-tag;
|
||||
color: $color-white;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
padding: .5em;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-light {
|
||||
@include not-started;
|
||||
}
|
||||
}
|
||||
|
||||
.status-comment {
|
||||
@include font-small;
|
||||
color: $color-silver-chalice;
|
||||
padding-left: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.connector {
|
||||
background: $color-black;
|
||||
height: 2em;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 2px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
border-left: .2em solid transparent;
|
||||
border-right: .2em solid transparent;
|
||||
content: '';
|
||||
display: block;
|
||||
margin-left: -.1em;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-top: .2em solid $color-black;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-bottom: .2em solid $color-black;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue