@eclipse-scout/core/src/table/TableHeader.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.table-header {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  background-color: @table-header-background-color;
  border-bottom: 2px solid @table-header-border-color;
  z-index: 0; /* begin new stacking context */
  padding-left: var(--table-row-margin-x);
  padding-right: var(--table-row-margin-x);

  // TableHeader.js will set a border width if the row has one for the selection
  border-left: 0 solid transparent;

  &.disabled:not(.read-only) {
    color: @text-disabled-color;
  }
}

.table-header > .menubar-container {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  /* Do not use transparent color here, because otherwise header items would be visible behind */
  background-color: inherit;
  z-index: 1;
  margin-left: @table-header-item-margin-x;

  & > .menubar {
    height: 100%;
    background-color: transparent;
    border: none;

    & > .menubar-box > .menu-item {
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-right: @table-header-item-margin-x;
      min-height: @table-header-item-min-height;

      & > .font-icon {
        font-size: @table-header-icon-font-size;
      }

      &.menu-icononly {
        padding: 0;
        min-width: @table-header-item-min-height;
      }
    }
  }
}

.table-header-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-weight: @font-weight-bold;
  font-size: @font-size-smaller;
  color: @table-header-item-color;
  padding: @table-header-item-padding-y @table-header-item-padding-right @table-header-item-padding-y @table-header-item-padding-left;
  // + 1px because resizer takes 1px on the right
  margin: @table-header-item-margin-y @table-header-item-margin-x + 1 @table-header-item-margin-y @table-header-item-margin-x;
  min-height: @table-header-item-min-height;

  /* Vertical align is necessary for 2 things: */
  /* 1. Alignment in case of multiline headers. */
  /* 2. A correct header height, see http://stackoverflow.com/questions/20566710/overflowhidden-displayinline-block-moves-text-upwards */
  vertical-align: middle;
  cursor: pointer;
  border-radius: @border-radius;

  &.last {
    // Resizer is also moved 1px to the left, see resize rule below
    margin-right: @table-header-item-margin-x;
  }

  &.halign-right {
    justify-content: flex-end;
    text-align: right; // Necessary for multiline header
    padding-right: @table-header-item-padding-left;
    padding-left: @table-header-item-padding-right;
  }

  &.halign-center {
    justify-content: center;
    text-align: center; // Necessary for multiline header
    padding-right: @table-header-item-padding-left;
  }

  &.last.halign-left,
  &.last.halign-center,
  &.last.halign-right {
    padding-right: @table-header-item-padding-right-last;
  }

  &.sorted,
  &.grouped,
  &.filtered {
    /* make room for icon */
    padding-right: @table-header-item-padding-right + @table-header-sort-icon-size-1;

    &.halign-right,
    &.halign-center {
      padding-right: @table-cell-padding-left + @table-header-sort-icon-size-1;
    }
  }

  &.sorted.grouped,
  &.sorted.filtered {
    /* make some more room */
    padding-right: @table-header-item-padding-right + @table-header-sort-icon-size-2;

    &.halign-right,
    &.halign-center {
      padding-right: @table-cell-padding-left + @table-header-sort-icon-size-2;
    }
  }

  &.moving,
  &.releasing {
    // Don't show hover state of underlying item
    z-index: 1;
  }

  &.moving > .table-header-item-state {
    display: none;
  }

  &:hover {
    color: @hover-color;
    background-color: @hover-background-color;
  }

  &.active, &:active,
  &.moving {
    background-color: @active-background-color;
  }

  &.selected {
    background-color: @selected-with-popup-background-color;
    color: @active-color;
    z-index: 1;
  }

  &.disabled {
    cursor: default;
    /* Override default disabled text color, because "disabled" in the table header means something different */
    color: @table-header-item-color;
    background-color: inherit;
  }

  &.filler {
    padding: 0;
    margin: 0;
    border: 0;
    cursor: default;
  }

  & > .icon {
    &.font-icon {
      font-size: @table-header-icon-font-size;
    }

    &.with-text {
      margin-right: 8px;
    }
  }
}

.table-header-item-text {
  #scout.overflow-ellipsis-nowrap();
  margin-top: @text-margin-top;
}

.table-header-item-state {
  position: absolute;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  font-weight: normal;
  font-size: @font-size-extra-small;
  color: @table-header-item-state-color;
  height: 100%;

  & > .left {
    text-align: center;
    padding-left: 3px;
  }

  &.grouped.filtered > .left {
    padding-top: 0;
  }

  & > .right {
    color: @table-header-sort-color;
    margin-top: -3px;
    font-size: 16px;
    padding-left: 3px;
    padding-right: 3px;
  }

  &.sort-desc > .right::after {
    content: @icon-arial-long-arrow-down;
  }

  &.sort-asc > .right::after {
    content: @icon-arial-long-arrow-up;
  }
}

.table-header-resize {
  position: absolute;
  display: inline-block;
  top: 0;
  height: 100%;
  width: 17px;
  padding: 10px 8px;
  margin-left: -9px;
  background-color: @table-header-resize-color;
  background-clip: content-box;
  z-index: 1;

  &:not(.disabled) {
    cursor: col-resize;

    &:hover {
      background-color: @table-header-resize-hover-color;
    }
  }

  .table-header-item.last + & {
    margin-left: -8px; // Ensure resizer of the last column is not visible when columns use the whole width
  }

  .table-header.moving > & {
    /* Hide separators while moving, because their position will not be updated until the move-end event */
    visibility: hidden;
  }
}

/* Temporary element inserted in header and data area during resizing of a column */
.table-column-resize-helper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  height: 1px;
  /* width is set dynamically by TableHeader.js */
}