@eclipse-scout/core/src/tile/fields/tablefield/TileTableField.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2024 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
 */
.tile.dashboard > .table-field {
  .dashboard-tile-small-horizontal-padding(@tile-field-padding, @tile-field-padding - @table-cell-padding-left);
  padding-bottom: 12px;

  &.label-hidden {
    padding-top: 7px;
  }

  & > label {
    padding-bottom: @dashboard-tile-label-large-padding-bottom;
  }

  .compact& {
    .dashboard-tile-small-horizontal-padding(@tile-field-compact-padding-x, @tile-field-compact-padding-x - @table-cell-padding-left);

    & > label {
      padding-bottom: @dashboard-tile-label-padding-bottom;
    }
  }

  /* adjust menu bar when visible */

  &.has-menubar {
    padding-bottom: 2px;

    & > .table > .menubar.bottom {
      padding-top: 1px;
    }
  }

  & > .table {
    border: 0; /* see .table-row definition below */
    border-radius: 0;
    background-color: transparent;

    &:focus,
    &.focused {
      box-shadow: none;
    }

    & > .table-header {
      background-color: transparent;

      & > .table-header-item {
        color: @tile-table-default-color;

        &.sorted,
        &.grouped,
        &.filtered {
          padding-right: @table-header-item-padding-right;

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

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

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

      & > .table-header-resize {
        display: none;
      }

      /* show separator on mouseover only */

      &:hover > .table-header-resize {
        display: inline-block;
      }
    }

    &:not(:focus):not(.focused) > .table-data > .table-row.selected {
      /* No selection color for non-focused table tiles */
      background-color: transparent;

      &::after {
        border: 0;
      }
    }

    & > .table-data {
      & + .scroll-shadow {
        .scroll-shadow.gradient();
        --scroll-shadow-color: var(--tile-background-color);
      }

      & > .table-row {
        & > .table-cell,
        & > .table-cell > .font-icon {
          color: @tile-table-default-color;
        }
      }
    }

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

.tile.dashboard {
  &.inverted > .table-field > .table {

    &:focus,
    &.focused {
      & > .table-data > .table-row.selected {
        background-color: @tile-table-default-inverted-selection-background-color;

        &::after {
          border-color: @tile-table-default-inverted-selection-border-color;
        }
      }
    }

    & > .table-header {
      border-bottom-color: @tile-table-default-inverted-border-color;

      & > .table-header-item {
        color: @tile-default-inverted-color;
      }

      & > .table-header-resize {
        background-color: @tile-table-default-inverted-border-color;
      }
    }

    & > .table-data {
      & > .table-row {
        &:active {
          background-color: transparent;
        }

        & > .table-cell {
          color: @tile-default-inverted-color;
          border-bottom-color: @tile-table-default-inverted-border-color;

          & > .font-icon {
            color: @tile-default-inverted-color;
          }
        }
      }
    }

    & > .menubar {
      border-top-color: @tile-table-default-inverted-border-color;

      & > .menubar-box > .menu-item {
        color: @tile-default-inverted-color;
      }
    }
  }

  &.color-alternative.inverted > .table-field > .table {

    &:focus,
    &.focused {
      & > .table-data > .table-row.selected {
        background-color: @tile-table-alternative-inverted-selection-background-color;

        &::after {
          border-color: @tile-table-alternative-inverted-selection-border-color;
        }
      }
    }

    & > .table-header {
      border-bottom-color: @tile-table-default-inverted-border-color;

      & > .table-header-item {
        color: @tile-alternative-inverted-color;
      }

      & > .table-header-resize {
        background-color: @tile-table-default-inverted-border-color;
      }
    }

    & > .table-data {
      & > .table-row {
        &:active {
          background-color: transparent;
        }

        & > .table-cell {
          color: @tile-alternative-inverted-color;
          border-bottom-color: @tile-table-default-inverted-border-color;

          & > .font-icon {
            color: @tile-alternative-inverted-color;
          }
        }
      }
    }

    & > .menubar {
      border-top-color: @tile-table-default-inverted-border-color;

      & > .menubar-box > .menu-item {
        color: @tile-alternative-inverted-color;
      }
    }
  }
}