mahaplatform/reframe

@table_header_background_color: #FFFFFF;
@table_body_background_color: #FFFFFF;
@table_border_color: #DDDDDD;
@table_body_font_color: #888888;

.reframe-table {
  background-color: @white;
  table {
    width: 100%;
  }
  .reframe-table-pinned {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
  .fa-chevron,
  .fa-circle-o,
  .fa-check-circle {
    font-size: 1.2em;
    line-height: 1em;
  }
  .fa-circle-o {
    color: fadeout(@black, 90);
  }
  .fa-check-circle {
    color: @blue;
  }
  .reframe-table-check-cell {
    padding: 0.8em;
    text-align: center;
    width: 1px;
  }
  thead {
    background-color: @white;
    tr {
      background-color: lighten(@black, 90);
    }
    tr td {
      .hover(background-color, fadeout(@black, 95));
      font-weight: bold;
      position: relative;
      cursor: pointer;
      color: fadeout(@black, 50);
      border-right: 1px solid fadeout(@black, 90);
      &:last-child {
        border-right: none;
      }
      &.padded {
        padding: ~"0.8em calc(0.8em + 22px) 0.8em 0.8em";
      }
      &.next {
        min-width: 2.8em !important;
      }
      i {
        margin: 0;
      }
      .fa-chevron-up, .fa-chevron-down {
        position: absolute;
        right: 1em;
        color: fadeout(@black, 50);
      }
    }
  }
  tbody {
    .reframe-table-link {
      .hover(background-color, fadeout(@black, 95));
      cursor: pointer;
    }
    td {
      line-height: 20px;
      vertical-align: middle;
      color: @table_body_font_color !important;
      border-bottom: 1px solid fadeout(@black, 95);
      strong {
        color: @black;
      }
      &.centered {
        text-align: center;
      }
      &.right {
        text-align: right;
      }
      &.fa {
        padding: 0.8em;
      }
      &.padded {
        padding: 0.8em;
      }
      .fa {
        margin: 0;
      }
      .fa-chevron-right, .fa-ellipsis {
        color: fadeout(@black, 80) !important;
      }
      .fa-ellipsis {
        font-size: 1.2em;
        cursor: pointer;
      }
    }
  }
  td {
    &.collapsing {
      width: 1px;
    }
    @media only screen and (max-width: 768px) {
      &:not(.mobile),
      &:not(.mobile) {
        display: none;
      }
    }
  }
}