@eclipse-scout/core/src/form/fields/treefield/TreeField.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
 */
.tree-field {
  &.alternative > label.top { /* NOSONAR overqualify by purpose to make it more specific than default rule in FormField.less */
    padding-bottom: @top-label-border-padding-bottom;
  }

  & > .tree {
    border: 1px solid @control-border-color;
    border-radius: @control-border-radius;
    background-color: @control-background-color;
    overflow: hidden; /* necessary due to rounded borders and background color*/

    &.alternative {
      border-radius: @control-alternative-border-radius;
    }

    .tree-field-no-nodes-selected-focus();
  }
}

// Mixin for focus border
// The variables --tree-focus-* allow to change the color of the focus shadow and border of the tree only, not the one of the menu items or filter
.tree-field-no-nodes-selected-focus {
  &.no-nodes-selected:not(.nodes-focusable):has(.tree-data:is(:focus, .focused):not(.keyboard-navigation)) {
    // If nodes are selected or node-focus is visible the focus is already visualized.
    // Otherwise, show focus border on whole tree field when clicking or on programmatic focus and not on the node itself because it looks cleaner
    #scout.focus-border(var(--tree-focus-box-shadow-size, @focus-box-shadow-size), var(--tree-focus-box-shadow-color, @focus-box-shadow-color), var(--tree-focus-border-color, @focus-border-color));
  }

  &.has-error {
    border-color: @error-border-color;
    --tree-focus-border-color: @error-border-color;
    --tree-focus-box-shadow-color: @error-focus-box-shadow-color;
  }
}