@patternfly/patternfly/components/Menu/menu.css

Assets, source, tooling, and content for PatternFly 4

.pf-c-menu {
  --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
  --pf-c-menu--BoxShadow: var(--pf-global--BoxShadow--md);
  --pf-c-menu--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-menu--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu--PaddingTop) * -1);
  --pf-c-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
  --pf-c-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
  --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-menu__search--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-menu__search--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
  --pf-c-menu__list-item--hover--Color: var(--pf-global--Color--100);
  --pf-c-menu__list-item--BackgroundColor: transparent;
  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
  --pf-c-menu__item--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-menu__item--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-menu__item--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-menu__item--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-menu__item--FontSize: var(--pf-global--FontSize--md);
  --pf-c-menu__item--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-menu__item--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-menu__item--disabled--Color: var(--pf-global--Color--dark-200);
  --pf-c-menu__group-title--PaddingTop: var(--pf-c-menu__item--PaddingTop);
  --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
  --pf-c-menu__group-title--PaddingBottom: var(--pf-c-menu__item--PaddingBottom);
  --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-menu__group-title--Color: var(--pf-global--Color--dark-200);
  --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
  --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
  --pf-c-menu__item-icon--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-menu__item-toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-menu__item-toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-menu__item-select-icon--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-menu__item-select-icon--Color: var(--pf-global--active-color--100);
  --pf-c-menu__item-select-icon--FontSize: var(--pf-global--icon--FontSize--sm);
  --pf-c-menu__item-main__external-icon--MarginLeft: var(--pf-global--spacer--sm);
  --pf-c-menu__item-main__external-icon--Color: var(--pf-global--link--Color);
  --pf-c-menu__item-main__external-icon--FontSize: var(--pf-global--icon--FontSize--sm);
  --pf-c-menu__item-action--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-menu__item-action--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-menu__item-action-icon--Color: var(--pf-global--Color--dark-200);
  --pf-c-menu__item-action-icon--Height: calc(var(--pf-c-menu__item--FontSize) * var(--pf-c-menu__item--LineHeight));
  --pf-c-menu__item-action--hover__icon--Color: var(--pf-global--Color--dark-100);
  --pf-c-menu__item-action--m-favorite__icon--Color: var(--pf-global--disabled-color--200);
  --pf-c-menu__item-action--m-favorite__icon--FontSize: var(--pf-global--icon--FontSize--sm);
  --pf-c-menu__item-action--m-favorite--m-favorited__icon--Color: var(--pf-global--palette--gold-400);
  padding-top: var(--pf-c-menu--PaddingTop);
  padding-bottom: var(--pf-c-menu--PaddingBottom);
  background-color: var(--pf-c-menu--BackgroundColor);
  box-shadow: var(--pf-c-menu--BoxShadow); }
  .pf-c-menu.pf-m-flyout .pf-c-menu {
    position: absolute;
    top: var(--pf-c-menu--m-flyout__menu--Top);
    left: 100%; }
  .pf-c-menu .pf-c-divider {
    margin-top: var(--pf-c-menu--c-divider--MarginTop);
    margin-bottom: var(--pf-c-menu--c-divider--MarginBottom); }

.pf-c-menu__search {
  padding-top: var(--pf-c-menu__search--PaddingTop);
  padding-right: var(--pf-c-menu__search--PaddingRight);
  padding-bottom: var(--pf-c-menu__search--PaddingBottom);
  padding-left: var(--pf-c-menu__search--PaddingLeft); }

.pf-c-menu__list-item {
  position: relative;
  display: flex;
  color: var(--pf-c-menu__list-item--Color);
  background-color: var(--pf-c-menu__list-item--BackgroundColor); }
  .pf-c-menu__list-item:hover:not(.pf-m-disabled), .pf-c-menu__list-item:focus-within:not(.pf-m-disabled) {
    --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color);
    --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor); }
    .pf-c-menu__list-item:hover:not(.pf-m-disabled) .pf-c-menu__item-external-icon, .pf-c-menu__list-item:focus-within:not(.pf-m-disabled) .pf-c-menu__item-external-icon {
      opacity: 1; }
  .pf-c-menu__list-item.pf-m-disabled .pf-c-menu__item {
    --pf-c-menu__item--Color: var(--pf-c-menu__item--disabled--Color);
    pointer-events: none; }

