adev/src/app/app.component.scss - main - githubmirror/angular

adev/src/app/app.component.scss
115 строк2 KB
Kam
fix(docs-infra): keep mobile nav drawers usable on small screens
05 май 2026, 19:31
05 май 2026, 19:31441a00d
@use '@angular/docs/styles/media-queries' as mq;

:host {
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-height: 100vh;

  // Case: If secondary navigation exists, display banner below secondary navigation for tablets.
  &:has(adev-secondary-navigation) {
    docs-top-level-banner {
      @include mq.for-tablet {
        top: 8.125rem;
      }
    }
  }

  // Case: If primary navigation is opened, display banner at the top of the page.
  &:has(.adev-nav-primary--open) {
    docs-top-level-banner {
      @include mq.for-phone-only {
        transform: translateY(-3.75rem);
        transition: transform 0.3s ease-in;
      }
    }
  }

  @include mq.for-tablet-landscape-down {
    flex-direction: column;
  }
  // If navs are open, render a blurry background over content
  &:has(.docs-nav-secondary--open),
  &:has(.adev-nav-primary--open) {
    .docs-app-main-content {
      &::after {
        visibility: visible;
        opacity: 1;
      }
    }
  }

  // Lock the page behind the mobile primary-nav drawer. `clip` preserves the primary nav's sticky context.
  @include mq.for-phone-only {
    &:has(.adev-nav-primary--open) {
      overflow: clip;
    }
  }

  &:has(.adev-home) {
    .adev-nav {
      width: 0;
      height: 0;

      @include mq.for-tablet-landscape-down {
        width: 100%;
      }
    }

    @include mq.for-tablet-landscape-up {
      footer {
        margin-left: var(--primary-nav-width);
      }
    }
  }
}

.adev-skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  background: var(--primary-contrast);
  color: var(--page-background);
  border: 1px solid var(--vivid-pink);
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  transform: translateY(-150%);
  transition: transform 0.3s ease-out;
  &:focus-visible {
    transform: translateY(0);
  }
}

.docs-app-main-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;

  // If navs are open, render a blurry background over content
  ::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(2px);
    background-color: color-mix(in srgb, var(--page-background) 5%, transparent);
    z-index: 50;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  @include mq.for-tablet {
    width: 100%;
  }
}

footer {
  margin-top: auto;
}