@eclipse-scout/core/src/table/Table.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-row-level-padding {
  width: @table-row-level-padding-width;
}

.table {
  position: relative;
  --table-row-margin-x: @table-row-margin-x;
  --table-row-padding-y: @table-row-padding-y;
  --table-aggregate-row-padding-y-small: @table-aggregate-padding-y-small;
  --table-aggregate-row-padding-y-large: @table-aggregate-padding-y-large;

  &:focus,
  &.focused,
  &.perma-focus {
    outline: none;

    & > .table-data > .table-row {
      &.selected {
        background-color: @item-selection-background-color;

        &::after {
          border-color: @item-selection-border-color;
        }
      }
    }
  }

  &.checkable {
    & > .table-data > .table-row {
      cursor: pointer;
    }

    &.disabled > .table-data > .table-row,
    & > .table-data > .table-row.disabled {
      cursor: default;
    }
  }

  /* Used for scout.Table.CheckableStyle.TABLE_ROW */

  &.table-row-check {
    & > .table-data {
      & > .table-row {
        &.selected {
          /* Don't draw selection */
          background-color: transparent;

          &::after {
            display: none;
          }
        }

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

      & > .table-row.disabled,
      &.disabled > .table-row {
        background-color: transparent;
      }

      & > .table-row {
        &.checked,
        &.checked.selected {
          /* Mark checked rows with a background color */
          background-color: @table-row-checked-background-color;

          & > .table-cell {
            color: @table-row-checked-color;
          }

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

      & > .table-row.disabled,
      &.disabled > .table-row {
        &.checked,
        &.checked.selected {
          background-color: @selected-disabled-background-color;
        }
      }
    }

    &.keyboard-navigation:focus,
    &.keyboard-navigation.focused {
      & > .table-data > .table-row {
        &.selected {
          background-color: @hover-background-color;

          &.checked {
            background-color: @selected-hover-background-color;
          }
        }
      }
    }
  }

  &.structured {
    .table-row:not(.leaf) {
      background-color: @table-structure-row-background-color;
      font-weight: bold;
    }
  }

  & > .tile-accordion {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 15px;

    & > .group > .tile-grid {
      padding: 0;
    }
  }

  & > .tile-table-header {
    padding-left: 20px;
    padding-right: 20px;

    & > .group-box-body {
      padding-bottom: 6px;
    }
  }

  &.dimmed-background {
    background-color: @dimmed-background-color;

    & > .menubar {
      background-color: inherit;
    }
  }

  & > .filter-field {
    --filter-field-max-bottom: calc(~'50% - ' (var(--filter-field-height) + var(--controls-height)) / 2);

    &:not(.focused).empty {
      --filter-field-max-bottom: calc(~'50% - ' (@filter-field-icon-size + var(--controls-height)) / 2);
    }

    .has-menubar.menubar-bottom& {
      --filter-field-max-bottom: calc(~'50% - ' (var(--filter-field-height) + var(--controls-height)) / 2);
      bottom: calc(min(var(--filter-field-bottom), var(--filter-field-max-bottom)) + var(--menubar-height));

      &:not(.focused).empty {
        --filter-field-max-bottom: calc(~'50% - ' (@filter-field-icon-size + var(--controls-height)) / 2);
      }
    }

    .has-cell-editor-popup& {
      opacity: 0;
      visibility: hidden;

      // start the "fade out" transition right away
      --filter-field-opacity-transition-delay: 0s;
      // set visibility to hidden right after the "fade out" transition ends
      --filter-field-visibility-transition-delay: calc(@filter-field-transition-duration + var(--filter-field-opacity-transition-delay));
    }
  }
}

.table-data {
  position: relative;
  overflow: hidden;
  width: 100%;

  :not(.header-invisible) > & {
    /* Draw the .table-data div one pixel higher, over the header (for selection border).
       Add the padding to keep the size of the first row and not overdraw the header line with the row background */
    margin-top: -1px;
    padding-top: 1px;
  }

  & > .scrollbar.y-axis {
    /* Make scrollbar visually centered */
    margin-top: @scrollbar-margin + 1px;
  }

  & > .table-row,
  & > .table-aggregate-row,
  & > .table-data-fill,
  & > .cell-editor-popup,
  & > .scrollbar {
    opacity: 1;
    transition: opacity @loading-fade-duration;
  }

  & > .scrollbar {
    z-index: 2; // should lay over cell editor popup
  }
}

.table {
  &:not(.knight-rider-loading) > .table-data.loading {
    & > .table-row,
    & > .table-aggregate-row,
    & > .table-data-fill,
    & > .cell-editor-popup,
    & > .scrollbar {
      opacity: 0;
    }

    & > .loading-glasspane > .loading-indicator {
      #scout.loading-indicator();
    }
  }

  &.knight-rider-loading > .table-data > .loading-glasspane > .loading-indicator {
    #scout.loading-indicator-knight-rider();
  }
}

.table-data-fill {
  background-color: @border-color; /* actual style is set by JS, this is used for the line color (see _applyFillerStyle) */
}

.table-row,
.table-aggregate-row {
  position: relative;
}

.table-row {
  &:active {
    background-color: @table-row-active-background-color;
  }

  &.selected {
    background-color: @item-selection-nonfocus-background-color;

    &::after {
      #scout.item-selection-border();
      z-index: 1; // Ensure selection covers aggregate row which is moved -1px to top
    }
  }

  &.select-top::after,
  &.select-middle::after {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.select-middle::after,
  &.select-bottom::after {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &.select-single,
  &.select-top {
    &::after {
      /* Move the selection 1px up to cover the bottom border of the previous row. */
      top: -1px;
      height: calc(100% + 1px);
    }

    .header-invisible > .table-data > &.first::after {
      // Move to 0 again to make selection fully visible.
      // Don't change height to have the same size as for other rows
      top: 0;
    }
  }

  &.checked {
    background-color: @table-row-checked-background-color;
  }
}

.table-row {
  margin-left: var(--table-row-margin-x);
  margin-right: var(--table-row-margin-x);
}

.table-cell {
  color: @text-color;
  display: table-cell;
  padding: var(--table-row-padding-y) @table-cell-padding-right var(--table-row-padding-y) @table-cell-padding-left;
  border-bottom: 1px solid @table-row-border-color;
  position: relative;
  #scout.overflow-ellipsis();
  vertical-align: top; /* for multiline text */

  .last-row-at-bottom > .table-row.last > & {
    border-bottom: 0;
  }

  .table-row.disabled > & {
    /* Table row is disabled -> use lighter disabled color */
    color: @disabled-color;
  }

  .disabled > .table-row > & {
    /* Whole table is disabled -> use darker disabled color */
    color: @text-disabled-color;
  }

  .disabled.read-only > .table-data > .table-row > & {
    color: @read-only-color;
  }

  .table-row.checked > & {
    color: @table-row-checked-color;
  }

  &.empty,
  &.icon-only {
    // Disable ellipsis if only icon is shown.
    // Also disable it on empty cells, because IE would display it for very narrow columns even if content is ' '
    text-overflow: clip;
  }

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

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.editable::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    #scout.triangle-top-left(5px, @border-color);
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.mandatory::before {
    position: absolute;
    content: '*';
    top: 0;
    left: 0;
    border: none;
    color: @border-color;
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.editable.has-error::before {
    #scout.triangle-top-left-color(@error-color);
  }

  .table:not(.disabled) > .table-data > .table-row:not(.disabled) > &.mandatory.has-error::before {
    color: @error-color;
  }

  &.table-node {

    & > .table-row-control {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding: var(--table-row-padding-y) 8px var(--table-row-padding-y) @table-row-control-padding-left;
      cursor: pointer;
      line-height: @table-row-control-line-height; /* Necessary to align with the text, depends on the used font size */

      &::before {
        display: block;
        #scout.font-icon();
        font-size: @table-row-control-size;
        content: @icon-angle-right;
        color: @table-row-control-color;

        .expanded& {
          /* This "imprecise" angle is a workround for firefox to prevent shifting the div a little when the animation finishes. */
          /* See https://bugzilla.mozilla.org/show_bug.cgi?id=739176 */
          #scout.transform(rotate(89.99deg));
        }
      }

      &:hover::before {
        color: @highlight-color;
      }
    }
  }

  &.checkable {
    /* same padding for left and right, it's by purpose */
    padding: calc(var(--table-row-padding-y) - @checkable-cell-padding-adjustment) @table-cell-padding-left 0 @table-cell-padding-left;
    cursor: pointer;
    text-overflow: clip;

    .grouping-style-top > .table-aggregate-cell& {
      padding-top: calc(var(--table-aggregate-row-padding-y-large) - 1px);
      padding-bottom: 3px;
    }

    .grouping-style-bottom > .table-aggregate-cell& {
      padding-bottom: calc(var(--table-aggregate-row-padding-y-large) - 1px);
      padding-top: 3px;
    }
  }

  &.checkable.disabled,
  .table.disabled > .table-data > .table-row > &.checkable {
    cursor: default;
  }

  & > .check-box {

    .table.disabled > .table-data > .table-row > & {
      #scout.checkbox-disabled();

      &.checked {
        #scout.checkbox-checked-disabled();
      }

      &.undefined {
        #scout.checkbox-undefined-disabled();
      }
    }
  }

  &.halign-right {
    text-align: right;
    padding-right: @table-cell-padding-left;
    padding-left: @table-cell-padding-right;

    &.table-aggregate-cell {
      direction: rtl;

      & > .text, & > .table-cell-icon {
        direction: ltr;
      }
    }
  }

  &.halign-center {
    text-align: center;
    padding-right: @table-cell-padding-left;
  }
}

.table-cell-icon {
  .font-icon& {
    color: @icon-color;
    font-size: @table-cell-font-icon-size;
    line-height: @table-cell-font-icon-line-height;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    min-width: @table-cell-icon-width;

    .disabled & {
      color: @disabled-color;
    }
  }

  .image-icon& {
    /* vertical-align-bottom is necessary to remove the bottom margin of the image */
    vertical-align: bottom;
  }

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

  .table-row.checked > .table-cell > & {
    color: @text-selection-color;
  }
}

.table-aggregate {
  overflow: hidden;
  padding-left: var(--table-row-margin-x);
  padding-right: var(--table-row-margin-x);
  font-size: @table-aggregate-row-font-size;

  & > .table-cell {
    padding: var(--table-row-padding-y) @table-cell-padding-right 0 @table-cell-padding-left;
    border-bottom: 0;
    height: 100%;
  }
}

.table-aggregate-row {
  background-color: @table-aggregate-row-background-color;
  min-width: 100%;
  border-top: 1px solid @table-row-border-color;
  border-bottom: 1px solid @table-row-border-color;
  margin-top: -1px; // top border should cover bottom border of the previous row
  padding-left: var(--table-row-margin-x);
  padding-right: var(--table-row-margin-x);
  font-size: @table-aggregate-row-font-size;

  & > .table-cell {
    border-bottom: 0;
  }

  &.grouping-style-top > .table-aggregate-cell {
    padding-top: var(--table-aggregate-row-padding-y-large);
    padding-bottom: var(--table-aggregate-row-padding-y-small);
  }

  &.grouping-style-bottom > .table-aggregate-cell {
    padding-top: var(--table-aggregate-row-padding-y-small);
    padding-bottom: var(--table-aggregate-row-padding-y-large);
  }
}

.table-aggregate-cell {
  font-weight: bold;
  overflow: visible;
  vertical-align: middle;

  & > .text {
    display: inline-block;
    vertical-align: middle;
    #scout.overflow-ellipsis-nowrap();
  }

  & > .table-cell-icon {
    display: inline-block;
    color: @text-color;
    vertical-align: middle;
    line-height: @table-aggregate-cell-font-icon-line-height;
    min-width: auto;
  }

  &.sum > .table-cell-icon,
  &.avg > .table-cell-icon {
    font-size: @table-aggregate-sum-avg-font-icon-size;
  }

  &.min > .table-cell-icon,
  &.max > .table-cell-icon {
    font-size: @table-aggregate-min-max-font-icon-size;
  }

  /* if aggregation is based on selected rows */

  &.selection,
  &.selection > .table-cell-icon {
    color: @table-aggregate-cell-selection-color;
  }
}

.before-aggregate-row > .table-cell {
  border-bottom-color: transparent;
}

.column-background-effect-bar-chart {
  background-color: @column-background-effect-bar-chart-background-color;
}

.column-background-effect-gradient1-start {
  background-color: @column-background-effect-gradient1-start-background-color;
}

.column-background-effect-gradient1-end {
  background-color: @column-background-effect-gradient1-end-background-color;
}

.column-background-effect-gradient2-start {
  background-color: @column-background-effect-gradient2-start-background-color;
}

.column-background-effect-gradient2-end {
  background-color: @column-background-effect-gradient2-end-background-color;
}

/* key box */

.table-row > .key-box {
  top: calc(~'50% - ' 23px / 2);
}

.table-controls > .table-control > .key-box {
  bottom: 4px;
}

.table .key-box.char {
  top: calc(~'50% - ' 21px / 2);
}

/*** Animation: rotate from 0 -> 90 deg ***/

@-webkit-keyframes expand-rotate {
  .keyframes-expand-rotate();
}

@keyframes expand-rotate {
  .keyframes-expand-rotate();
}

.keyframes-expand-rotate() {
  00% { /* see comment on top */
    #scout.transform(rotate(0deg));
  }
  100% {
    #scout.transform(rotate(89.99deg));
  }
}

.animation-expand-rotate() {
  #scout.animation-name(expand-rotate);
  #scout.animation-duration(0.3s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(ease-out);
}

.expand-rotate {

  &::before {
    .animation-expand-rotate();
  }
}


/*** Animation: rotate collapse  90 -> 0 deg ***/

@-webkit-keyframes collapse-rotate {
  .keyframes-collapse-rotate();
}

@keyframes collapse-rotate {
  .keyframes-collapse-rotate();
}

.keyframes-collapse-rotate() {
  00% { /* see comment on top */
    #scout.transform(rotate(89.99deg));
  }
  100% {
    #scout.transform(rotate(0deg));
  }
}

.animation-collapse-rotate() {
  #scout.animation-name(collapse-rotate);
  #scout.animation-duration(0.3s);
  #scout.animation-iteration-count(1);
  #scout.animation-timing-function(ease-out);
}

.collapse-rotate {

  &::before {
    .animation-collapse-rotate();
  }
}

/* Required because arrow up/down symbol is not properly vertically aligned with the rest of the sort/group text */
.sort-symbol {
  top: -1.25px;
  position: relative;
}

.organize-columns-behind-scrollbar-column.table-cell.last {
  padding: 0;
}