.pf-c-menu__item {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--pf-c-menu__item--PaddingTop);
  padding-right: var(--pf-c-menu__item--PaddingRight);
  padding-bottom: var(--pf-c-menu__item--PaddingBottom);
  padding-left: var(--pf-c-menu__item--PaddingLeft);
  font-size: var(--pf-c-menu__item--FontSize);
  font-weight: var(--pf-c-menu__item--FontWeight);
  line-height: var(--pf-c-menu__item--LineHeight);
  color: var(--pf-c-menu__item--Color);
  text-align: left;
  background-color: var(--pf-c-menu__item--BackgroundColor);
  border: none; }
  .pf-c-menu__item:hover {
    text-decoration: none; }
  .pf-c-menu__item:disabled {
    --pf-c-menu__item--Color: var(--pf-c-menu__item--disabled--Color);
    pointer-events: none; }
  .pf-c-menu__item.pf-m-selected .pf-c-menu__item-select-icon {
    opacity: 1; }

.pf-c-menu__item-main {
  display: flex;
  align-items: center;
  width: 100%; }
  .pf-c-menu__item-main .pf-c-menu__item-external-icon {
    margin-left: var(--pf-c-menu__item-main__external-icon--MarginLeft);
    font-size: var(--pf-c-menu__item-main__external-icon--FontSize);
    color: var(--pf-c-menu__item-main__external-icon--Color);
    opacity: 0; }

.pf-c-menu__item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1; }

.pf-c-menu__group-title {
  padding-top: var(--pf-c-menu__group-title--PaddingTop);
  padding-right: var(--pf-c-menu__group-title--PaddingRight);
  padding-bottom: var(--pf-c-menu__group-title--PaddingBottom);
  padding-left: var(--pf-c-menu__group-title--PaddingLeft);
  font-size: var(--pf-c-menu__group-title--FontSize);
  font-weight: var(--pf-c-menu__group-title--FontWeight);
  color: var(--pf-c-menu__group-title--Color); }

.pf-c-menu__item-description {
  font-size: var(--pf-c-menu__item-description--FontSize);
  color: var(--pf-c-menu__item-description--Color);
  word-break: break-all; }

.pf-c-menu__item-icon {
  margin-right: var(--pf-c-menu__item-icon--MarginRight); }

.pf-c-menu__item-toggle-icon {
  padding-right: var(--pf-c-menu__item-toggle-icon--PaddingRight);
  padding-left: var(--pf-c-menu__item-toggle-icon--PaddingLeft); }

.pf-c-menu__item-select-icon {
  margin-left: var(--pf-c-menu__item-select-icon--MarginLeft);
  font-size: var(--pf-c-menu__item-select-icon--FontSize);
  color: var(--pf-c-menu__item-select-icon--Color);
  opacity: 0; }

.pf-c-menu__item-action {
  display: flex;
  padding-top: var(--pf-c-menu__item-action--PaddingTop);
  padding-right: var(--pf-c-menu__item-action--PaddingRight);
  padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
  padding-left: var(--pf-c-menu__item-action--PaddingLeft);
  border: none; }
  .pf-c-menu__item-action:hover, .pf-c-menu__item-action:focus {
    --pf-c-menu__item-action-icon--Color: var(--pf-c-menu__item-action--hover__icon--Color); }
  .pf-c-menu__item-action.pf-m-favorite {
    --pf-c-menu__item-action-icon--Color: var(--pf-c-menu__item-action--m-favorite__icon--Color); }
    .pf-c-menu__item-action.pf-m-favorite.pf-m-favorited {
      --pf-c-menu__item-action-icon--Color: var(--pf-c-menu__item-action--m-favorite--m-favorited__icon--Color); }
    .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
      font-size: var(--pf-c-menu__item-action--m-favorite__icon--FontSize); }

.pf-c-menu__item-action-icon {
  display: flex;
  align-items: center;
  height: var(--pf-c-menu__item-action-icon--Height);
  color: var(--pf-c-menu__item-action-icon--Color); }