iTop/css/backoffice/vendors/_datatables.scss

/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */


$ibo-vendors-datatables--pagination--color: $ibo-color-grey-800 !default;

$ibo-vendors-datatables--pagination-button--min-size: 20px !default;
$ibo-vendors-datatables--pagination-button--padding-x: 5px !default;
$ibo-vendors-datatables--pagination-button--padding-y: $ibo-spacing-0 !default;
$ibo-vendors-datatables--pagination-button--border-radius: $ibo-border-radius-300 !default;
$ibo-vendors-datatables--pagination-button--background-color--on-hover: $ibo-color-grey-100 !default;
$ibo-vendors-datatables--pagination-button--text-color--is-active: $ibo-color-grey-900 !default;
$ibo-vendors-datatables--pagination-button--background-color--is-active: $ibo-color-grey-200 !default;
$ibo-vendors-datatables--pagination-button--box-shadow--is-active: inset 0px 1px 0px rgba(0, 0, 0, 0.15) !default;
$ibo-vendors-datatables--pagination-button--text-color--is-disabled: $ibo-color-grey-600 !default;
$ibo-vendors-datatables--pagination-button--background-color--is-disabled: transparent !default;

$ibo-vendors-datatables--page-length-selector--text-color: $ibo-color-grey-900 !default;
$ibo-vendors-datatables--page-length-selector--background-color: $ibo-color-white-100 !default;
$ibo-vendors-datatables--page-length-selector--border-color: $ibo-color-grey-500 !default;
$ibo-vendors-datatables--page-length-selector--border-radius: $ibo-border-radius-300 !default;
$ibo-vendors-datatables--page-length-selector--border-color--on-focus: $ibo-color-primary-600 !default;

$ibo-vendors-datatables--cell--padding-x: $ibo-spacing-400 !default;
$ibo-vendors-datatables--cell--padding-y: 10px !default;

