@limetech/lime-elements/dist/collection/components/menu/menu.css

Lime Elements

/*
* This file is imported into every component!
*
* Nothing in this file may output any CSS
* without being explicitly called by outside code.
*/
/**
 * @prop --dropdown-z-index: `z-index` of the dropdown menu.
 * @prop --menu-surface-width: Width of the menu surface. Overrides the width defined by `surfaceWidth`.
 * @prop --list-grid-item-max-width: Maximum width of items in the menu list when `gridLayout={true}`. Defaults to `10rem`.
 * @prop --list-grid-item-min-width: Minimum width of items in the menu list when `gridLayout={true}`. Defaults to `7.5rem`.
 * @prop --list-grid-gap: Distance between the items in the menu list when `gridLayout={true}`. Defaults to `0.75rem`.
 * @prop --notification-badge-text-color: Defines the text color of notification badges. Defaults to `--color-white`.
 * @prop --notification-badge-background-color: Defines the background color of notification badges. Defaults to `--color-red-default`.
 */
:host(limel-menu) {
  isolation: isolate;
  position: relative;
  display: inline-block;
  --badge-background-color: var(
      --notification-badge-background-color,
      rgb(var(--color-red-default))
  );
  --badge-text-color: var(
      --notification-badge-text-color,
      rgb(var(--color-white))
  );
}

:host([hidden]) {
  display: none;
}

.menu__trigger {
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  background: none;
  color: rgb(var(--contrast-800));
  height: 2.25rem;
}
.menu__trigger-enabled:hover {
  border-color: rgb(var(--contrast-800));
  color: rgb(var(--contrast-1100));
}

.mdc-menu-surface--anchor {
  position: relative;
}

limel-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
}