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

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth

@font-face {
  font-family: "SN-icon-font";
  src: url(data:font/woff2;base64,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
}

/* Index page */
.report-table {
  margin-top: 20px;

  .report-row.selected {
    background: $color-alto;
  }
}

/* New page navbar */
.navbar-report {
  background: $color-white;
  border-bottom: 1px solid $color-gainsboro;
  border-left: 0;
  border-right: 0;
  margin-bottom: 15px;
  min-width: 320px;
  padding: 25px 20px;
  position: sticky;
  top: 50px;
  z-index: 500;

  div.row {
    margin-right: 0;
  }

  #report-menu {
    form {
      display: inline-block;
    }

    .form-group {
      margin-bottom: 0;
    }
  }

  & > div.row {
    margin-right: 0;
  }
}

#sort-report {
  display: inline-block;
}

#download-report {
  display: inline-block;
}

// Modal for adding content
label {
  &[for="_experiment_all"],
  &[for="_module_all"],
  &[for="_step_all"],
  &[for="_result_all"] {
    font-weight: bold;
  }
}


/**
 * Global fix for handsontable
 */
.hot-table-container {
  display: flex;
  overflow: auto;
  .ht_master .wtHolder {
    height: auto !important;
    width: auto !important;
  }
}

.report-common-table-format {
  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;
    }
  }
}


/* New page content */
#report-new {
  margin-top: -15px;
}

.report-body {
  background: $color-silver;
}

.report-container {
  background: $color-silver;
  box-shadow: 0 0 2px 1px $color-silver;
  overflow-x: auto;
  overflow-y: auto;
  padding: 30px;
  padding-left: 0;
  width: auto;
}

