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

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


// New experiments page

.projects-show {

  &.active {
    [data-view-mode="archived"] {
      display: none !important;
    }
  }

  .experiment-actions-menu {
    .dropdown-menu {
      a,
      button {
        @include font-button;
        padding: .5em 1em;

        .fas {
          margin-right: .4em;
        }
      }
    }
  }

  .content-header {
    .project-name {
      align-items: center;
      display: flex;
      max-width: calc(100% - 7em);

      .inline-editing-container {
        width: calc(100% - 3em);
      }

      .fas {
        margin-right: .5em;
      }
    }

    .archive-experiments-form,
    .restore-experiments-form {
      display: inline-block;
    }
  }

  .project-show-container {
    margin: 1.5em 0;

    .cards-wrapper {
      --card-min-width: 350px;
      --list-columns-number: 7;

      .card {
        grid-row: span 6;


        &.experiment-card {
          border-radius: 4px;
          box-shadow: $flyout-shadow;

          .workflow-img-container {
            background-color: $color-concrete;
            border-radius: 4px;
            height: 76px;
            width: 76px;
          }

          .experiment-name-cell {
            @include font-h3;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            height: 3em;
            -webkit-line-clamp: 2;
            margin: .25em 1.75em;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;

            a {
              color: inherit;
            }
          }

          .actions {
            position: absolute;
            right: .2em;
            top: .2em;
          }

          .dates-and-img-container {
            display: flex;
            height: 6em;
            width: 100%;

            .dates-container {
              flex-grow: 1;
            }
          }

          .data-row {
            display: flex;
            line-height: 2.25em;

            .card-label {
              width: 7em;
            }

            .card-value {
              font-weight: 600;
            }
          }

          .progress {
            height: 4px;
            margin-bottom: 0;
            width: 100%;

            .progress-bar {
              min-width: 0 !important;
            }
          }

          .completed-task-cell {
            width: 100%;
          }

          .description-cell {
            .description-text {
              -webkit-box-orient: vertical;
              display: -webkit-box;
              height: 3em;
              -webkit-line-clamp: 2;
              overflow: hidden;
              padding-top: .25em;

              &::after {
                background: linear-gradient(to right, transparent, $color-white 50%);
                bottom: .75em;
                content: "";
                height: 1.75em;
                position: absolute;
                right: 0;
                text-align: right;
                width: 25%;
              }
            }

            .more-button {
              bottom: 1.1em;
              position: absolute;
              right: 1em;
            }
          }
        }
      }

      &.list {
        grid-auto-rows: 1px 5em;
        grid-template-columns: max-content repeat(calc(var(--list-columns-number) - 2), minmax(100px, auto)) max-content;
        grid-template-rows: 3em;

        .card {
          &.experiment-card {

            .card-value {
              font-weight: normal;
              line-height: 2em;
            }

            .workflow-img-container {
              height: 3.5em;
              margin: .25em 1em .25em 0;
              width: 3.5em;
            }

            .dates-and-img-container,
            .dates-container {
              display: contents;
            }

            .checkbox-cell {
              align-items: normal;
              padding-top: .5em;
            }

            .experiment-name-cell {
              @include font-button;
              color: $brand-primary;
              display: flex;
              font-weight: normal;
              grid-column: 2;
              height: 100%;
              margin: 0;
              padding: .25em 0;
            }

            .start-date-cell {
              grid-column: 3;
            }

            .modified-date-cell {
              grid-column: 4;
            }

            .completed-task-cell {
              grid-column: 5;
            }

            .description-cell {
              grid-column: 6;
              position: relative;

              .description-text::after {
                bottom: 1.5em;
                right: .5em;
              }

              .more-button {
                bottom: 1.9em;
              }
            }

            .actions-cell {
              grid-column: 7;
              position: initial;
            }
          }

          &:hover {
            .description-text::after {
              background: linear-gradient(to right, transparent, $color-concrete 50%);
            }
          }
        }
      }
    }
  }

  &.archived {
    [data-view-mode="active"] {
      display: none !important;
    }

    .project-show-container {
      .cards-wrapper {
        .card.experiment-card {
          grid-row: span 7;

          .dates-and-img-container {
            height: 9em;
          }

          .description-cell {
            .description-text::after {
              background: linear-gradient(to right, transparent, $color-concrete 50%);
            }
          }
        }

        &.list {
          --list-columns-number: 8;

          .card.experiment-card {
            .archived-date-cell {
              grid-column: 5;
            }

            .completed-task-cell {
              grid-column: 6;
            }

            .description-cell {
              grid-column: 7;
            }

            .actions-cell {
              grid-column: 8;
            }

            &:hover {
              .description-text::after {
                background: linear-gradient(to right, transparent, $color-alto 50%);
              }
            }
          }
        }
      }
    }
  }
}