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;
    }
  }

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

  .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;
        }
      }

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

        .card {
          &.experiment-card {
            .experiment-name-cell {
              grid-column: 2;
            }

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

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

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

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

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