_table.scss

_table.scss

$table-border: darken($gray-lighter, 10%);
$table-bg: mix($gray-lighter, $white);

.table {
  background-color: $table-bg;
  border-collapse: separate;

  tr > *:first-child {
    border-left: solid 1px $table-border;
  }

  tr > *:last-child {
    border-right: solid 1px $table-border;
  }

  tr:first-child > *:first-child { border-top-left-radius: 4px; }
  tr:first-child > *:last-child { border-top-right-radius:4px }
  tr:last-child > *:first-child { border-bottom-left-radius:4px }
  tr:last-child > *:last-child { border-bottom-right-radius:4px }

  tbody {
    tr {
      &:first-child {
        td {
          border-top: solid 1px $table-border;
        }
      }

      th {
        border-left: solid 1px $table-border;
        border-right: solid 1px $table-border;
        color: $gray;
      }
      td, th {
        border-top: none;
        border-bottom: solid 1px $table-border;
        line-height: 20px;
        font-size: 13px;
      }

      img.profile-image {
        margin: -2px 5px -2px -2px;
        vertical-align: top;
        width: 24px;
        height: 24px;
        border-radius: 4px;
      }

      .progress {
        margin-top: 2px;
      }
    }
  }

  .selectable {
    cursor: pointer;
    font-weight: bold;
    position: relative;

    &.active, &:hover {
      background-color: $secondary;
      color: $primary;
      text-decoration: none;
      border-color: darken($secondary, 10%) !important;

      td {
        background-color: inherit;
        color: inherit;
        border-color: inherit;
      }

      &:not(:first-child) {
        td {
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: darken($secondary, 10%) !important;
          }
        }
      }
    }
  }
}