department-of-veterans-affairs/vets-website

View on GitHub
src/applications/accredited-representative-portal/accreditation/21a/components/common/Header/Header.scss

Summary

Maintainability
Test Coverage
@import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";
@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins";

.arp-header {
  min-height: 78px;

  @media (min-width: $medium-screen) {
    min-height: 98px;
  }

  .va-header-logo-wrapper {
    display: flex;
    align-items: center;
  }

  .user-nav {
    white-space: nowrap;

    .loading-icon-container {
      color: var(--vads-color-white);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
    }

    .icon {
      width: 26px;
      height: 24px;
    }

    .user-dropdown-email {
      margin-left: 4px;
      display: block;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .mobile {
    .header-us-flag {
      height: 20px;
    }

    .expand-official-govt-explanation {
      font-size: 12px;
    }

    .govt-expanded-arrow {
      transform: rotate(180deg);
      transform-origin: 50% 50%;
    }

    .va-crisis-line-container {
      margin: 0px;
    }

    .arp-logo {
      width: 320px;
    }

    .user-nav {
      margin-left: 10px;

      .user-dropdown-email {
        max-width: 64px;
      }
    }

    @media (min-width: $medium-screen) {
      display: none !important;
    }
  }

  .wider-than-mobile {
    display: none;

    @media (min-width: $medium-screen) {
      display: block;

      .arp-logo {
        width: 480px;
      }

      .vet-toolbar {
        display: flex;
        justify-content: flex-end;
        flex: 0 1 300px;

        .user-nav {
          margin-inline: 10px;

          .loading-icon-container {
            width: 88px;
          }
        }
      }

      .va-header-logo-menu {
        padding-left: 10px;
      }
    }
  }
}