@eclipse-scout/core/src/tile/Tile.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
 */
@move-support-drag-placeholder-background-color: @background-color;
@move-support-drag-placeholder-border-color: @palette-blue-3;

.tile {
  // Tile should be invisible until it has the correct position, otherwise it might be visible in the top left corner in the time between rendering and layouting
  &.newly-rendered,
    // Use a dedicated invisible class for the insert operation to not get in a mess with the invisible class from the tile.visible state
  &.before-animate-insert {
    .invisible();
  }

  &.animate-visible {
    #scout.animation-name(fadein-grow);
    #scout.animation-duration(0.4s);
  }

  &.animate-invisible {
    #scout.animation-name(fadeout-shrink);
    #scout.animation-duration(0.3s);
    #scout.animation-fill-mode(forwards);
  }

  &.animate-insert {
    #scout.animation-name(fadein-zoom-bounce);
    #scout.animation-duration(0.4s);
  }

  &.animate-remove {
    #scout.animation-name(fadeout-shrink-blur);
    #scout.animation-duration(0.2s);
    #scout.animation-fill-mode(forwards);
  }

  #scout.move-support();

  &.dragover {
    filter: brightness(0.8);
  }

  &.dragged.releasing {
    // Remove opacity transition added by releasing class in MoveSupport.less to make dragged tile invisible immediately while the clone will be moved to the target position.
    transition: none;
  }

  // The class is added when dragging is finished and original state restored right before dragged and releasing classes are removed.
  // The class will be removed about 100ms later and is used to disable the opacity transition added by TileGrid.less.
  // This ensures the dragged element does not flicker when shown again.
  &.drag-done {
    transition: none !important;
  }
}

/* The default class is added if displayStyle is set to DEFAULT. If it is set to PLAIN no class will be added. */
.default-tile {
  background-color: @tile-background-color;
  border: 1px solid @tile-border-color;
  padding: @tile-padding-y @tile-padding-x;

  &.selectable:active:not(.selected),
  &.selectable.active:not(.selected) {
    background-color: @tile-active-background-color;
  }

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