awx/awx/ui/static/js/main-menu/menu-item.block.less

/** @define MenuItem */

@import (reference) "shared/utilities/icons.less";
@import "shared/branding/colors.less";

.MenuItem {
  @menu-breakpoint: 870px;

  display: flex;
  flex: none;

  transition: color 60ms;

  padding: 0 1rem;
  min-height: 5.8rem;
  min-width: 9.2rem;
  margin-right: 2rem;
  align-items: center;

  &, &:active, &:focus {
      color: black;
  }

  &:hover {
      color: @blue;
  }

  &:last-child {
    margin-right: 0;
  }

  @media screen and (max-width: @menu-breakpoint) {
    flex: 1 1 0;
    padding: 0 1rem;
    margin-right: 0;
    border-bottom: solid thin rgb(202, 202, 202);

    .tooltip, &+.tooltip {
        display: none !important;
    }

    &--logo {
        border: none;
        display: flex;
        align-items: stretch;
    }
  }

  &--fixed {
      flex: none;
      min-width: 0;
      margin-right: 0;
      @media screen and (min-width: (@menu-breakpoint + 1px)) {
          padding: 0 0.75rem;
      }
  }

  &-helpTitle {
    @media screen and (min-width: (@menu-breakpoint + 1px)) {
      display: none;
    }
  }

  &-hoverIcon {
    width: 28px;
  }

  &--active {
      font-weight: bold;
  }

  &--right {
    // Push this and all following elements to the right
    margin-left: auto;
    @media screen and (max-width: @menu-breakpoint) {
      margin-left: 0;
    }
  }

  &--setup {
    &:before {
      .icon(@fa-var-cogs);
      padding-right: 0.25rem;
    }
  }

  &--popup {
    // Make pseudo button
    background: transparent;
    border: 0;
    padding: 8px 0;

    outline: none;

    &:after {
        .icon(@fa-var-angle-down);
    }
  }

  &-logo {
    height: 34px;
    width: 165px; // IE11 needs hard-coded with to calculate correct dimensions for image in flexbox
    align-self: center;
  }

  &-icon {
      height: 17px;
      width: auto;
      max-width: 18px;
      flex: none;
      box-sizing: initial;
      &--labelled {
          margin-right: 0.25rem;
      }
      @media screen and (max-width: @menu-breakpoint) {
          display: none;
        margin-right: 1.4rem;
      }
  }

  &-username {
      padding-right: 0.25rem;
      @media screen and (max-width: @menu-breakpoint) {
          order: 1; // moves this to the bottom
      }
      @media screen and (min-width: (@menu-breakpoint + 1px)) {
          max-width: 110px;
      }
  }

  &--projects {
      margin-right: 0;
  }

}