@eclipse-scout/core/src/menu/Menu.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
 */
.menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; // In case a min-width is set
  color: @menu-item-color;
  cursor: pointer;
  padding: @menu-item-padding-y @menu-item-padding-x;
  border-radius: @border-radius;

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

  & > .key-box {
    bottom: -3px;
  }

  &:hover {
    color: @hover-color;
    background-color: @hover-background-color;
  }

  &:active, &.active {
    background-color: @active-background-color;
  }

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

    &:hover {
      background-color: @selected-hover-background-color;
    }

    &.active, &:active {
      background-color: @selected-active-background-color;
    }

    &.has-popup {
      color: @menu-item-color;
      background-color: @selected-with-popup-background-color;
    }
  }

  #scout.focus-box-shadow-transition();

  &:focus {
    #scout.focus-inset-box-shadow();
  }

  &.disabled {
    color: @menu-item-disabled-color;
    background-color: transparent;
    cursor: default;

    &:hover, &.active, &:active {
      background-color: transparent;
    }

    &.selected {
      color: @selected-color;
      background-color: @selected-disabled-background-color;

      &.has-popup {
        color: @menu-item-disabled-color;
        background-color: @selected-with-popup-background-color;
      }
    }
  }

  &.menu-textandicon > .icon {
    margin-right: @menu-item-icon-margin-right;
  }

  & > .text {
    #scout.overflow-ellipsis-nowrap();
    margin-top: @text-margin-top;
  }

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

  & > .image-icon {
    /* Prevent large image icons from overlapping the menu item */
    max-height: @menu-item-max-image-icon-height;
    /* Ensure the default image icon size is taken from the beginning, so that the text does not "jump" when */
    /* the image loading is complete. (For larger icons, the width will be increased afterwards.) */
    min-width: @menu-item-min-image-icon-width;
  }

  & > .icon {

    &.with-label {
      margin-right: 8px;
    }
  }

  &.disabled > .icon.image-icon {
    #scout.vendor(filter, grayscale(100%));
    opacity: 0.5;
  }

  & > .submenu-icon,
  & > .text > .submenu-icon {
    #scout.submenu-icon();
    padding-left: 8px;

    .menu-icononly& {
      padding-left: 0;
    }

    .selected& {
      #scout.submenu-icon-open();
    }
  }

  &.bottom-text.menu-textandicon {
    flex-direction: column;

    & > .icon {
      display: block;
      margin-right: 0; // reset
      padding-bottom: 3px;
    }

    & > .text {
      display: flex;
      align-items: center;
      font-size: @font-size-extra-small;

      & > .submenu-icon {
        font-size: 12px;
        padding-left: 4px;
        // Make sure the icon does not increase the height and therefore the whole menu
        line-height: 0;
      }
    }
  }

  &.loading {
    .action.loading();
  }
}

.menu-button {
  .button();
}