socialhose-php/frontend/app/styles/components/tables/_tables.scss

.ReactTable {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);

  .rt-table {
    flex: auto 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-collapse: collapse;
    overflow: auto
  }

  .-pagination input,
  .-pagination select,
  .rt-thead.-filters input,
  .rt-thead.-filters select {
    display: block;
    width: 100%;
    color: $input-color;
    background-color: $input-bg;
    background-clip: padding-box;
    border: $input-border-width solid $input-border-color;

    height: $input-height-sm;
    padding: $input-padding-y-sm $input-padding-x-sm;
    line-height: $input-line-height-sm;
    @include border-radius($input-border-radius-sm);

    @if $enable-rounded {
      border-radius: $input-border-radius;
    } @else {
      border-radius: 0;
    }

    @include box-shadow($input-box-shadow);
    @include transition($input-transition);

    &::-ms-expand {
      background-color: transparent;
      border: 0;
    }

    @include form-control-focus();

    // Placeholder
    &::placeholder {
      color: $input-placeholder-color;
      opacity: 1;
    }

    &:disabled,
    &[readonly] {
      background-color: $input-disabled-bg;
      opacity: 1;
    }
  }

  .rt-thead {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    user-select: none;

    &.-headerGroups {
      background: rgba(0, 0, 0, 0.03);
      border-bottom: 1px solid $table-border-color;

      .rt-th,
      .rt-td {
        padding: $table-cell-padding-sm;
        color: $table-head-color;

        &:hover {
          color: $table-head-color;
        }

        &:empty {
          padding: 0;
        }
      }

    }

    &.-filters {
      border-bottom: 1px solid $table-border-color;
      background: $gray-100;

      .rt-th {
        border-right: 1px solid $table-border-color
      }

      &.-header {
        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.15)
      }
    }

    .rt-tr {
      text-align: center
    }

    .rt-th,
    .rt-td {
      padding: $table-cell-padding;
      line-height: normal;
      position: relative;
      font-weight: bold;
      border-right: 1px solid $table-border-color;
      border-bottom: 1px solid $table-border-color;
      transition: box-shadow .3s cubic-bezier(.175, .885, .32, 1.275);
      box-shadow: inset 0 0 0 0 transparent;
      color: $primary;

      &:hover {
        color: darken($primary, 15%);
      }
    }

    .rt-th.-sort-asc,
    .rt-td.-sort-asc {
      box-shadow: inset 0 3px 0 0 $primary
    }

    .rt-th.-sort-desc,
    .rt-td.-sort-desc {
      box-shadow: inset 0 -3px 0 0 $primary
    }

    .rt-th.-cursor-pointer,
    .rt-td.-cursor-pointer {
      cursor: pointer
    }

    .rt-th:last-child,
    .rt-td:last-child {
      border-right: 0
    }

    .rt-resizable-header {
      overflow: visible;
    }

    .rt-resizable-header:last-child {
      overflow: hidden
    }

    .rt-resizable-header-content {
      overflow: hidden;
      text-overflow: ellipsis
    }

    .rt-header-pivot {
      border-right-color: #f7f7f7
    }

    .rt-header-pivot:after,
    .rt-header-pivot:before {
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none
    }

    .rt-header-pivot:after {
      border-color: rgba(255, 255, 255, 0);
      border-left-color: $white;
      border-width: 8px;
      margin-top: -8px
    }

    .rt-header-pivot:before {
      border-color: rgba(102, 102, 102, 0);
      border-left-color: #f7f7f7;
      border-width: 10px;
      margin-top: -10px
    }
  }

  .rt-tbody {
    flex: 99999 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .rt-tr-group {
      border-bottom: solid 1px $table-border-color;
    }

    .rt-tr-group:last-child {
      border-bottom: 0
    }

    .rt-td {
      border-right: 1px solid $table-border-color;
      // align-items: center;
      // align-content: center;
      // display: flex;

      [contenteditable="true"] {
        width: 100%;
        border: 1px solid transparent;
        background: $white !important;
        @include border-radius($input-border-radius-sm);

        &:focus {
          padding: 3px 5px;
          border-color: $input-focus-border-color;
          outline: none;
        }
      }
    }

    .rt-td:last-child {
      border-right: 0
    }

    .rt-expandable {
      cursor: pointer;
      text-overflow: clip
    }
  }

  .rt-tr-group {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  .rt-tr {
    flex: 1 0 auto;
    display: inline-flex
  }

  .rt-th,
  .rt-td {
    flex: 1 0 0;
    text-overflow: ellipsis;
    padding: $table-cell-padding;
    //overflow: hidden;
    transition: .3s ease;
    transition-property: width, min-width, padding, opacity;

    &.-hidden {
      width: 0 !important;
      min-width: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      opacity: 0 !important
    }
  }

  .rt-expander {
    display: inline-block;
    position: relative;
    color: transparent;
    margin: 0 10px 0 0;
    &:after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-90deg);
      border-left: 5.04px solid transparent;
      border-right: 5.04px solid transparent;
      border-top: 7px solid rgba(0, 0, 0, 0.8);
      transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
      cursor: pointer
    }
    &.-open:after {
      transform: translate(-50%, -50%) rotate(0)
    }
  }

  .rt-resizer {
    display: inline-block;
    position: absolute;
    width: 36px;
    top: 0;
    bottom: 0;
    right: -18px;
    cursor: col-resize;
    z-index: 10
  }

  .rt-tfoot {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);

    .rt-td {
      border-right: 1px solid $table-border-color;
      &:last-child {
        border-right: 0
      }
    }
  }

  &.-striped .rt-tr.-odd {
    background: rgba(0, 0, 0, 0.03)
  }

  &.-fixed {
    .-header {
      box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.07);
    }

    .pagination-bottom {
      box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, 0.07);
    }
  }

  &.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
    background: $dropdown-link-hover-bg
  }

  .-pagination {
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 3px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);

    .-btn {
      appearance: none;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: $border-radius;
      padding: 6px;
      font-size: 1em;
      color: $primary;
      background: $gray-100;
      transition: all .2s ease;
      cursor: pointer;
      outline: none;
      font-weight: bold;
    }

    .-btn[disabled] {
      opacity: .5;
      cursor: default
    }

    .-btn:not([disabled]):hover {
      background: $primary;
      color: $white
    }

    .-previous,
    .-next {
      flex: 1;
      text-align: center
    }

    .-center {
      text-align: center;
      margin-bottom: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around
    }

    .-totalPages {
      padding-inline-start: 5px;
      font-weight: bold;
    }

    .-pageInfo {
      display: inherit;
      margin: 3px 0 3px 10px;
      white-space: nowrap;
      height: 30px;
      line-height: 30px;
    }

    .-pageJump {
      display: inline-block;
      margin: 0 5px;
    }

    .-pageJump input {
      width: 70px;
      text-align: center
    }

    .-pageSizeOptions {
      margin: 3px 10px
    }
  }

  .rt-noData {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    transition: all .3s ease;
    z-index: 1;
    pointer-events: none;
    padding: 20px;
    color: rgba(0, 0, 0, 0.5)
  }

  .-loading {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    transition: all .3s ease;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
  }

  .-loading > div {
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    top: 50%;
    left: 0;
    font-size: 15px;
    color: $primary;
    transform: translateY(-52%);
    transition: all .3s cubic-bezier(.25, .46, .45, .94)
  }

  .-loading.-active {
    opacity: 1;
    z-index: 2;
    pointer-events: all;
  }

  .-loading.-active > div {
    transform: translateY(50%)
  }

  .rt-resizing .rt-th,
  .rt-resizing .rt-td {
    transition: none !important;
    cursor: col-resize;
    user-select: none
  }

}

.table thead th,
.table td {
  vertical-align: middle;
}

.table {
  th .filter {
    margin-top: ($layout-spacer-x / 4);
    height: auto;
    padding: 0.3rem 0.5rem;
  }
}

.caret-4-asc,
.caret-4-desc {
  font-family: 'Linearicons-Free';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-inline-start: ($layout-spacer-x / 4);
}

.table .sortable:hover {
  .caret-4-asc,
  .caret-4-desc {
    color: $primary;
  }
}

.caret-4-asc {
  @extend .lnr-chevron-up;
}

.caret-4-desc {
  @extend .lnr-chevron-down;
}

// Table sizing

.table-lg {
  th,
  td {
    padding: ($table-cell-padding * 2) ($table-cell-padding * 1.5);
  }
}