@eclipse-scout/core/src/desktop/viewbutton/ViewMenuTab.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
 */
.view-menu-tab {
  display: flex;
  background-color: @view-menu-tab-background-color;
  flex-shrink: 0;

  & > .view-button,
  & > .view-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;

    &:hover {
      background-color: @view-menu-tab-hover-background-color;
      color: inherit;
    }

    &.disabled {
      color: @desktop-header-disabled-color;
      background-color: transparent;
      cursor: default;
    }

    .animate-bring-to-front&,
    .animate-bring-to-back& {
      transition: @view-tab-transition;
    }
  }

  & > .view-button {
    border-top-left-radius: @view-tab-border-radius;
    border-bottom-left-radius: @view-tab-border-radius;
    width: @view-tab-selected-width - @view-tab-margin;

    & > .icon {
      font-size: 26px;
    }
  }

  & > .view-menu {
    position: relative;
    border-top-right-radius: @view-tab-border-radius;
    border-bottom-right-radius: @view-tab-border-radius;
    width: @view-tab-selected-width - @view-tab-margin * 2;

    .selected-button-invisible& {
      border-radius: @view-tab-border-radius;
    }

    & > .icon {
      font-size: 24px;
    }

    &::before {
      content: '';
      position: absolute;
      height: 100%;
      border-left: 1px solid @desktop-header-background-color;
      left: 0;

      .selected-button-invisible& {
        display: none
      }
    }

    &.selected {
      background-color: @view-menu-tab-menu-selected-background-color;
    }
  }

  &.in-background {
    & > .view-button {
      border-top-left-radius: @view-tab-selected-border-radius;
      border-bottom-left-radius: @view-tab-selected-border-radius;
    }

    & > .view-menu {
      border-top-right-radius: @view-tab-selected-border-radius;
      border-bottom-right-radius: @view-tab-selected-border-radius;

      .selected-button-invisible& {
        border-radius: @view-tab-selected-border-radius;
      }
    }
  }

  &.selected {
    color: @view-tab-selected-color;
    background-color: @view-tab-selected-background-color;

    & > .view-button,
    & > .view-menu {
      &.selected,
      &:hover {
        background-color: transparent;
      }

      &.disabled {
        color: @text-disabled-color;
      }
    }

    & > .view-menu {
      width: @view-tab-selected-width - @view-tab-margin * 2;

      & > .icon {
        font-size: 26px;
        padding: 7px;
        border-radius: 8px;
      }

      &:hover > .icon {
        background-color: @hover-background-color;
      }

      &.disabled > .icon {
        background-color: transparent;
      }

      &.selected > .icon {
        background-color: @view-menu-tab-selected-menu-selected-background-color;
      }

      &::before {
        top: 10px;
        height: calc(100% - 20px);
        border-color: @border-color;
      }
    }

    &.in-background {
      background-color: @view-tab-in-background-selected-background-color;

      & > .view-menu {
        & > .icon {
          padding-top: 2px;
          padding-bottom: 2px;
        }
      }
    }

    &:not(.in-background) {
      border-top-left-radius: 0;
      margin-left: 0;
      margin-right: @view-tab-margin;

      & > .view-button {
        padding-left: @view-tab-margin;
        width: @view-tab-selected-width;
        cursor: default;
      }

      .selected-button-invisible& > .view-menu {
        width: @view-tab-selected-width - @view-tab-margin;
      }
    }
  }
}