Angular Material UX

[FirstVertex]

Hi, I have previewed ngx-contextmenu library but this does not match our app's styling which is implemented with Angular Material

Is there any stylesheet available which will make the UI match the mat-menu

I need to match the colors, typography, borders, shadowing, and animation behaviors like open/close and ripple effect on click.

Thank you in advance.

[isaacplmann]

I'm using ngx-contextmenu in an material app too. These are the styles I'm using. You may need to tweak them to fit your app.

.ngx-contextmenu {
  > ul {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    margin: 0;
    padding: 0;
  }
  li {
    display: block;
    line-height: 48px;
    height: 48px;
  }
  a.hasSubMenu:before {
    padding: 0em 0.5em;
    content: '►';
  }
  .hasSubMenu:after {
    margin-left: 0.7em;
    margin-right: -0.7em;
  }
  a {
    text-decoration: none;
    display: inline-block;
    height: 100%;
    padding: 0px 20px;
    color: inherit;
  }
  span.passive {
    padding: 0 20px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
}
.context-menu__icon {
  vertical-align: text-bottom;
  height: 20px;
  width: 20px;
  line-height: 20px;
  margin-right: 5px;
}

[isaacplmann]

If you're using your own custom themes, you'll probably want to include this mixin too:

@mixin context-menu-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .ngx-contextmenu {
    > ul {
      background: mat-color($background, 'card');
    }
    li {
      color: mat-color($foreground, 'text');
      &.active:not(.disabled),
      &:hover:not(.disabled) {
        background: mat-color($background, 'hover');
      }
      &.disabled {
        color: mat-color($foreground, 'disabled');
      }
    }
    .mat-icon {
      color: inherit;
    }
    .passive {
      background: mat-color($background, 'disabled-button');
      border-color: mat-color($foreground, divider);
    }
  }
}