@syncfusion/ej2-material-theme/styles/drop-down-button/drop-down-button-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-dropdown-btn .e-caret::before,
.e-dropdown-btn.e-btn .e-caret::before {
  content: "\e969";
}
.e-dropdown-btn,
.e-dropdown-btn.e-btn {
  box-shadow: none;
  text-transform: none;
  white-space: normal;
}
.e-dropdown-btn:hover,
.e-dropdown-btn.e-btn:hover {
  box-shadow: none;
}
.e-dropdown-btn:focus,
.e-dropdown-btn.e-btn:focus {
  box-shadow: none;
}
.e-dropdown-btn:active,
.e-dropdown-btn.e-btn:active {
  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-dropdown-btn .e-btn-icon,
.e-dropdown-btn.e-btn .e-btn-icon {
  font-size: 14px;
}
.e-dropdown-btn .e-caret,
.e-dropdown-btn.e-btn .e-caret {
  font-size: 14px;
}
.e-dropdown-btn.e-vertical,
.e-dropdown-btn.e-btn.e-vertical {
  line-height: 1;
  padding: 12px 12px;
}
.e-dropdown-btn.e-caret-hide .e-caret,
.e-dropdown-btn.e-btn.e-caret-hide .e-caret {
  display: none;
}
.e-dropdown-btn.e-small .e-dropdown-popup ul,
.e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul {
  padding: 8px 0;
}
.e-dropdown-btn.e-small .e-dropdown-popup ul .e-item,
.e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul .e-item {
  padding: 0 16px;
}
.e-dropdown-btn.e-small.e-vertical,
.e-dropdown-btn.e-btn.e-small.e-vertical {
  line-height: 1;
  padding: 12px 12px;
}
.e-dropdown-btn.e-small .e-btn-icon,
.e-dropdown-btn.e-btn.e-small .e-btn-icon {
  font-size: 12px;
}
.e-dropdown-btn.e-small .e-btn-icon.e-caret,
.e-dropdown-btn.e-btn.e-small .e-btn-icon.e-caret {
  font-size: 12px;
}
.e-dropdown-popup {
  position: absolute;
}
.e-dropdown-popup ul {
  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);
  box-sizing: border-box;
  font-size: 14px;
  font-weight: normal;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  min-width: 120px;
  overflow: hidden;
  padding: 8px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.e-dropdown-popup ul .e-item {
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
}
.e-dropdown-popup ul .e-item.e-separator {
  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
}
.e-dropdown-popup ul .e-item.e-url {
  padding: 0;
}
.e-dropdown-popup ul .e-item .e-menu-url {
  display: block;
  padding: 0 16px;
  text-decoration: none;
  width: 100%;
}
.e-dropdown-popup ul .e-item .e-menu-icon {
  float: left;
  font-size: 14px;
  line-height: 36px;
  margin-right: 10px;
  vertical-align: middle;
  width: 1em;
}
.e-dropdown-popup ul .e-item.e-disabled {
  cursor: auto;
  pointer-events: none;
}
.e-dropdown-popup ul .e-item.e-separator {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  cursor: auto;
  height: auto;
  line-height: normal;
  margin: 8px 0;
  pointer-events: none;
}
.e-dropdown-popup.e-transparent {
  background: transparent;
  box-shadow: none;
}
.e-dropdown-popup.e-transparent .e-dropdown-menu {
  border: 0;
  height: 1px;
  min-width: 0;
  padding: 0;
  width: 1px;
}
.e-dropdown-popup.e-hidden {
  display: none !important; /* stylelint-disable-line declaration-no-important */
}
.e-rtl.e-dropdown-popup .e-item .e-menu-icon {
  float: right;
  margin-left: 10px;
  margin-right: 0;
}
.e-dropdown-popup-width ul {
  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
}
.e-dropdown-popup-width ul li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block !important; /* stylelint-disable-line declaration-no-important */
}
.e-dropdown-popup {
  background: #fff;
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-item .e-menu-url {
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-item .e-menu-icon {
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-item.e-focused {
  background: #e0e0e0;
  box-shadow: none;
}
.e-dropdown-popup ul .e-item:hover {
  background: #e0e0e0;
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected {
  background: #bdbdbd;
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url {
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon {
  color: rgba(0, 0, 0, 0.87);
}
.e-dropdown-popup ul .e-separator {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
.e-dropdown-btn.e-inherit,
.e-dropdown-btn.e-btn.e-inherit {
  background: inherit;
  border-color: transparent;
  box-shadow: none;
  color: inherit;
}
.e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
.e-dropdown-btn.e-btn.e-inherit:hover,
.e-dropdown-btn.e-btn.e-inherit:focus,
.e-dropdown-btn.e-btn.e-inherit:active,
.e-dropdown-btn.e-btn.e-inherit.e-active {
  background: rgba(0, 0, 0, 0.056);
  border-color: transparent;
  box-shadow: none;
  color: inherit;
}