scinote-web/app/assets/stylesheets/reports.scss

656 lines
10 KiB
SCSS
Raw Normal View History

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
@import 'constants';
2016-02-12 23:52:43 +08:00
@import "mixins";
/* Index page */
.report-table {
margin-top: 20px;
2020-11-10 22:15:18 +08:00
.report-row.selected {
background: $color-alto;
}
2016-02-12 23:52:43 +08:00
}
/* New page navbar */
.navbar-report {
2018-05-12 00:02:17 +08:00
background: $color-white;
border-bottom: 1px solid $color-gainsboro;
border-left: 0;
border-right: 0;
2018-05-12 00:02:17 +08:00
margin-bottom: 15px;
2016-02-12 23:52:43 +08:00
min-width: 320px;
2018-05-12 00:02:17 +08:00
padding: 25px 20px;
position: sticky;
top: 50px;
z-index: 500;
2016-02-12 23:52:43 +08:00
div.row {
margin-right: 0;
}
#report-menu {
form {
display: inline-block;
}
.form-group {
margin-bottom: 0;
}
2016-02-12 23:52:43 +08:00
}
& > div.row {
margin-right: 0;
}
}
#sort-report {
display: inline-block;
}
#download-report {
2016-02-12 23:52:43 +08:00
display: inline-block;
}
// Modal for adding content
label {
&[for="_experiment_all"],
&[for="_module_all"],
&[for="_step_all"],
&[for="_result_all"] {
font-weight: bold;
}
}
2016-02-12 23:52:43 +08:00
/**
* Global fix for handsontable
*/
.hot-table-container {
.ht_master .wtHolder {
height: auto !important;
width: auto !important;
}
}
.report-common-table-format {
2020-07-13 20:29:59 +08:00
page-break-inside: avoid;
width: 100%;
tr {
text-align: left;
vertical-align: top;
td,
th {
border: 1px solid $color-silver;
padding: 5px;
span {
display: inline-block;
min-height: 19px;
}
&.htCenter {
text-align: center;
}
&.htRight {
text-align: right;
}
&.htJustify {
text-align: justify;
}
&.htMiddle {
vertical-align: middle;
}
&.htBottom {
vertical-align: bottom;
}
}
th {
background: $color-concrete;
}
}
}
2016-02-12 23:52:43 +08:00
/* New page content */
2018-05-12 00:02:17 +08:00
#report-new {
margin-top: -15px;
}
2016-02-12 23:52:43 +08:00
.report-body {
2018-05-12 00:02:17 +08:00
background: $color-silver;
2016-02-12 23:52:43 +08:00
}
.report-container {
2018-05-12 00:02:17 +08:00
background: $color-silver;
box-shadow: 0 0 2px 1px $color-silver;
2016-02-12 23:52:43 +08:00
overflow-x: auto;
overflow-y: auto;
2018-05-12 00:02:17 +08:00
padding: 30px;
padding-left: 0;
width: auto;
2016-02-12 23:52:43 +08:00
}
#report-content {
@include box-shadow(0 0 58px -10px $color-black);
2016-02-12 23:52:43 +08:00
background: $color-white;
color: $color-black;
2016-02-12 23:52:43 +08:00
margin-left: auto;
margin-right: auto;
2018-05-12 00:02:17 +08:00
margin-top: -15px;
max-width: 800px;
min-height: 1200px;
min-width: 230px;
2016-02-12 23:52:43 +08:00
padding: 45px;
}
@media (max-width: 720px) {
#report-content {
padding: 25px;
}
}
/** "New element" floating element */
.new-element {
display: block;
position: relative;
opacity: 0.05;
&.initial {
/** Special "visual" display of initial new element block */
opacity: 0.7;
padding: 15px;
border-radius: 5px;
2018-03-28 19:54:01 +08:00
border: 4px $brand-primary solid;
2016-02-12 23:52:43 +08:00
.plus-icon {
bottom: 16px !important;
}
}
.line {
display: block;
float: left;
width: 50%;
.filler-wrapper {
display: block;
.filler {
display: block;
height: 4px;
2018-03-28 19:54:01 +08:00
background-color: $brand-primary;
2016-02-12 23:52:43 +08:00
border-radius: 1px;
margin-top: 8px;
margin-bottom: 8px;
}
}
}
.left-line .filler-wrapper {
padding: 0 20px 0 0;
}
.right-line .filler-wrapper {
padding: 0 0 0 20px;
}
.plus-icon {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
display: block;
text-align: center;
width: 40px;
position: absolute;
bottom: 2px;
left: 50%;
margin: 0 0 0 -20px;
}
.clear {
clear: left;
}
}
.new-element:hover {
opacity: 1.0;
.filler {
2018-03-28 19:54:01 +08:00
background-color: $brand-primary;
2016-02-12 23:52:43 +08:00
.plus-icon span {
font-weight: bold;
}
}
}
/* GLOBAL REPORT ELEMENT STYLE */
.report-element {
width: 100%;
margin-bottom: 15px;
2022-05-31 20:40:25 +08:00
.user-time {
color: $color-silver-chalice;
white-space: nowrap;
2016-02-12 23:52:43 +08:00
}
.report-element-body {
padding-top: 10px;
.report-export-img {
max-height: 300px;
max-width: 300px;
}
2016-02-12 23:52:43 +08:00
}
.report-element-children {
padding-top: 15px;
}
&:hover {
background-color: $color-gainsboro;
@include box-shadow(0 0 2px 15px $color-gainsboro);
2016-02-12 23:52:43 +08:00
& > .report-element-header {
.controls {
opacity: 1.0;
}
}
}
}
/* Project header element style */
.report-project-header-element {
margin-bottom: 0;
2016-02-12 23:52:43 +08:00
.report-element-header {
border-bottom: none;
}
2016-02-12 23:52:43 +08:00
.report-element-body {
.project-name {
2022-06-24 20:34:00 +08:00
@include font-h1;
font-size: 18pt;
margin-top: 0;
2016-02-12 23:52:43 +08:00
}
}
&:hover > .report-element-body .project-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
2022-05-31 20:40:25 +08:00
// Experiment element style
.report-experiment-element {
.experiment-name {
font-size: 16pt;
2022-06-24 20:34:00 +08:00
font-weight: bold;
2022-05-31 20:40:25 +08:00
}
}
// Protocol element style
.report-module-protocol-element {
2022-06-24 20:34:00 +08:00
.protocol-name {
font-size: 12pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
}
}
2016-02-12 23:52:43 +08:00
/* Module element style */
.report-module-element {
2022-06-24 20:34:00 +08:00
@include font-button;
.results-title-name {
font-size: 12pt;
2022-06-24 20:34:00 +08:00
font-weight: bold;
}
2016-02-12 23:52:43 +08:00
.report-element-body {
.module-name {
font-size: 14pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2016-02-12 23:52:43 +08:00
}
.module-start-date,
.module-due-date {
2020-05-14 00:46:58 +08:00
white-space: nowrap;
}
2020-07-23 20:24:30 +08:00
.module-status {
.status-block {
border-radius: $border-radius-tag;
color: $color-white;
padding: 2px 4px;
}
}
2016-02-12 23:52:43 +08:00
.module-tags {
margin-left: 0;
margin-top: 10px;
.module-no-tag {
margin-left: 5px;
}
.module-tag {
margin-left: 5px;
border-radius: 4px;
padding: 2px 4px;
color: $color-white;
2020-07-13 20:29:59 +08:00
white-space: nowrap;
2016-02-12 23:52:43 +08:00
}
}
}
.module-protocol-description {
margin-left: 0;
margin-right: 0;
margin-top: 10px;
}
2016-02-12 23:52:43 +08:00
&:hover > .report-element-body .module-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
/* Result element style (generic) */
.report-result-element {
margin-bottom: 5px;
.report-element-header {
border-bottom: none;
2016-02-12 23:52:43 +08:00
.result-icon {
display: inline-block;
2016-02-12 23:52:43 +08:00
}
2016-02-12 23:52:43 +08:00
.result-name {
font-size: 12pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
overflow-wrap: break-word;
2016-02-12 23:52:43 +08:00
}
.user-time {
display: inline-block;
2020-05-14 00:46:58 +08:00
white-space: nowrap;
}
2016-02-12 23:52:43 +08:00
}
&:hover > .report-element-header {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
.report-element-body {
clear: left;
padding-top: 10px !important;
}
2016-02-12 23:52:43 +08:00
}
/* Result asset element style */
.report-result-asset-element {
.report-element-header {
.file-name {
font-size: 10pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2016-02-12 23:52:43 +08:00
}
.image-icon.report {
display: none;
}
2016-02-12 23:52:43 +08:00
}
2020-10-28 23:32:22 +08:00
2020-10-28 23:44:28 +08:00
img {
2022-06-24 20:34:00 +08:00
display: inline;
margin-top: 4em;
2020-10-28 23:44:28 +08:00
max-width: 100%;
2020-10-28 23:32:22 +08:00
}
2016-02-12 23:52:43 +08:00
}
2017-01-19 23:42:14 +08:00
// Result table element style
2016-02-12 23:52:43 +08:00
.report-result-table-element {
.report-element-header {
.table-name {
font-size: 10pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
}
}
2016-02-12 23:52:43 +08:00
.report-element-body {
padding-top: 15px;
2016-02-12 23:52:43 +08:00
}
}
/* Result text element style */
.report-result-text-element {
.report-element-body {
.text-container {
border-radius: 4px;
padding: 5px;
}
}
}
/** Step element style */
.report-step-element {
2022-05-31 20:40:25 +08:00
.step-name {
font-size: 11pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
}
2016-02-12 23:52:43 +08:00
&:hover > .report-element-body .step-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
2020-07-23 20:24:30 +08:00
.step-label-default {
@include font-h3;
color: $color-alto;
}
.step-label-success {
@include font-h3;
color: $brand-success;
}
2016-02-12 23:52:43 +08:00
}
/* Step attachment style (table, asset or checklist) */
.report-step-attachment-element {
.report-element-header {
border-bottom: none;
.attachment-icon {
color: $color-emperor;
}
}
2020-10-28 23:32:22 +08:00
2020-10-28 23:44:28 +08:00
img {
max-width: 100%;
2020-10-28 23:32:22 +08:00
}
2016-02-12 23:52:43 +08:00
.report-element-children {
height: 0;
}
&:hover > .report-element-header {
.attachment-icon {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
}
/** Step table element style */
.report-step-table-element {
.report-element-header {
.table-name {
font-size: 10pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2016-02-12 23:52:43 +08:00
}
}
&:hover > .report-element-header {
.table-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2022-05-31 20:40:25 +08:00
}
2016-02-12 23:52:43 +08:00
}
}
/** Step asset element style */
.report-step-asset-element {
.report-element-header {
.file-name {
font-size: 10pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2020-11-11 22:48:00 +08:00
white-space: nowrap;
2016-02-12 23:52:43 +08:00
}
.image-icon.report {
display: none;
}
2016-02-12 23:52:43 +08:00
}
&:hover > .report-element-header .file-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
/** Step checklist element style */
.report-step-checklist-element {
.report-element-header {
.checklist-name {
font-size: 10pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2016-02-12 23:52:43 +08:00
}
}
.report-element-body {
padding-top: 0;
}
&:hover > .report-element-header .checklist-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
/** Comments element style (generic) */
.report-comments-element {
2022-06-24 20:34:00 +08:00
.comment-message {
.view-mode {
font-size: 10pt;
2022-06-24 20:34:00 +08:00
}
}
2016-02-12 23:52:43 +08:00
.report-element-header {
border-bottom: none;
.comments-icon {
color: $color-emperor;
}
.comments-name {
color: $color-emperor;
font-size: 10pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2016-02-12 23:52:43 +08:00
}
}
.report-element-body {
.comments-container {
border-radius: 4px;
padding: 5px;
.comment {
margin: 3px 2px;
.comment-prefix {
color: $color-emperor;
}
}
}
}
&:hover > .report-element-header {
.comments-icon,.comments-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
}
2017-06-08 00:26:32 +08:00
// Module repository element
.report-module-repository-element {
margin-bottom: 0;
.report-element-header {
2017-06-08 00:26:32 +08:00
border-bottom: 0;
.repository-name {
font-size: 12pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
}
}
.report-element-body {
padding-top: 15px;
}
&:hover > .report-element-header {
2017-06-08 00:26:32 +08:00
.repository-icon,
.repository-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
}
}
}
2016-02-12 23:52:43 +08:00
/** Module activity element */
.report-module-activity-element {
margin-bottom: 0;
.report-element-header {
border-bottom: none;
.activity-name {
font-size: 12pt;
2022-05-31 20:40:25 +08:00
font-weight: bold;
2016-02-12 23:52:43 +08:00
}
}
.report-element-body {
.activity-container {
border-radius: 4px;
padding: 5px;
.activity {
margin: 3px 2px;
.activity-prefix {
color: $color-silver-chalice;
2016-02-12 23:52:43 +08:00
}
}
}
}
&:hover > .report-element-header {
.activity-icon,.activity-name {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
}
}
}
#save-PDF-to-inventory-warnings {
margin-top: 30px;
}
.save-PDF-to-inventory-alerts {
.danger {
color: $brand-danger;
}
}