scinote-web/app/assets/stylesheets/shared/datatable.scss

// scss-lint:disable SelectorDepth SelectorFormat
// scss-lint:disable NestingDepth QualifyingElement

.dataTables_wrapper {

  .main-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 1em 0;

    .toolbar {
      flex-grow: 1;
    }
  }

  .dataTables_scrollHead {
    .dataTable {
      margin-top: 0 !important;
    }
  }

  .pagination-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    min-height: 68px;
    width: 100%;

    .pagination-info,
    .pagination-actions {
      flex-grow: 1;
    }

    .pagination-info {
      align-items: center;
      display: flex;
      flex-wrap: wrap;

      .dataTables_info {
        padding-top: 0;
      }

      @media (max-width: 1000px) {
        .dataTables_info {
          display: none;
        }
      }

      .dataTables_length {
        margin-right: 24px;
        width: 170px;

        .dropdown-selector-container {
          width: inherit;
        }

        label {
          margin-bottom: 0;
        }
      }
    }

    @media (max-width: 767px) {
      .pagination-info {
        display: none;
      }
    }
  }

  tr[data-state]:not([data-state='']) {
    td.item-name::after {
      background-color: $color-concrete;
      color: $color-silver-chalice;
      content: attr(data-state);
      margin-left: 20px;
      padding: .3em;
      white-space: nowrap;
    }
  }

  tr[data-shared=true] {
    td.item-name::before {
      @include font-awesome;
      content: "\f0c0";
      margin-right: .5em;
    }
  }
}