@eclipse-scout/core/src/menu/menubar/MenuBar.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
 */
/* Mixins */

#scout {
  .main-menubar-background-color-standard() {
    background-color: @main-menubar-background-color;
  }

  .menubar-background-color-inherit() {
    background-color: inherit;
  }

  /* standard main-menubar */
  .main-menubar-standard() {
    #scout.main-menubar-background-color-standard();
    min-height: @main-menubar-height;
    margin-left: inherit;
    margin-right: inherit;
  }

  /* a transparent main-menubar */
  .main-menubar-light() {
    #scout.menubar-background-color-inherit();
  }
}

/* Styles */

.menubar {
  position: relative;
  display: flex;
  width: 100%;
  background-color: @menubar-background-color;
  border-bottom: 1px solid @border-color;

  &.bottom {
    border-bottom: 0;
    border-top: 1px solid @border-color;
  }

  // Class can be added to containers having a menubar to hide the separators
  .no-menubar-separators > & > .menubar-box > .menu-separator {
    display: none;
  }
}

.menubar-box {
  display: inline-flex;
  height: 100%;
  align-items: center;

  &.right {
    margin-left: auto;
  }

  & > .menu-separator {
    width: 1px;
    margin: 0 @menu-item-padding-x;
    background-color: @border-color;
    height: 15px;

    &.overflown {
      display: none;
    }
  }

  & > .menu-item {
    margin: @menubar-item-margin-y @menubar-item-margin-x;
    /* By making sure menu items are always at least the same height as form fields, it is easier to align them with each other, especially when zoomed */
    min-height: @logical-grid-row-height;

    &.menu-icononly {
      margin-left: @menubar-item-icononly-margin-x;
      margin-right: @menubar-item-icononly-margin-x;
      min-width: @logical-grid-row-height; // Make it square
    }

    &.overflown {
      display: none;
    }

    &.first {
      margin-left: 0;
    }

    &.last {
      margin-right: 0;
    }
  }

  & > .menu-button {
    min-width: 110px;
    margin: @menubar-button-margin;

    &.small {
      min-width: 53px;
    }
  }

  /* If the menubar has a border left and right, the first and last items need to be adjusted */

  .bounded > & > .menu-item {
    &.first {
      margin-left: @menubar-item-margin-y;
    }

    &.last {
      margin-right: @menubar-item-margin-y;
    }
  }
}

.main-menubar {
  #scout.main-menubar-standard;

  & > .menubar-box {

    & > .menu-separator {
      height: @logical-grid-row-height - 12px;
    }

    & > .menu-item {
      margin-left: @main-menubar-item-margin-x;
      margin-right: @main-menubar-item-margin-x;

      &.first {
        margin-left: @main-menubar-first-menu-item-margin-left;
      }

      &.last {
        margin-right: @main-menubar-last-menu-item-margin-right;
      }

      &.menu-icononly {
        margin-left: @menubar-item-icononly-margin-x;
        margin-right: @menubar-item-icononly-margin-x;

        &.first {
          margin-left: @main-menubar-first-menu-item-icononly-margin-left;
        }

        &.last {
          margin-right: @main-menubar-last-menu-item-icononly-margin-right;
        }
      }
    }

    & > .menu-button {
      &.first,
      &.first.menu-icononly {
        margin-left: @bench-padding-x;
      }

      &.last,
      &.last.menu-icononly {
        margin-right: @bench-padding-x;
      }
    }
  }
}