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

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

/* 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%;
  max-width: 270mm;
  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;
  }
}