shared-data-table.presentational.scss

@import "../../../../../sass/abstracts/variables";
@import "../../../../../sass/abstracts/mixins";

$fontFamily: Helvetica, Arial, sans-serif;
$fontSize: 1em;
$borderRadius: 2px;
$disabledOpacity: 0.35;

//Header
$headerBorderWidth: 1px;
$headerBorderColor: $primary-color;
$headerBgColor: $primary-color;
$headerTextColor: $white;
$headerFontWeight: bold;
$headerIconTextColor: #444444;

//Content
$contentBorderWidth: 1px;
$contentBorderColor: #dddddd;
$contentBgColor: #ffffff;
$contentTextColor: #444444;

//Default State
$stateDefaultBorderWidth: 1px;
$stateDefaultBorderColor: #dddddd;
$stateDefaultBgColor: #f6f6f6;
$stateDefaultTextColor: #0073ea;

//Active State
$stateActiveBorderColor: #dddddd;
$stateActiveBgColor: #ffffff;
$stateActiveTextColor: #ff0084;

//Highlight State
$stateHighlightBorderColor: $light-grey;
$stateHighlightBgColor: $light-grey;
$stateHighlightTextColor: #FFFFFF;

//Focus State
$stateFocusBorderColor: #0073ea;
$stateFocusBgColor: #0073ea;
$stateFocusTextColor: #ffffff;

//Error State
$stateErrorBorderColor: #ff0084;
$stateErrorBgColor: #ffffff;
$stateErrorTextColor: #222222;

//Hover State
$stateHoverBorderColor: #0073ea;
$stateHoverBgColor: $contentBgColor;
$stateHoverTextColor: $black;

//Forms
$inputBgColor: #ffffff;
$inputTextColor: #444444;
$invalidInputBorderColor: #ff0084;
$inputGroupTextColor: #444444;

.data-table {

  .header-button-and-pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;

    @include respond-to-breakpoint-and-bigger('md') {
      position: sticky;
      top: 0;
      z-index: $z-index-sticky;
      background-color: $white;
    }
  }

  .no-datas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 150px;
    background-color: $extra-ultra-light-grey;
    color: $medium-light-grey;

    .icon {
      font-size: 40px;
      line-height: 40px;
      width: 40px;
      height: 40px;
      color: $medium-light-grey;
    }

    .message {
      padding-top: 10px;
      font-size: 16px;
    }
  }

  .action-header {
    width: 55px;
  }

  .td-column {

  }

  thead {
    th {
      text-align: left;
    }
  }

  tbody {
    tr:nth-child(odd) {
      // Allow pyjama
      background-color: $background-grey !important;
    }

    td {
      @include truncate-with-ellipsis();
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      border: none !important;

      @include respond-to-smaller-than-breakpoint('sm') {
        display: flex !important;
        flex-direction: column;
      }

      &.is-component-cell {
        white-space: pre-line;
      }
    }

    tr.is-new {
      background-color: $primary-color-extra-lighter !important;
    }
  }

  @import "./base/table";

  // OVERRIDE RULE PRIME NG THEME BELOW
  .ui-table .ui-table-tbody > tr.ui-state-highlight {
    background-color: initial !important;
    color: initial !important;

    &:nth-child(odd) {
      background-color: $background-grey !important;
    }
  }

  .ui-table .ui-sortable-column.ui-state-highlight {
    background-color: $headerBgColor !important;
  }

  .ui-table .ui-sortable-column:not(.ui-state-highlight):hover {
    background-color: $headerBgColor !important;
    color: $headerTextColor !important;
    cursor: default;
  }

  .sortable-column {
    cursor: pointer !important;

    &:hover {
      text-decoration: underline;
    }
  }

  .ui-table .ui-sortable-column:not(.ui-state-highlight):hover .ui-sortable-column-icon {
    color: $headerTextColor !important;
  }

  .data-table-filter {
    padding: 4px !important;
    $height-input: 30px;

    @mixin input-filter {
      background-color: $primary-color-lighter !important;
      border: 0;
      border-radius: 5px;
      padding: 6px 30px 6px 10px;
      width: 100%;
      color: $white;
      height: $height-input;
    }


    .filter-searchable-single-select,
    .filter-single-select,
    .filter-string {
      position: relative;

      .filter-input, mat-select {
        @include input-filter;
      }

      button {
        position: absolute;
        top: -6px;
        right: -5px;
      }
    }

    .filter-single-select {
      mat-select {
        .mat-select-value {
          color: $white;
          font-weight: initial;
          text-align: left;
        }

        .mat-select-arrow {
          color: $white;
        }

        &.no-value {
          padding-right: 6px;
        }
      }
    }

    .filter-searchable-single-select {
      height: $height-input;

      form input {
        @include input-filter;
        text-align: left;
        font-weight: initial;
        margin: 0 !important;
      }

      .mat-form-field-wrapper {
        padding: 0;

        .mat-form-field-infix {
          padding: 0;
          border: 0;
        }
      }

      .mat-form-field-underline {
        display: none;
      }

      .clear {
        top: -32px;
        right: -5px;
        width: 40px;
        height: 40px;

        .mat-button-wrapper {
          color: white;
        }
      }
    }
  }

  .action-button-wrapper {
    position: relative;

    .action-button {
      position: absolute;
      top: -20px;
    }
  }
}