material-ui/src/less/components/menu.less

Material Design UI components built with React

.mui-menu {

  * { .ease-out; }

  background-color: @menu-background-color;

  &.mui-menu-hideable {
    .lh-opacity(0);
    position: absolute;
    top: 0;
    z-index: 1;

    .mui-paper-container {
      overflow: hidden;
      padding: 0;
    }

    &.mui-visible {
      & > .mui-paper-container {
        padding-top: @desktop-gutter-mini;
        padding-bottom: @desktop-gutter-mini;
      }
    }
  }

  .mui-paper-container {
    background-color: @menu-container-background-color;
    padding-top: @desktop-gutter-mini;
    padding-bottom: @desktop-gutter-mini;
  }

  .mui-subheader {
    padding-left: @menu-subheader-padding;
    padding-right: @menu-subheader-padding;
  }

  .mui-menu-item {
    .ease-out(@duration: 200ms, @property: background-color);
    cursor: pointer;
    line-height: @menu-item-height;
    padding-left: @menu-item-padding;
    padding-right: @menu-item-padding;
    background-color: fade(@menu-item-hover-color, 0%);

     * {
      .lh-user-select(none);
     }
    
    //needed for ripple
    position: relative;
    overflow: hidden;

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

    .mui-ripple {
      &.mui-show {
        .ripple-click-alt('menu-item-ripple-animation', darken(@white, 20%), 250px);
      }
    }

    .mui-menu-item-number {
      float: right;
      width: 24px;
      text-align: center;
    }

    .mui-menu-item-attribute {
      float: right;
    }

    .mui-menu-item-icon-right {
      line-height: @menu-item-height;
      float: right;
    }

    .mui-menu-item-icon {
      float: left;
      line-height: @menu-item-height;
      margin-right: @desktop-gutter;
    }

    .mui-menu-item-data {
      display: block;
      padding-left: (@desktop-gutter * 2);
      line-height: @menu-item-data-height;
      height: @menu-item-data-height;
      vertical-align: top;
      top: -12px;
      position: relative;
      .mui-font-weight-light;
    }

    .mui-icon-arrow-drop-right {
      margin-right: (@desktop-gutter-mini * -1);
      color: @drop-down-menu-icon-color;
    }

    .mui-toggle {
      margin-top: ((@menu-item-height - @radio-button-size) / 2);
      float: right;
    }

    &.mui-selected {
      color: @menu-item-selected-text-color;
    }
  }

  .mui-nested-menu-item {
    position: relative;

    &.mui-open {
      & > .mui-menu {
        .lh-opacity(1);
      }
    }
  }
}