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;
    }

    @include respond-to-smaller-than-breakpoint('md') {
      height: initial;
    }
  }

  .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;

    .message {
      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('md') {
        display: flex !important;
        flex-direction: column;

        &.mobile-action-bar {
          flex-direction: row;

          > .action-button {
            margin-right: 10px;
          }
        }
      }

      &.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;
    }
  }
}

.cdk-drag-preview {
  background-color: $white;
  padding: 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);

  .icon {
    margin-right: 10px;
  }

  .label {

  }
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}


// FIX RESPONSIVE DISPLAY OF TABLE. COULD NOT BE LESS THAN DEFAULT PRIMENG VALUE OF 40em
@include respond-to-smaller-than-breakpoint('md') {
  .ui-table-responsive .ui-table-thead > tr > th,
  .ui-table-responsive .ui-table-tfoot > tr > td {
    display: none !important;
  }

  .ui-table-responsive colgroup {
    display: none !important;
  }

  .ui-table-responsive .ui-table-tbody > tr > td {
    text-align: left;
    display: block;
    border: 0 none;
    width: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    clear: left;
  }

  .ui-table-responsive .ui-table-tbody > tr > td .ui-column-title {
    padding: .4em;
    min-width: 30%;
    display: inline-block;
    margin: -.4em 1em -.4em -.4em;
    font-weight: bold;
  }
}