rowt/frontend/scss/components/_searchable-table.scss

/*!
 * JSTable v1.6.5
 */

 .dt-container{
  position:relative;
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: hidden;

  .dt-message {
      text-align: center;
  }

  .dt-loading{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      margin-left: -50%;
      margin-top: -20px;
      height: 40px;
      text-align: center;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.9) 25%,rgba(255,255,255,0.9) 75%,rgba(255,255,255,0) 100%);
  }
}

.dt-top,
.dt-bottom {
  padding: 8px 10px;
  display:flex;
  justify-content:space-between;

  .dt-info {
      margin: 7px 0;
  }

}

/* PAGER */
.dt-pagination {

  ul {
      margin: 0;
      padding-left: 0;
      li {
          list-style: none;
          float: left;
      }
  }
  a, span{
      border: 1px solid transparent;
      float: left;
      margin-left: 2px;
      padding: 6px 12px;
      position: relative;
      text-decoration: none;
      color: inherit;
  }

  a:hover {
      background-color: #d9d9d9;
  }
  .active a{
      &, &:focus, &:hover{
          background-color: #d9d9d9;
          cursor: default;
      }
  }

  .dt-ellipsis span{
      cursor: not-allowed;
  } 
  .disabled a{
      &, &:focus, &:hover{
          cursor: not-allowed;
          opacity: 0.4;
      }
  }

  .pager a {
      font-weight: bold;
  }
}


.dt-table {
  max-width: 100%;
  width: 100%;
  border-spacing: 0;

  & > tbody, > tfoot, > thead{
      & > tr{
          & > td, & > th{
              vertical-align: top;
              padding: 8px 10px;
              white-space: nowrap;
          }
      }
  }

  & > thead > tr{ 
      & > th, & > td{
          vertical-align: bottom;
          text-align: left;
          border-bottom: 1px solid #d9d9d9;
      }
  }

  & > tfoot  > tr{ 
      & > th, & > td{
          vertical-align: bottom;
          text-align: left;
          border-top: 1px solid #d9d9d9;
      }
  }

  th {
      vertical-align: bottom;
      text-align: left;

      &.dt-sorter {
          position: relative;
          cursor: pointer;
          padding-right:20px;

          &::before,
          &::after {
              content: "";
              height: 0;
              width: 0;
              position: absolute;
              right: 7px;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              opacity: 0.2;
          }

          &::before {
              border-top: 4px solid #000;
              top: 18px;
          }

          &::after {
              border-bottom: 4px solid #000;
              border-top: 4px solid transparent;
              bottom: 22px;
          }

          &.asc::after,
          &.desc::before {
              opacity: 0.6;
          }

      }
  }

}

.dt-loading.hidden{
  display:none!important;
  opacity:0!important;
}

.dt-input {
  @extend .input;
}

.dt-selector {
  @extend .input;
}