@eclipse-scout/core/src/form/fields/tabbox/TabBox.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 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
 */

.tab-box-header {
  margin-top: @group-box-header-margin-top;
  margin-left: @mandatory-indicator-width;
  white-space: nowrap;
  position: relative;
  margin-bottom: @tab-area-border-width;

  .tab-box.has-scroll-shadow-top > & {
    margin-left: 0;
    padding-left: @mandatory-indicator-width;
  }

  & > .bottom-border {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: -@tab-area-border-width;
    width: 100%;
    height: @tab-area-border-width;
    background-color: @tab-area-border-color;
  }

  & > .tab-area {
    position: relative;

    & > .selection-marker {
      position: absolute;
      z-index: 1;
      bottom: -1px;
      margin-bottom: -@tab-area-border-width;
      height: @tab-area-selection-marker-height;
      background-color: @tab-item-selection-marker-color;
      transition: left 0.3s, width 0.3s;
      border-radius: @tab-area-selection-marker-height / 2;
    }

    & > .tab-item > .title > .sub-label {
      display: none;
    }

    &.has-sub-label {
      & > .tab-item > .title > .sub-label {
        display: block;
      }
    }

    &.spread-even {
      width: 100%;
      display: flex;

      & > .tab-item {
        flex-grow: 1;
        flex-basis: 0;
        justify-content: center;
      }

      & > .tab-item.first {
        padding-left: @tab-item-padding-x;
      }
    }
  }

  & > .menubar {
    position: absolute;
    #scout.menubar-background-color-inherit();
    border-bottom: none;
  }

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

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

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

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

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

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

.tab-item {
  position: relative;
  display: inline-flex;
  align-items: center; // In case the tab area gets very large (e.g. by large form fields in the menubar in dense mode)
  vertical-align: middle; // Needed to align overflow menu item
  color: @tab-item-color;
  background-color: transparent;
  padding: 0 @tab-item-padding-x;
  cursor: pointer;
  height: 100%; // Ensures the after element is always on the tab box header line (may not be the case on certain zoom levels or if the area is very large, see above)

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: @tab-area-border-width;
    margin-bottom: -@tab-area-border-width;
    display: none;
  }

  &.first {
    padding-left: 0;
  }

  &.overflown {
    display: none;
  }

  &.marked::after {
    display: block;
    background-color: @tab-item-marked-border-color;
  }

  &:hover {
    color: @tab-item-hover-color;
  }

  &:active {
    color: @tab-item-active-color;
  }

  &.selected {
    color: @tab-item-selected-color;
  }

  &:focus {
    outline: none;

    &.keyboard-navigation {
      color: @tab-item-focus-color;
    }
  }

  & > .title {
    display: inline-block;
    vertical-align: middle;
    padding: @tab-item-title-padding-top 0 @tab-item-title-padding-bottom;
    margin-top: @text-margin-top;

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

    & > .label {
      vertical-align: middle;

      // Before element is needed to enlarge the label so that the other tabs won't move when the tab is getting bold because it is selected
      &::before {
        #scout.bold-text-enlarger();
      }

      .selected& {
        font-weight: @title-font-weight;
      }
    }

    & > .sub-label {
      padding-top: 1px;
      font-size: @sub-title-font-size;
      letter-spacing: @sub-title-letter-spacing;
      color: @sub-title-color;
    }
  }

  & > .status {
    display: inline-block;
    vertical-align: middle;
    margin-left: @field-status-margin-left;
    #scout.status();
  }

  &.has-tooltip,
  &.has-info,
  &.has-warning,
  &.has-ok,
  &.has-error {
    padding-right: @field-status-margin-left;
  }

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

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

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

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

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

.overflow-tab-item.menu-item {
  vertical-align: middle;
  color: @tab-item-color;

  &::before {
    display: none;
  }

  & > .submenu-icon {
    padding-left: 4px;
  }
}