#report-content {
  @include box-shadow(0 0 58px -10px $color-black);
  background: $color-white;
  color: $color-black;
  margin-left: auto;
  margin-right: auto;
  margin-top: -15px;
  max-width: 800px;
  min-height: 1200px;
  min-width: 230px;
  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;
    border: 4px $brand-primary solid;

    .plus-icon {
      bottom: 16px !important;
    }
  }

  .line {
    display: block;
    float: left;
    width: 50%;

    .filler-wrapper {
      display: block;

      .filler {
        display: block;
        height: 4px;
        background-color: $brand-primary;
        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 {
    color: $brand-primary;
    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 {
    background-color: $brand-primary;

    .plus-icon span {
      font-weight: bold;
    }
  }
}

/* GLOBAL REPORT ELEMENT STYLE */
.report-element {
  width: 100%;
  margin-bottom: 15px;


  .user-time {
    color: $color-silver-chalice;
    white-space: nowrap;
  }

  .report-element-body {
    padding-top: 10px;

    .report-export-img {
      max-height: 300px;
      max-width: 300px;
    }
  }

  .report-element-children {
    padding-top: 15px;
  }

  &:hover {
    background-color: $color-gainsboro;
    @include box-shadow(0 0 2px 15px $color-gainsboro);

    & > .report-element-header {

      .controls {
        opacity: 1.0;
      }
    }
  }
}

/* Project header element style */
.report-project-header-element {
  margin-bottom: 0;

  .report-element-header {
    border-bottom: none;
  }

  .report-element-body {
    .project-name {
      @include font-h1;
      font-size: 18pt;
      margin-top: 0;
    }
  }

  &:hover > .report-element-body .project-name {
    color: $brand-primary;
  }
}

// Experiment element style
.report-experiment-element {
  .experiment-name {
    font-size: 16pt;
    font-weight: bold;
  }
}

// Protocol element style
.report-module-protocol-element {
  .protocol-name {
    font-size: 12pt;
    font-weight: bold;
  }
}

/* Module element style */
.report-module-element {
  @include font-button;

  .results-title-name {
    font-size: 12pt;
    font-weight: bold;
  }

  .report-element-body {
    .module-name {
      font-size: 14pt;
      font-weight: bold;
    }

    .module-start-date,
    .module-due-date {
      white-space: nowrap;
    }

    .module-status {
      .status-block {
        border-radius: $border-radius-tag;
        color: $color-white;
        padding: 2px 4px;
      }
    }

    .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;
        white-space: nowrap;
      }
    }
  }

  .module-protocol-description {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
  }

  &:hover > .report-element-body .module-name {
    color: $brand-primary;
  }
}

/* Result element style (generic) */
.report-result-element {
  margin-bottom: 5px;

  .report-element-header {
    border-bottom: none;

    .result-icon {
      display: inline-block;
    }

    .result-name {
      font-size: 12pt;
      font-weight: bold;
      overflow-wrap: break-word;
    }

    .user-time {
      display: inline-block;
      white-space: nowrap;
    }
  }

  &:hover > .report-element-header {
    color: $brand-primary;
  }

  .report-element-body {
    clear: left;
    padding-top: 10px !important;
  }
}

/* Result asset element style */
.report-result-asset-element {
  .report-element-header {
    .file-name {
      font-size: 10pt;
      font-weight: bold;
    }

    .image-icon.report {
      display: none;
    }
  }

  img {
    display: inline;
    margin-top: 4em;
    max-width: 100%;
  }
}

// Result table element style
.report-result-table-element {
  .report-element-header {
    .table-name {
      font-size: 10pt;
      font-weight: bold;
    }
  }

  .report-element-body {
    padding-top: 15px;
  }
}

// Text element style
.report-step-text-element,
.report-result-text-element {
  .report-element-header {
    .text-name {
      font-size: 10pt;
      font-weight: bold;
    }
  }

  .report-element-body {
    .text-container {
      border-radius: 4px;
      padding: 5px;
    }
  }
}

/** Step element style  */
.report-step-element {
  .step-name {
    font-size: 11pt;
    font-weight: bold;
  }

  &:hover > .report-element-body .step-name {
    color: $brand-primary;
  }

  .step-label-default {
    @include font-h3;
    color: $color-alto;
  }

  .step-label-success {
    @include font-h3;
    color: $brand-success;
  }
}

/* Step attachment style (table, asset or checklist) */
.report-step-attachment-element {
  .report-element-header {
    border-bottom: none;

    .step-name {
      font-size: 10pt;
      font-weight: bold;
    }

    .attachment-icon {
      color: $color-emperor;
    }
  }


  img {
    max-width: 100%;
  }

  .report-element-children {
    height: 0;
  }

  &:hover > .report-element-header {
    .attachment-icon {
      color: $brand-primary;
    }
  }
}

/** Step table element style */
.report-step-table-element {
  .report-element-header {
    .table-name {
      font-size: 10pt;
      font-weight: bold;
    }
  }

  &:hover > .report-element-header {
    .table-name {
      color: $brand-primary;

    }
  }
}

/** Step asset element style */
.report-step-asset-element {
  .report-element-header {
    .file-name {
      font-size: 10pt;
      font-weight: bold;
      white-space: nowrap;
    }

    .image-icon.report {
      display: none;
    }
  }

  &:hover > .report-element-header .file-name {
    color: $brand-primary;
  }
}

/** Step checklist element style */
.report-step-checklist-element {
  .report-element-header {
    .checklist-name {
      font-size: 10pt;
      font-weight: bold;
    }
  }

  .report-element-body {
    padding-top: 0;
  }

  .report-checklist-item {
    -webkit-box-pack: start; // for wkhtmltopdf compatibility
    display: -webkit-box; // for wkhtmltopdf compatibility
    display: flex;
    justify-content: start;
    margin-top: .5em;

    div:nth-child(2) {
      margin-top: .2em;
    }

    > div {
      margin-left: .7em;
      white-space: pre-wrap;
    }
  }

  &:hover > .report-element-header .checklist-name {
    color: $brand-primary;
  }
}

/** Comments element style (generic) */
.report-comments-element {
  .comment-message {
    .view-mode {
      font-size: 10pt;
    }
  }

  .report-element-header {
    border-bottom: none;

    .comments-icon {
      color: $color-emperor;
    }

    .comments-name {
      color: $color-emperor;
      font-size: 10pt;
      font-weight: bold;
    }
  }

  .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 {
      color: $brand-primary;
    }
  }
}

// Module repository element
.report-module-repository-element {
  margin-bottom: 0;

  .report-element-header {
    border-bottom: 0;

    .repository-name {
      font-size: 12pt;
      font-weight: bold;
    }
  }

  .report-element-body {
    padding-top: 15px;
  }

  &:hover > .report-element-header {
    .repository-icon,
    .repository-name {
      color: $brand-primary;
    }
  }
}

/** Module activity element */
.report-module-activity-element {
  margin-bottom: 0;

  .report-element-header {
    border-bottom: none;

    .activity-name {
      font-size: 12pt;
      font-weight: bold;
    }
  }

  .report-element-body {
    .activity-container {
      border-radius: 4px;
      padding: 5px;

       .activity {
        margin: 3px 2px;

        .activity-prefix {
          color: $color-silver-chalice;
        }
      }
    }
  }

  &:hover > .report-element-header {
    .activity-icon,.activity-name {
      color: $brand-primary;
    }
  }
}

#save-PDF-to-inventory-warnings {
  margin-top: 30px;
}

.save-PDF-to-inventory-alerts {
  .danger {
    color: $brand-danger;
  }
}