@eclipse-scout/core/src/tile/TileGrid.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2026 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-grid-loading-transition: opacity @loading-fade-duration;

.tile-grid {
  padding: 6px 0;

  &:focus,
  &.focused {
    outline: none;
  }

  &.scrollable {
    padding-right: 15px;
  }

  &.selectable > .tile * {
    /* Text selection interferes with tile selection (e.g. double click, shift selection) */
    #scout.user-select(none);
  }

  & > .tile {
    transition: @tile-grid-loading-transition;
  }

  &.keyboard-navigation > .tile {
    transition: @tile-grid-loading-transition;

    &.focused::after {
      #scout.pseudo-overlay();
      #scout.focus-inset-box-shadow();
      --focus-box-shadow-size: 3px;
      border-radius: inherit;
    }
  }

  & > .scrollbar {
    opacity: 1;
    transition: @tile-grid-loading-transition;
  }

  &.loading {
    & > .tile,
    & > .scrollbar {
      opacity: 0;
    }

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

  & > .filter-field-container {
    .scrollable& {
      top: calc(~'100% - ' 10px);
      left: 100%;
    }
  }

  &.dragging-element {
    z-index: 0;
  }
}

/* --------------------------------------------------------------------------- */
/* The following CSS classes are used to to read the values from JavaScript,   */
/* see TileGridLayoutConfig.js & TileGridLayoutConfig.java                     */
/* --------------------------------------------------------------------------- */
.tile-grid-layout-config {
  width: 210px;
  height: 155px;
  margin-left: 15px; /* horizontal gap */
  margin-top: 15px; /* vertical gap */
}