frontend/source/sass/components/_exceltables.scss

Summary

Maintainability
Test Coverage
// In places where we want to demonstrate the form an Excel sheet must be in
// to be successfully uploaded, we style the tables like Excel sheets.
// This helps communicate what the tool requires to users.

@import '../base/variables';

.excel-wrapper {
  overflow: scroll;
  font-size: $small-font-size;
  margin-bottom: 2.5rem;
}

table.excel {
  // Note that we are specifically styling this to look like a vanilla
  // Excel table; hence our explicit use of Arial instead of one of our
  // SASS font-family variables.
  font-family: Arial, Helvetica, serif;

  width: auto;
  margin: 0;

  tbody tr {
    &:hover > * {
      background: unset !important;
    }

    &:nth-child(odd) {
      background: unset;
    }
  }

  td {
    min-width: 10em;
    padding: 2px;
    border: 1px solid lightgray;
  }
}

table.excel.excel-schedule-70 {
  tr:first-child {
    background: lightgray;

    td {
      vertical-align: bottom;
    }
  }

  tr:not(:first-child) td:not(:first-child) {
    font-style: italic;
  }

  td {
    border-color: black;
    text-align: center;
  }
}