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 {
  .clear-filter {
    color: $medium-light-grey;
    font-size: $size-status-history-button;
    width: $size-status-history-button;
    height: $size-status-history-button;
    right: 32px;
    padding: 6px;
  }
  .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;
    }
  }

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

    td {
      @include truncate-with-ellipsis();
      padding-top: 8px !important;
      padding-bottom: 8px !important;
      border: none !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;
        }
      }
    }
  }
}