eclipse-scout-core/src/menu/Menu.less

/*
 * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 */
.menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  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.box-shadow-focus-transition();

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

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

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

  &.menu-textandicon > .icon {
    margin-right: 8px;
  }

  & > .text {
    #scout.overflow-ellipsis-nowrap();
  }

  & > .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;
    }
  }

  & > svg.icon {
    fill: currentColor;
    height: 16px;

    &.stroke,
    &.stroke .st0,
    &.stroke .st1 {
      stroke: currentColor;
    }
  }

  &.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;
      }
    }
  }
}

.menu-button {
  .button();
}