@eclipse-scout/core/src/form/fields/splitbox/SplitBox.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
 */
@split-box-x-splitter-size: @split-box-splitter-line-size + (2 * @split-box-x-splitter-padding) - @mandatory-indicator-width;
@split-box-y-splitter-size: @split-box-splitter-line-size + (2 * @split-box-y-splitter-padding);

.split-box {

  & > .split-area {
    @temp-splitter-line-size: 1px;

    & > .first-field,
    & > .second-field {
      position: absolute;
      #scout.overflow-clip();
      // Ensure focus border of elements inside the field is always visible
      // Use @split-box-y-splitter-padding instead of (@focus-box-shadow-size to remove whitespace between splitter and field completely, at least for y splitter
      overflow-clip-margin: @split-box-y-splitter-padding;

      &.collapsed {
        display: none;
      }
    }

    & > .splitter {
      position: absolute;
      background-color: @border-color;
      background-clip: content-box; /* don't color padding */

      &:not(.disabled):not(.dragging):hover {
        background-color: @hover-color;
      }

      // "|"
      &.x-axis {
        height: 100%;
        width: @split-box-x-splitter-size;
        padding-left: @split-box-x-splitter-padding;
        padding-right: (@split-box-x-splitter-padding - @mandatory-indicator-width);
        cursor: col-resize;
      }

      // "--"
      &.y-axis {
        margin-left: @mandatory-indicator-width;
        width: calc(~'100% - ' @mandatory-indicator-width);
        height: @split-box-y-splitter-size;
        padding-top: @split-box-y-splitter-padding;
        padding-bottom: @split-box-y-splitter-padding;
        cursor: row-resize;
      }

      &.dragging {
        opacity: 0.25;
      }

      &.disabled {
        cursor: default;
      }
    }

    // used while dragging
    & > .temp-splitter {
      position: absolute;
      z-index: 2;

      // "|"
      &.x-axis {
        height: 100%;
        width: @temp-splitter-line-size;
        border-left: @temp-splitter-line-size dashed @focus-border-color;
        margin-left: @split-box-x-splitter-padding + ceil((@split-box-splitter-line-size - @temp-splitter-line-size) / 2);
        margin-right: @split-box-x-splitter-padding + floor((@split-box-splitter-line-size - @temp-splitter-line-size) / 2) - @mandatory-indicator-width;
      }

      // "--"
      &.y-axis {
        margin-left: @mandatory-indicator-width;
        width: calc(~'100% - ' @mandatory-indicator-width);
        height: @temp-splitter-line-size;
        border-top: @temp-splitter-line-size dashed @focus-border-color;
        margin-top: @split-box-y-splitter-padding + ceil((@split-box-splitter-line-size - @temp-splitter-line-size) / 2);
        margin-bottom: @split-box-y-splitter-padding + floor((@split-box-splitter-line-size - @temp-splitter-line-size) / 2);
      }
    }
  }

  & > .collapse-handle.right-aligned {
    /* align with status icons */
    right: 3px;
  }

  // CSS Class 'invisible-splitter' can be added to make the splitter invisible but still draggable.
  // This is useful if the splitter itself should be visualized in another way, e.g. by using one of the fields border.
  &.invisible-splitter > .split-area {
    & > .splitter {
      opacity: 0;
    }

    & > .splitter.x-axis {
      width: 16px;
      margin-left: -8px;
      padding-left: 0;
      padding-right: 0;
      opacity: 0;
    }

    & > .temp-splitter.x-axis {
      margin-left: 8px;
    }

    & > .splitter.y-axis {
      height: 16px;
      margin-top: -8px;
      padding-top: 0;
      padding-bottom: 0;
    }

    & > .temp-splitter.y-axis {
      margin-top: 8px;
    }
  }
}

.split-box-collapse-key-box {
  margin-top: -6px;
  margin-left: 4px;

  &.left {
    margin-top: 6px;
    margin-left: 4px;
  }

  &.right {
    margin-top: 6px;
    margin-left: -4px;
  }
}

// If splitter is visible (= there are two fields), make room for it by adding a margin to the first field
.split-box:not(.single-field):not(.second-field-collapsed) > .split-area > .first-field {

  // "|"
  &.x-axis {
    margin-right: @split-box-x-splitter-size;
  }

  // "--"
  &.y-axis {
    margin-bottom: @split-box-y-splitter-size;
  }
}