@syncfusion/ej2-material-theme/styles/context-menu/context-menu-lite.css

A modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies.

.e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
.e-contextmenu-container ul .e-menu-item .e-previous::before {
  content: "\e977";
}
.e-contextmenu-wrapper ul .e-menu-item .e-caret::before,
.e-contextmenu-container ul .e-menu-item .e-caret::before {
  content: "\e956";
}
.e-rtl.e-contextmenu-wrapper .e-menu-item .e-caret::before,
.e-rtl.e-contextmenu-container .e-menu-item .e-caret::before {
  content: "\e937";
}
.e-contextmenu-wrapper ul,
.e-contextmenu-container ul {
  font-weight: normal;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.e-contextmenu-wrapper ul.e-ul, .e-contextmenu-wrapper ul.e-ul *,
.e-contextmenu-container ul.e-ul,
.e-contextmenu-container ul.e-ul * {
  box-sizing: border-box;
}
.e-contextmenu-wrapper ul.e-ul:focus, .e-contextmenu-wrapper ul.e-ul *:focus,
.e-contextmenu-container ul.e-ul:focus,
.e-contextmenu-container ul.e-ul *:focus {
  outline: none;
}
.e-contextmenu-wrapper ul,
.e-contextmenu-container ul {
  font-size: 14px;
  padding: 0;
  border: none;
  border-radius: 0;
  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);
  display: none;
  min-width: 120px;
  position: absolute;
}
.e-contextmenu-wrapper ul.e-contextmenu,
.e-contextmenu-container ul.e-contextmenu {
  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);
}
.e-contextmenu-wrapper ul.e-contextmenu.e-contextmenu-template .e-menu-caret-icon,
.e-contextmenu-container ul.e-contextmenu.e-contextmenu-template .e-menu-caret-icon {
  display: -ms-flexbox;
  display: flex;
}
.e-contextmenu-wrapper ul.e-ul,
.e-contextmenu-container ul.e-ul {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
}
.e-contextmenu-wrapper ul .e-menu-item,
.e-contextmenu-container ul .e-menu-item {
  cursor: pointer;
  position: relative;
}
.e-contextmenu-wrapper ul .e-menu-item.e-menu-hide,
.e-contextmenu-container ul .e-menu-item.e-menu-hide {
  display: none;
}
.e-contextmenu-wrapper ul .e-menu-item.e-menu-header,
.e-contextmenu-container ul .e-menu-item.e-menu-header {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
.e-contextmenu-container ul .e-menu-item .e-menu-url {
  text-decoration: none;
}
.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
.e-contextmenu-container ul .e-menu-item .e-menu-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.e-contextmenu-wrapper ul .e-menu-item.e-separator,
.e-contextmenu-container ul .e-menu-item.e-separator {
  cursor: auto;
  line-height: normal;
  pointer-events: none;
}
.e-contextmenu-wrapper ul .e-menu-item,
.e-contextmenu-container ul .e-menu-item {
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
}
.e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
.e-contextmenu-container ul .e-menu-item .e-menu-url {
  display: inline-block;
  min-width: 120px;
}
.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
.e-contextmenu-container ul .e-menu-item .e-menu-icon {
  font-size: 14px;
  line-height: 36px;
  margin-right: 10px;
  width: 1em;
}
.e-contextmenu-wrapper ul .e-menu-item .e-caret,
.e-contextmenu-container ul .e-menu-item .e-caret {
  line-height: 36px;
  margin-left: 16px;
  margin-right: 0;
  position: absolute;
  right: 8px;
}
.e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
.e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
  padding-right: 36px;
}
.e-contextmenu-wrapper ul .e-menu-item.e-separator,
.e-contextmenu-container ul .e-menu-item.e-separator {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  height: auto;
  margin: 8px 0;
}
.e-contextmenu-wrapper ul .e-menu-item .e-caret,
.e-contextmenu-container ul .e-menu-item .e-caret {
  font-size: 11px;
}
.e-contextmenu-wrapper ul .e-menu-item .e-previous,
.e-contextmenu-container ul .e-menu-item .e-previous {
  margin-right: 16px;
}
.e-contextmenu-wrapper ul .e-menu-item.e-disabled,
.e-contextmenu-container ul .e-menu-item.e-disabled {
  cursor: auto;
  pointer-events: none;
}
.e-contextmenu-wrapper ul .e-menu-item .e-checkbox-wrapper,
.e-contextmenu-container ul .e-menu-item .e-checkbox-wrapper {
  width: -moz-max-content;
  width: max-content;
}
.e-contextmenu-wrapper.e-sfcontextmenu,
.e-contextmenu-container.e-sfcontextmenu {
  position: absolute;
}
.e-contextmenu-wrapper.e-sfcontextmenu .e-menu-vscroll,
.e-contextmenu-container.e-sfcontextmenu .e-menu-vscroll {
  position: absolute;
}
.e-contextmenu-wrapper.e-sfcontextmenu ul,
.e-contextmenu-container.e-sfcontextmenu ul {
  white-space: nowrap;
}
.e-contextmenu-wrapper.e-sfcontextmenu ul.e-transparent,
.e-contextmenu-container.e-sfcontextmenu ul.e-transparent {
  background: transparent;
  border: 0;
  box-shadow: none;
  height: 1px;
  left: 0;
  min-width: 0;
  padding: 0;
  top: 0;
  width: 0;
}
.e-contextmenu-wrapper.e-sfcontextmenu ul.e-transparent .e-menu-item,
.e-contextmenu-container.e-sfcontextmenu ul.e-transparent .e-menu-item {
  height: 0;
  padding: 0;
}
.e-contextmenu-wrapper.e-sfcontextmenu ul.e-transparent .e-menu-item.e-separator,
.e-contextmenu-container.e-sfcontextmenu ul.e-transparent .e-menu-item.e-separator {
  border: 0;
  margin: 0;
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
  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);
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar,
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-vscroll-bar {
  height: 100%;
  width: inherit;
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
  height: 16px;
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device),
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll:not(.e-scroll-device) {
  padding: 16px 0;
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul,
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll ul {
  box-shadow: none;
  margin-top: -12px;
  width: inherit;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
.e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
  margin-right: 0;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item .e-caret,
.e-rtl.e-contextmenu-container .e-menu-item .e-caret {
  margin-left: 0;
  margin-right: 16px;
  right: auto;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item .e-menu-icon,
.e-rtl.e-contextmenu-container .e-menu-item .e-menu-icon {
  margin-left: 10px;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item .e-caret,
.e-rtl.e-contextmenu-container .e-menu-item .e-caret {
  left: 8px;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item.e-menu-caret-icon,
.e-rtl.e-contextmenu-container .e-menu-item.e-menu-caret-icon {
  padding-left: 36px;
  padding-right: 16px;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon,
.e-rtl.e-contextmenu-container .e-menu-item.e-blankicon {
  padding-left: 16px;
}
.e-rtl.e-contextmenu-wrapper .e-menu-item.e-blankicon.e-menu-caret-icon,
.e-rtl.e-contextmenu-container .e-menu-item.e-blankicon.e-menu-caret-icon {
  padding-left: 36px;
}
.e-contextmenu-wrapper .e-menu-item:not(.e-control),
.e-contextmenu-container .e-menu-item:not(.e-control) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e-contextmenu-wrapper ul,
.e-contextmenu-container ul {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
}
.e-contextmenu-wrapper ul .e-menu-item.e-menu-header,
.e-contextmenu-container ul .e-menu-item.e-menu-header {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
.e-contextmenu-wrapper ul .e-menu-item .e-caret,
.e-contextmenu-container ul .e-menu-item .e-caret {
  color: rgba(0, 0, 0, 0.54);
}
.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
.e-contextmenu-container ul .e-menu-item .e-menu-icon {
  color: rgba(0, 0, 0, 0.54);
}
.e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
.e-contextmenu-container ul .e-menu-item .e-menu-url {
  color: rgba(0, 0, 0, 0.87);
}
.e-contextmenu-wrapper ul .e-menu-item.e-focused,
.e-contextmenu-container ul .e-menu-item.e-focused {
  background-color: #eee;
  color: rgba(0, 0, 0, 0.87);
  outline: 0 solid rgba(0, 0, 0, 0.12);
  outline-offset: 0;
}
.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-caret,
.e-contextmenu-container ul .e-menu-item.e-focused .e-caret {
  color: rgba(0, 0, 0, 0.54);
}
.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
.e-contextmenu-container ul .e-menu-item.e-focused .e-menu-icon {
  color: rgba(0, 0, 0, 0.54);
}
.e-contextmenu-wrapper ul .e-menu-item.e-selected,
.e-contextmenu-container ul .e-menu-item.e-selected {
  background-color: #eee;
  color: rgba(0, 0, 0, 0.87);
  outline: 0 solid #eee;
  outline-offset: 0;
}
.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
.e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
  color: rgba(0, 0, 0, 0.54);
}
.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
.e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
  color: rgba(0, 0, 0, 0.54);
}
.e-contextmenu-wrapper ul .e-disabled,
.e-contextmenu-container ul .e-disabled {
  color: rgba(0, 0, 0, 0.38);
  opacity: 1;
}
.e-contextmenu-wrapper ul .e-disabled .e-menu-icon,
.e-contextmenu-container ul .e-disabled .e-menu-icon {
  color: rgba(0, 0, 0, 0.38);
}
.e-contextmenu-wrapper ul .e-disabled .e-caret,
.e-contextmenu-container ul .e-disabled .e-caret {
  color: rgba(0, 0, 0, 0.38);
}
.e-contextmenu-wrapper ul .e-disabled .e-menu-url,
.e-contextmenu-container ul .e-disabled .e-menu-url {
  color: rgba(0, 0, 0, 0.38);
}
.e-contextmenu-wrapper ul .e-separator,
.e-contextmenu-container ul .e-separator {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll,
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll {
  background-color: #fff;
  border: none;
}
.e-contextmenu-wrapper:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav,
.e-contextmenu-container:not(.e-menu-container) .e-menu-vscroll.e-vscroll .e-scroll-nav {
  border-color: rgba(0, 0, 0, 0.12);
}