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 {
  .no-datas {
    text-align: center;
  }

  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;

    .filter-text {
      position: relative;

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

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