MetaPhase-Consulting/State-TalentMAP

View on GitHub
src/sass/_table.scss

Summary

Maintainability
Test Coverage
$tm-table-blue: $primary-blue-darkest;

.tm-table {
  $border-radius: 9px;

  border-collapse: separate;
  border-spacing: 15px 0;
  color: $primary-base;
  margin-top: 2em;
  table-layout: fixed;
  width: 100%;

  .bid-count-container {
    float: left;
    font-size: .8em;
  }

  .column-title-main {
    color: $color-black;
    float: left;
    font-size: 1.1em;
    font-weight: bold;
    width: 90%;
  }

  .close-button-container {
    float: left;
    width: 10%;

    .fa {
      float: right;
      font-size: .8em;
      position: relative;
      right: -7px;
      top: -6px;
    }
  }

  .column-title-sub,
  .column-title-link {
    margin-top: .2em;
  }

  .column-title-link {
    font-size: 1.6rem;

    a {
      color: $color-black;
    }
  }

  .empty {
    color: $color-gray;
  }

  .favorite-container {
    float: left;
    width: 100%;

    .fa {
      margin-right: 5px;
    }
  }

  th,
  td {
    border: 0;
    vertical-align: top;
    word-wrap: break-word;
  }

  thead {
    th {
      background: inherit;
      font-size: 1.9rem;
      font-weight: 500;
      line-height: 1.6;
      padding-bottom: 2.5rem;
      padding-top: 2.5rem;
      position: relative;
    }

    th:first-of-type {
      padding-top: 2.4rem;
      vertical-align: top;
    }
  }

  tbody {
    position: relative;

    tr:nth-of-type(1),
    tr:nth-of-type(2),
    tr:last-of-type {
      th:first-of-type {
        visibility: hidden;
      }
    }

    tr:nth-of-type(2) {
      th,
      td {
        padding-bottom: 5px;
        padding-top: 0;
      }
    }

    tr:nth-of-type(1) {
      th,
      td {
        padding-bottom: 0;
      }
    }

    tr:nth-last-child(2) {
      th,
      td {
        padding-bottom: 0;
      }
    }

    tr:nth-last-child(1) {
      th,
      td {
        padding-top: 0;
      }
    }

    $empty-border: 1px dashed $color-gray-light;

    tr:first-of-type {
      td {
        border-top: 10px solid $primary-blue;
      }

      .empty {
        border-top: $empty-border;
      }
    }

    th:first-of-type {
      position: relative;
    }

    th {
      background-color: $color-white;
      padding-bottom: 1em;
      padding-right: 1em;
      width: 18%;
    }

    $td-border: 1px solid $color-gray-light;

    td {
      border-left: $td-border;
      border-right: $td-border;
    }

    .empty {
      border-left: $empty-border;
      border-right: $empty-border;
    }

    tr:last-of-type {
      td {
        border-bottom: $td-border;
      }

      .empty {
        border-bottom: $empty-border;
      }
    }
  }
}

.tm-header-no-columns {
  tr:first-child {
    th {
      padding: 1em;
    }
  }
}