@dnb/eufemia/components/menu/style/dnb-menu--isolated.css

DNB Eufemia Design System UI Library

/*
 * Utilities
 */
.eufemia-scope--11_0_0 .dnb-menu {
  --menu-action-padding-inline: 1rem;
  --menu-action-padding-block: 0.75rem;
  --menu-action-gap: 1rem;
  --menu-action-min-height: 2.5rem;
  --menu-action-border-radius: 0.25rem;
  --menu-action-background-color: transparent;
  --menu-action-background-color--hover: var(
    --token-color-background-neutral-subtle
  );
  --menu-action-background-color--active: var(
    --token-color-background-neutral-base
  );
  --menu-action-background-color--active-trigger: var(
    --token-color-background-neutral-subtle
  );
  --menu-action-text-color: var(--token-color-text-neutral);
  --menu-action-text-color--disabled: var(
    --token-color-text-action-disabled
  );
  --menu-action-icon-color: var(--token-color-icon-neutral);
  --menu-action-icon-color--disabled: var(
    --token-color-icon-action-disabled
  );
  --menu-divider-color: var(--token-color-background-neutral-base);
  --menu-content-padding: 0.25rem;
}
.eufemia-scope--11_0_0 .dnb-menu.dnb-popover {
  min-width: auto;
}
.eufemia-scope--11_0_0 .dnb-menu__popover-content {
  padding: 0;
}
.eufemia-scope--11_0_0 .dnb-menu__list {
  margin: 0;
  padding: var(--menu-content-padding);
  list-style: none;
}
.eufemia-scope--11_0_0 .dnb-menu__list .dnb-menu__list {
  white-space: nowrap;
}
.eufemia-scope--11_0_0 .dnb-menu__action {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--menu-action-gap);
  min-height: var(--menu-action-min-height);
  padding: var(--menu-action-padding-block) var(--menu-action-padding-inline);
  border: none;
  border-radius: var(--menu-action-border-radius);
  font-family: inherit;
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
  color: var(--menu-action-text-color);
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: var(--menu-action-background-color);
  cursor: pointer;
  outline: none;
}
.eufemia-scope--11_0_0 .dnb-menu__action__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--menu-action-icon-color);
}
.eufemia-scope--11_0_0 .dnb-menu__action__text {
  flex: 1;
  text-align: left;
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-menu__action:focus:not([disabled]) {
  --menu-action-background-color: var(
    --token-color-background-action-focus-subtle
  );
  --menu-action-text-color: var(--token-color-text-action-focus);
  --menu-action-icon-color: var(--token-color-icon-action-focus);
  outline: none;
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_0_0 .dnb-menu__action:hover:not(.dnb-menu__action--disabled) {
  background-color: var(--menu-action-background-color--hover);
}
.eufemia-scope--11_0_0 .dnb-menu__action:active:not(.dnb-menu__action--disabled) {
  background-color: var(--menu-action-background-color--active);
}
.eufemia-scope--11_0_0 .dnb-menu__action--active-trigger {
  background-color: var(--menu-action-background-color--active-trigger);
}
.eufemia-scope--11_0_0 .dnb-menu__action--disabled {
  color: var(--menu-action-text-color--disabled);
  cursor: not-allowed;
}
.eufemia-scope--11_0_0 .dnb-menu__action--disabled .dnb-menu__action__icon {
  color: var(--menu-action-icon-color--disabled);
}
.eufemia-scope--11_0_0 .dnb-menu__action--link {
  padding: 0;
}
.eufemia-scope--11_0_0 .dnb-menu__action--link .dnb-menu__action__link {
  display: flex;
  align-items: center;
  gap: var(--menu-action-gap);
  width: 100%;
  padding: var(--menu-action-padding-block) var(--menu-action-padding-inline);
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}
.eufemia-scope--11_0_0 .dnb-menu__action--has-submenu .dnb-menu__action__submenu-indicator {
  margin-left: auto;
}
.eufemia-scope--11_0_0 .dnb-menu__divider {
  height: 0.0625rem;
  margin: var(--menu-content-padding) var(--menu-action-padding-inline);
  background-color: var(--menu-divider-color);
}
.eufemia-scope--11_0_0 .dnb-menu__header {
  padding: var(--menu-action-padding-block) var(--menu-action-padding-inline);
  padding-bottom: 0;
  list-style: none;
}
.eufemia-scope--11_0_0 .dnb-menu__header__text.dnb-lead {
  font-size: var(--font-size-small);
}
.eufemia-scope--11_0_0 .dnb-menu__accordion {
  list-style: none;
}
.eufemia-scope--11_0_0 .dnb-menu__accordion--open > .dnb-menu__accordion__trigger {
  background-color: var(--menu-action-background-color--active-trigger);
}
.eufemia-scope--11_0_0 .dnb-menu__accordion--disabled > .dnb-menu__accordion__trigger {
  color: var(--menu-action-text-color--disabled);
  cursor: not-allowed;
}
.eufemia-scope--11_0_0 .dnb-menu__accordion--disabled > .dnb-menu__accordion__trigger .dnb-menu__action__icon {
  color: var(--menu-action-icon-color--disabled);
}
.eufemia-scope--11_0_0 .dnb-menu__accordion__indicator {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.eufemia-scope--11_0_0 .dnb-menu__accordion__indicator .dnb-icon {
  transition: transform 400ms var(--easing-default);
  transform: rotate(90deg);
}
.eufemia-scope--11_0_0 .dnb-menu__accordion--open > .dnb-menu__accordion__trigger .dnb-menu__accordion__indicator .dnb-icon {
  transform: rotate(270deg);
}
.eufemia-scope--11_0_0 .dnb-menu__accordion .dnb-menu__list {
  padding-left: var(--menu-action-padding-inline);
}