org.eclipse.scout.rt.ui.html/src/main/js/scout/popup/Popup.css

/*******************************************************************************
 * Copyright (c) 2014-2015 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
 ******************************************************************************/
.popup {
  position: absolute;
  top: 0px;

  &:focus {
    outline: none;
  }
}

.popup-head {
  position: absolute;
  padding: 0 13px;
  white-space: nowrap;
  background-color: @palette-white;
  border: 1px solid @border-color;
  border-top-width: 0;
  border-bottom-width: 0;
  color: @active-color;

  .popup.down > & {
    padding-top: 3px;
    border-top-width: 1px;
    #scout.drop-shadow();
  }

  .popup.up > & {
    padding-bottom: 3px;
    border-bottom-width: 1px;
    #scout.drop-shadow(@y: -6px;);
  }

  /* Enable submenu FIXME bsh: We should not need to copy/paste this! */
  & > .submenu-icon {
    display: inline-block;
    vertical-align: middle;
    padding-left: 8px;

    &::before {
      #scout.sub-menu-icon(@icon-angle-up);
      top: -2px; /* optically center the arrow icon (see also: mixins.css) */
    }
  }

  & > .font-icon {
    font-size: 18px;
    color: @active-color;
  }

  &.in-main-menubar > .font-icon {
    font-size: 22px;
  }
}

.popup-deco {
  position: absolute;
  height: 1px;
  left: 1px;
  background-color: @palette-white;
}

.popup-body {
  position: relative;
  border: 1px solid @border-color;
  background-color: @palette-white;

  & > .menu-item.context-menu-item-first {
    border-top: 1px solid transparent;
  }

  & > .menu-item.context-menu-item-last {
    border-bottom: 1px solid transparent;
  }

  & > .menu-item.expanded > .submenu-icon::before {
    display: inline-block;
    #scout.transform(rotate(180deg));
  }

  & > .menu-item > .key-box {
    bottom: auto;
    top: 7px;
  }

  &.down  {
    #scout.drop-shadow();

    .popup-head ~ & > .menu-item.context-menu-item-first {

      &.selected {
        border-color: @item-selection-border-color;
      }
    }
  }

  &.up {
    #scout.drop-shadow(@y: -6px;);

    .popup-head ~ & > .menu-item.context-menu-item-last {

      &.selected {
        border-color: @item-selection-border-color;
      }
    }
  }

  & > .menu-item {
    border-top: solid 1px @border-color;
    display: block;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;

    &.selected {
      border-top: 1px solid @item-selection-border-color;
      border-color: @item-selection-border-color;
      background-color: @item-selection-background-color;
      border-color: @item-selection-border-color;
    }

    &.next-to-selected{
      border-top-color: @item-selection-border-color;
    }

    &.selected.context-menu-item-first {
      border-top: 1px solid @item-selection-border-color;
    }

    &.selected.context-menu-item-last {
      border-color: @item-selection-border-color;
    }

    &:focus {
      text-decoration: none;
    }
  }
}

.context-menu > .menu-item {
  height: @menu-item-height;

  & > .text {
    #scout.overflow-ellipsis();
    /* default is inline, inline-block is necessary so that max-width set by JS is respected */
    display: inline-block;
  }

  & > .icon {
    max-height: 16px;
  }

  &.menu-textandicon > .icon {
    padding-right: 10px;
  }
}