$ibo-vendors-datatables--column-sorting-icon--opacity: 0.3 !default;
$ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted: 1 !default;
$ibo-vendors-datatables--column-sorting-icon--right: calc((#{$ibo-vendors-datatables--cell--padding-x} - 8px) / 2) !default;
$ibo-vendors-datatables--column-sorting-icon--content: "\f0dc" !default;
$ibo-vendors-datatables--column-sorting-icon--content--is-sorted-asc: "\f0d8" !default;
$ibo-vendors-datatables--column-sorting-icon--content--is-sorted-desc: "\f0d7" !default;

$ibo-vendors-datatables--columns-header--border-bottom: 1px solid $ibo-color-grey-400 !default;

$ibo-vendors-datatables--row--background-color--is-odd: $ibo-color-white-100 !default;
$ibo-vendors-datatables--row--background-color--is-even: $ibo-color-white-200 !default;

$ibo-vendors-datatables--row-highlight--first-cell--width: 3px !default;

$ibo-vendors-datatables--row-highlight--colors:(
        'red': ($ibo-color-red-100),
        'danger': ($ibo-color-danger-200),
        'alert': ($ibo-color-red-200),
        'orange': ($ibo-color-orange-100),
        'warning': ($ibo-color-warning-200),
        'blue': ($ibo-color-blue-200),
        'info': ($ibo-color-information-200),
        'green': ($ibo-color-green-100),
        'success': ($ibo-color-success-200),
) !default;

$ibo-vendors-datatables--row-highlight--first-cell--colors:(
        'red': ($ibo-color-red-300),
        'danger': ($ibo-color-danger-400),
        'alert': ($ibo-color-red-400),
        'orange': ($ibo-color-orange-300),
        'warning': ($ibo-color-warning-400),
        'blue': ($ibo-color-blue-400),
        'info': ($ibo-color-information-400),
        'green': ($ibo-color-green-300),
        'success': ($ibo-color-success-300),
) !default;

.dataTables_paginate {
  @extend %ibo-vertically-centered-content;
  color: $ibo-vendors-datatables--pagination--color;

  /* Important: Those classes are inside the .dataTables_XXX to avoid CSS rules collision with another lib. having ".pagination" classes etc */
  a.paginate_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: $ibo-vendors-datatables--pagination-button--padding-y $ibo-vendors-datatables--pagination-button--padding-x;
    min-width: $ibo-vendors-datatables--pagination-button--min-size; /* "min-width" as we allow the button to get larger (but not higher) when its text content grows */
    height: $ibo-vendors-datatables--pagination-button--min-size;
    border-radius: $ibo-vendors-datatables--pagination-button--border-radius;

    @extend %ibo-font-size-100;
    @extend %ibo-hyperlink-inherited-colors;

    &:hover {
      background-color: $ibo-vendors-datatables--pagination-button--background-color--on-hover;
    }

    &.disabled {
      color: $ibo-vendors-datatables--pagination-button--text-color--is-disabled;
      background-color: $ibo-vendors-datatables--pagination-button--background-color--is-disabled;
      cursor: default;
    }

    &.previous,
    &.next {
      @extend %ibo-font-size-200;
    }

    &.current {
      @extend %ibo-font-ral-sembol-100;

      color: $ibo-vendors-datatables--pagination-button--text-color--is-active;
      background-color: $ibo-vendors-datatables--pagination-button--background-color--is-active;
      box-shadow: $ibo-vendors-datatables--pagination-button--box-shadow--is-active;
    }
  }
}

.dataTables_length {
  select {
    /* Extend .ibo-input and overload the properties below */
    @extend .ibo-input;

    /* Note: "[aria-controls]" is only there to take over the .ibo-input properties that will be put later in the compiled CSS */
    &[aria-controls] {
      display: inline-flex;
      width: unset;
      min-width: 50px;
      height: 20px;
      padding: 0 4px;
    }
  }
}

.dataTables_scrollHead {
  /* Important: Those classes are inside the .dataTables_XXX to avoid CSS rules collision with another lib. having "thead" tags etc */
  thead tr th {
    cursor: pointer;
    @extend %ibo-font-ral-sembol-100;

    &.sorting::after {
      position: absolute;
      right: $ibo-vendors-datatables--column-sorting-icon--right;
      content: $ibo-vendors-datatables--column-sorting-icon--content;
      opacity: $ibo-vendors-datatables--column-sorting-icon--opacity;
      @extend %fa-solid-base;
      line-height: inherit; /* Overload the one from te %fa-solid-base */
    }

    &.sorting_asc:after {
      content: $ibo-vendors-datatables--column-sorting-icon--content--is-sorted-asc;
      opacity: $ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted;
    }

    &.sorting_desc:after {
      content: $ibo-vendors-datatables--column-sorting-icon--content--is-sorted-desc;
      opacity: $ibo-vendors-datatables--column-sorting-icon--opacity--is-sorted;
    }
  }
}

.dataTables_scrollHeadInner {
  border-bottom: $ibo-vendors-datatables--columns-header--border-bottom;
}

.dataTable {
  th, td {
    position: relative;
    padding: $ibo-vendors-datatables--cell--padding-y $ibo-vendors-datatables--cell--padding-x;
    @extend %ibo-font-ral-med-100; /* Necessary to set the font-size as its container can have a different one */
  }

  tr:nth-child(odd) {
    background-color: $ibo-vendors-datatables--row--background-color--is-odd;
  }

  tr:nth-child(even) {
    background-color: $ibo-vendors-datatables--row--background-color--is-even;
  }
  @each $sColorLabel, $aAttributes in $ibo-vendors-datatables--row-highlight--colors {
    $sBgColor: nth($aAttributes, 1);
    tr.ibo-is-#{$sColorLabel}{
      background-color: $sBgColor;
    }
  }
  @each $sColorLabel, $aAttributes in $ibo-vendors-datatables--row-highlight--first-cell--colors {
    $sBgColor: nth($aAttributes, 1);
    tr.ibo-is-#{$sColorLabel} td:first-child::before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background-color: $sBgColor;
    }
  }

}