@eclipse-scout/core/src/form/fields/groupbox/GroupBox.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
 */
.root-group-box {
  /* necessary if dialog gets really small */
  overflow: hidden;

  & > .group-box-body,
  & > .group-box-header {
    /* group-box-body may be scrollable. */
    /* that's why the body has a padding instead of the root-group-box (to place the scrollbars inside the body) */
    padding-left: @root-group-box-padding-left;
    padding-right: @root-group-box-padding-right;
  }

  & > .group-box-body {
    & > .scrollbar {
      /* override margin reset from group-box-body (see below) */
      #scout.scrollbar-y-padding();
    }
  }
}

.group-box {

  & > .menubar {
    margin-left: @mandatory-indicator-width;
    background-color: inherit;
    #scout.menubar-background-color-inherit;
  }

  &.collapsed > .menubar,
  &.collapsed > .notification,
  &.collapsed > .group-box-body {
    display: none;
  }

  &.has-scroll-shadow-top:not(.menubar-position-top) > .group-box-header {
    width: 100%;
    margin-left: 0;
    padding-left: @mandatory-indicator-width;
  }
}

.root-group-box,
.group-box {
  &.loading {
    & > .loading-indicator {
      #scout.loading-indicator();
    }
  }

  &.right-padding-invisible > .group-box-body {
    padding-right: 0;
  }
}

.group-box-header {
  width: calc(~'100% - ' @mandatory-indicator-width);
  margin-top: @group-box-header-margin-top;
  margin-left: @mandatory-indicator-width;
  position: relative;
  white-space: nowrap;
  margin-bottom: @tab-area-border-width;

  & > .bottom-border {
    // Use element with background color instead of a bottom border to align it with tab box correctly (borders are drawn slightly different when zoomed)
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: -@group-box-header-border-width;
    width: 100%;
    height: @group-box-header-border-width;
    background-color: @border-color;
  }

  &.has-menubar {

    & > .menubar {
      display: inline-flex;
      border: none;
      background-color: transparent;
      vertical-align: middle;
      padding-left: 10px;

      & > .menubar-box > .menu-item {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  & > .group-box-control {
    display: inline-block;
    color: @title-color;
    cursor: pointer;
    padding-left: 10px;
    text-align: center;
    vertical-align: middle;
    width: @group-box-control-width;

    &::before {
      #scout.font-icon();
      font-size: @group-box-control-font-size;
      content: @icon-angle-down-bold;

      .group-box.collapsed > & {
        content: @icon-angle-up-bold;
      }
    }
  }

  & > .title {
    display: inline-block;
    vertical-align: middle;
    padding: @group-box-title-padding-top 0 @group-box-title-padding-bottom 0;
    max-width: 100%;
    margin-top: @text-margin-top;

    .group-box.has-sub-label > & {
      padding-bottom: @group-box-title-with-sub-label-padding-bottom;
    }

    & > .label {
      font-weight: @title-font-weight;
      color: @title-color;
      #scout.overflow-ellipsis();
    }

    & > .sub-label {
      padding-top: 1px;
      font-size: @sub-title-font-size;
      letter-spacing: @sub-title-letter-spacing;
      color: @sub-title-color;
      #scout.overflow-ellipsis();
    }
  }

  & > .status {
    position: absolute;
    margin-left: @field-status-margin-left;
    #scout.status();
  }

  .group-box.has-tooltip > & > .status {
    #scout.tooltip-status();
  }

  .group-box.has-info > & > .status {
    #scout.info-status();
  }

  .group-box.has-ok > & > .status {
    #scout.ok-status();
  }

  .group-box.has-warning > & > .status {
    #scout.warning-status();
  }

  .group-box.has-error > & > .status {
    #scout.error-status();
  }

  &.expandable {
    /* Expansion can also be performed on the title itself */
    cursor: pointer;
  }
}

.group-box-body {
  position: relative;
  padding: @group-box-body-padding-top 0 @group-box-body-padding-bottom 0;

  &.y-padding-invisible {
    padding-top: 0;
    padding-bottom: 0;
  }

  &.x-padding-invisible {
    padding-left: 0;
    padding-right: 0;
  }

  /* position scrollbar as right as possible to prevent overlapping field parts. */

  & > .scrollbar {
    #scout.scrollbar-y-padding(8px, 6px);
  }
}

.group-box.top-padding-invisible > .group-box-body {
  padding-top: 0;
}

.group-box.bottom-padding-invisible > .group-box-body {
  padding-bottom: 0;
}