scinote-web/app/assets/stylesheets/my_modules/protocols/index.scss

556 lines
9.2 KiB
SCSS
Raw Normal View History

2019-04-26 21:38:33 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorFormat
// scss-lint:disable ImportantRule
2019-02-25 20:04:58 +08:00
@import "constants";
@import "mixins";
2020-03-31 17:22:53 +08:00
.content-pane.my-modules-protocols-index {
padding: 10px;
}
2020-07-13 20:51:51 +08:00
.content-pane.protocols-repository-edit-view {
margin: 0;
}
.task-section {
border-left: 3px solid $color-concrete;
margin: 16px 0;
padding-left: 16px;
.task-section-caret {
color: $color-volcano;
display: inline-block;
text-decoration: none;
.fas {
margin-right: 5px;
}
&:not(.collapsed) .fas {
@include rotate(90deg);
}
}
.task-section-title {
display: inline-block;
h2 {
2020-04-17 01:13:18 +08:00
margin: 10px 0;
2020-05-08 23:01:55 +08:00
&.assigned-items-title {
&::after {
@include font-h3;
color: $color-alto;
content: '[' attr(data-assigned-items-count) ']';
display: inline;
line-height: 22px;
padding-left: 5px;
}
}
}
}
2020-04-09 21:14:55 +08:00
.task-section-header {
2020-04-17 01:13:18 +08:00
align-items: center;
2020-04-09 21:14:55 +08:00
display: flex;
flex-wrap: wrap;
.actions-block {
display: flex;
flex-grow: 1;
justify-content: flex-end;
2020-04-23 22:50:16 +08:00
.caret {
margin-left: 25px;
}
2020-04-09 21:14:55 +08:00
.repositories-assign-container {
flex-grow: 1;
max-width: 200px;
.btn {
text-align: left;
.caret {
margin: 8px 0;
}
}
.repositories-dropdown-menu {
.repository {
@include font-button;
cursor: pointer;
2020-04-09 21:14:55 +08:00
display: flex;
padding: 8px 16px;
.assigned-items,
.shared-icon {
flex-shrink: 0;
.fas {
padding-right: 5px;
}
}
.assigned-items {
color: $color-alto;
}
.name {
flex-grow: 1;
}
}
}
}
2020-04-21 16:03:53 +08:00
.dropdown-menu {
2020-04-23 22:56:09 +08:00
@include font-button;
2020-04-23 22:50:16 +08:00
2020-04-21 16:03:53 +08:00
a {
padding: 8px 20px;
}
.fas {
padding-right: 5px;
}
}
2020-04-24 17:50:03 +08:00
2020-05-13 16:58:40 +08:00
.dropdown {
margin-right: 5px;
2020-04-24 17:50:03 +08:00
}
2020-04-09 21:14:55 +08:00
}
}
}
2020-04-01 19:05:35 +08:00
.complete-button-container {
display: inline;
float: right;
width: 260px;
.my_module-state-buttons {
padding-top: 0;
}
}
.task-details {
2019-11-21 19:14:43 +08:00
.fas.block-icon {
2020-04-01 19:05:35 +08:00
margin-right: 8px;
2019-11-21 19:14:43 +08:00
}
2020-04-01 19:05:35 +08:00
.flex-block {
align-items: center;
display: flex;
line-height: 34px;
2020-04-01 19:05:35 +08:00
.flex-block-label {
2019-11-21 19:14:43 +08:00
align-items: center;
display: flex;
2020-04-01 19:05:35 +08:00
margin-right: 4px;
2019-11-21 19:14:43 +08:00
}
2020-04-01 19:05:35 +08:00
}
2019-11-21 19:14:43 +08:00
.empty-label {
color: $color-silver-chalice;
font-weight: normal;
}
2020-04-01 19:05:35 +08:00
.datetime-container {
align-items: center;
display: inline-flex;
2019-11-21 19:14:43 +08:00
2020-04-01 19:05:35 +08:00
.date-text {
border: 1px solid transparent;
font-weight: bold;
line-height: 32px;
margin-right: 25px;
padding: 0 4px;
position: relative;
2019-11-21 19:14:43 +08:00
2020-04-01 19:05:35 +08:00
.alert-green {
color: $brand-success;
}
2019-11-21 19:14:43 +08:00
2020-04-01 19:05:35 +08:00
.alert-yellow {
color: $brand-warning;
}
2020-04-01 19:05:35 +08:00
.alert-red {
color: $brand-danger;
2019-11-21 19:14:43 +08:00
}
2020-04-01 19:05:35 +08:00
.clear-date {
color: $color-silver;
cursor: pointer;
display: none;
font-size: 20px;
left: 100%;
line-height: 34px;
margin-left: 5px;
2019-11-21 19:14:43 +08:00
position: absolute;
top: 0;
2020-04-01 19:05:35 +08:00
}
}
2020-03-28 00:35:24 +08:00
2020-04-01 19:05:35 +08:00
.datetime-picker-container {
color: $color-emperor;
left: 0;
position: absolute;
top: 0;
width: 100%;
2019-11-27 19:34:54 +08:00
2020-04-01 19:05:35 +08:00
#calendarDueDate {
opacity: 0;
2019-11-21 19:14:43 +08:00
}
2020-04-01 19:05:35 +08:00
#calendarStartDate {
opacity: 0;
}
2020-04-01 19:05:35 +08:00
.fa-calendar-alt {
display: none;
2019-07-09 20:00:53 +08:00
}
2019-02-25 20:04:58 +08:00
}
2020-04-01 19:05:35 +08:00
&:hover {
.date-text[data-editable=true] {
2020-05-21 14:37:40 +08:00
background-color: $color-concrete;
border-radius: 4px;
2019-02-25 20:04:58 +08:00
2020-04-01 19:05:35 +08:00
.clear-date {
display: inline;
}
}
2019-02-25 20:04:58 +08:00
}
}
.module-tags {
#module-tags {
2019-11-21 19:14:43 +08:00
align-items: center;
display: flex;
width: 100%;
}
2019-10-18 17:31:13 +08:00
.dropdown-selector-container {
.my-module-white-tags {
color: $color-white;
}
.my-module-tags-color {
border-radius: 8px;
display: inline-block;
height: 16px;
margin-right: 5px;
width: 16px;
}
.my-module-tags-create-new {
opacity: .6;
}
.input-field {
border: 1px solid transparent;
padding-right: 110px;
}
&.open {
2019-10-18 17:36:56 +08:00
.input-field {
border: 1px solid $color-alto;
2019-10-18 17:31:13 +08:00
}
}
2019-11-27 19:34:54 +08:00
&:not(.view-mode):hover {
2019-10-18 17:31:13 +08:00
.input-field {
border: 1px solid $color-alto;
2019-10-18 17:31:13 +08:00
}
}
}
.badge-icon {
display: inline-block;
line-height: 32px;
padding: 0 5px 0 0;
2019-05-14 15:43:02 +08:00
width: 28px;
}
.tags-title {
display: inline-block;
2019-05-14 15:43:02 +08:00
font-size: 14px;
line-height: 32px;
margin-right: 4px;
}
.select-container {
display: flex;
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 1;
2020-05-13 16:58:40 +08:00
max-width: 100%;
position: relative;
2019-10-18 17:31:13 +08:00
z-index: 110;
select {
display: none;
}
.edit-button-container {
2019-10-18 17:31:13 +08:00
height: 36px;
padding-right: 10px;
position: absolute;
right: 0;
text-align: right;
top: 0;
width: 120px;
2019-10-18 17:31:13 +08:00
z-index: 20;
&.hidden {
display: none;
}
a {
color: inherit;
display: inline-block;
2019-10-18 17:31:13 +08:00
line-height: 36px;
opacity: .7;
text-decoration: none;
i {
float: left;
2019-04-26 21:38:33 +08:00
font-size: 16px;
2019-10-18 17:31:13 +08:00
line-height: 36px;
margin-right: 5px;
2019-04-26 21:38:33 +08:00
padding-top: 1px;
}
span {
float: left;
2019-10-18 17:31:13 +08:00
line-height: 36px;
}
}
}
}
}
2020-04-01 19:05:35 +08:00
#manage-module-tags-modal {
.well {
border: 0;
box-shadow: none;
}
}
.task-assigned-users {
align-items: center;
2020-05-21 14:37:40 +08:00
border-radius: 17px;
display: flex;
2020-05-21 14:37:40 +08:00
&.empty {
border-radius: 4px;
padding: 0 4px;
}
&:hover {
2020-05-21 14:37:40 +08:00
background-color: $color-concrete;
text-decoration: none;
}
}
.assign-new-user {
2020-05-21 14:37:40 +08:00
background-color: $color-alto;
color: $color-volcano;
text-align: center;
.fa-plus {
font-size: 16px;
}
}
2019-02-25 20:04:58 +08:00
}
2019-04-26 21:38:33 +08:00
.task-notes {
display: inline-block;
position: relative;
width: 100%;
.no-description {
font-size: 16px;
}
.task-notes-content {
margin-left: 10px;
}
}
2020-04-17 01:13:18 +08:00
.my-module-protocol-status {
position: relative;
2020-04-17 01:13:18 +08:00
.status-label {
@include font-h3;
color: $color-alto;
float: left;
margin: 0 3px;
2020-04-17 01:13:18 +08:00
&.linked {
color: $brand-primary;
}
}
2020-04-17 01:13:18 +08:00
.status-info {
@include font-h2;
color: inherit;
text-decoration: none;
&:hover,
&:active {
color: inherit;
text-decoration: none;
}
2020-05-02 02:45:09 +08:00
&.protocol-newer {
2020-05-06 18:20:20 +08:00
color: $brand-focus;
2020-05-02 02:45:09 +08:00
}
&.parent-newer {
color: $brand-warning;
}
}
2020-04-17 01:13:18 +08:00
.status-info-dropdown {
left: -125px;
max-width: 100vw;
width: 650px;
.dropdown-body {
border-bottom: $border-tertiary;
padding: 10px 32px;
.info-line {
align-items: center;
display: flex;
flex-wrap: wrap;
margin: 9px 0;
.description {
@include font-button;
flex-grow: 1;
min-width: 120px;
}
.value {
@include font-h3;
flex-shrink: 0;
}
2020-04-17 01:13:18 +08:00
&.new-parent-version {
.value {
color: $brand-warning;
2020-04-17 01:13:18 +08:00
&::before {
@include font-awesome;
content: "\f2f1";
margin-right: 5px;
}
}
}
}
2020-04-17 01:13:18 +08:00
.notification-line {
@include font-button;
color: $color-silver-chalice;
display: flex;
margin: 8px 0;
.fas {
line-height: 21px;
margin-right: 3px;
}
&.new-parent-version {
color: $brand-warning;
}
2020-04-17 01:13:18 +08:00
&.new-protocol-version {
color: $brand-focus;
}
}
2020-04-17 01:13:18 +08:00
}
2020-04-17 01:13:18 +08:00
.dropdown-footer {
padding: 16px;
}
}
}
.task-details-dropdown-container {
.task-details-button {
@include font-h2;
cursor: pointer;
margin: 0 3px;
}
.dropdown-menu {
2020-05-19 16:29:07 +08:00
@include font-button;
min-width: 500px;
padding: 1em 2em;
2020-05-19 16:29:07 +08:00
.task-details-value {
@include font-h3;
}
.row-v-margin {
margin-bottom: .5em;
2020-05-19 16:29:07 +08:00
margin-top: .5em;
}
}
}
2020-07-14 17:24:33 +08:00
.task-information {
column-gap: 1em;
display: grid;
2020-09-02 21:41:07 +08:00
grid-template-columns: auto minmax(max-content, 18em);
2020-07-14 17:24:33 +08:00
.task-section-header {
grid-column: 1 / span 1;
}
.task-details {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.task-flows {
grid-column: 2 / span 1;
grid-row: 1 / span 2;
}
}
2020-04-17 01:13:18 +08:00
@media (max-width: 700px) {
.my-module-protocol-status {
.status-info-dropdown {
left: -75px;
width: 300px;
.dropdown-footer {
.btn {
float: left !important;
margin: 5px 0;
width: auto;
}
}
}
}
2020-07-14 17:24:33 +08:00
.task-information {
grid-template-columns: auto;
row-gap: .5em;
.task-details {
grid-row: 3 / span 1;
}
.task-flows {
grid-column: unset;
grid-row: 2 / span 1;
}
}
}