@gravity-ui/uikit/build/esm/components/Menu/Menu.css

Gravity UI base styling and components

.g-menu {
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden auto;
  font-size: var(--g-text-body-1-font-size);
  color: var(--g-color-text-primary);
  background-color: var(--g-color-base-float);
  user-select: none;
  outline: none;
}
.g-menu__list-group-item + .g-menu__list-group-item, .g-menu__list-item + .g-menu__list-group-item, .g-menu__list-group-item + .g-menu__list-item {
  border-block-start: 1px solid var(--g-color-line-generic);
}
.g-menu__item {
  display: flex;
  align-items: center;
  color: var(--g-color-text-primary);
  text-decoration: none;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.g-menu__item-icon {
  display: flex;
}
.g-menu__item-icon-end {
  display: flex;
  margin-inline-end: 0;
}
.g-menu__item-content {
  flex-grow: 1;
  min-width: 0;
}
.g-menu__item_interactive {
  cursor: pointer;
}
.g-menu__item_interactive:hover, .g-menu__item_interactive:focus-visible {
  background-color: var(--g-color-base-simple-hover);
}
.g-menu__item_selected {
  background-color: var(--g-color-base-simple-hover);
}
.g-menu__item_disabled {
  color: var(--g-color-text-secondary);
  cursor: default;
  pointer-events: none;
}
.g-menu__item_disabled:hover {
  background-color: transparent;
}
.g-menu__item_active {
  cursor: default;
  background-color: var(--g-color-base-selection);
}
.g-menu__item_active:hover, .g-menu__item_active:focus-visible {
  background-color: var(--g-color-base-selection-hover);
}
.g-menu__item_theme_danger:not(.g-menu__item_disabled) {
  color: var(--g-color-text-danger);
}
.g-menu__group-label {
  font-weight: var(--g-text-accent-font-weight);
  color: var(--g-color-text-hint);
}
.g-menu__group-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-menu_size_s {
  line-height: 24px;
  padding: var(--g-spacing-1) 0;
}
.g-menu_size_s .g-menu__item,
.g-menu_size_s .g-menu__group-label {
  padding: 0 var(--g-spacing-3);
}
.g-menu_size_s .g-menu__item-icon {
  margin-inline-end: var(--g-spacing-2);
}
.g-menu_size_s .g-menu__item-icon-end {
  margin-inline-start: var(--g-spacing-2);
}
.g-menu_size_s .g-menu__list-group-item + .g-menu__list-group-item,
.g-menu_size_s .g-menu__list-item + .g-menu__list-group-item,
.g-menu_size_s .g-menu__list-group-item + .g-menu__list-item {
  margin-block-start: var(--g-spacing-1);
  padding-block-start: var(--g-spacing-1);
}
.g-menu_size_m {
  line-height: 28px;
  padding: var(--g-spacing-1) 0;
}
.g-menu_size_m .g-menu__item,
.g-menu_size_m .g-menu__group-label {
  padding: 0 var(--g-spacing-3);
}
.g-menu_size_m .g-menu__item-icon {
  margin-inline-end: var(--g-spacing-2);
}
.g-menu_size_m .g-menu__item-icon-end {
  margin-inline-start: var(--g-spacing-2);
}
.g-menu_size_m .g-menu__list-group-item + .g-menu__list-group-item,
.g-menu_size_m .g-menu__list-item + .g-menu__list-group-item,
.g-menu_size_m .g-menu__list-group-item + .g-menu__list-item {
  margin-block-start: var(--g-spacing-1);
  padding-block-start: var(--g-spacing-1);
}
.g-menu_size_l {
  line-height: 32px;
  padding: var(--g-spacing-1) 0;
}
.g-menu_size_l .g-menu__item,
.g-menu_size_l .g-menu__group-label {
  padding: 0 var(--g-spacing-4);
}
.g-menu_size_l .g-menu__item-icon {
  margin-inline-end: var(--g-spacing-2);
}
.g-menu_size_l .g-menu__item-icon-end {
  margin-inline-start: var(--g-spacing-2);
}
.g-menu_size_l .g-menu__list-group-item + .g-menu__list-group-item,
.g-menu_size_l .g-menu__list-item + .g-menu__list-group-item,
.g-menu_size_l .g-menu__list-group-item + .g-menu__list-item {
  margin-block-start: var(--g-spacing-1);
  padding-block-start: var(--g-spacing-1);
}
.g-menu_size_xl {
  font-size: var(--g-text-body-2-font-size);
  line-height: 36px;
  padding: var(--g-spacing-1) 0;
}
.g-menu_size_xl .g-menu__item,
.g-menu_size_xl .g-menu__group-label {
  padding: 0 var(--g-spacing-4);
}
.g-menu_size_xl .g-menu__item-icon {
  margin-inline-end: var(--g-spacing-3);
}
.g-menu_size_xl .g-menu__item-icon-end {
  margin-inline-start: var(--g-spacing-3);
}
.g-menu_size_xl .g-menu__list-group-item:not(:first-child) {
  margin-block-start: 6px;
  padding-block-start: 6px;
}
.g-menu_size_xl .g-menu__list-group-item:not(:last-child) {
  margin-block-end: 6px;
  padding-block-end: 6px;
}