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

adev/src/app/features/update/update.component.scss
186 строк4 KB
Kam
docs(docs-infra): open update guide external links in new tabs
29 апр 2026, 23:59
29 апр 2026, 23:5913c0422
@use '@angular/docs/styles/media-queries' as mq;
@use '@angular/docs/styles/links' as links;

$ver-dropdown-width: clamp(165px, 20vw, 200px);

:host {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: var(--layout-padding);
  container: update-guide-page / inline-size;

  .docs-viewer {
    padding-inline: var(--layout-padding);

    //applying styles when TOC position got translated to the top right
    @include mq.for-large-desktop-up {
      // take the available space except a reserved area for TOC
      margin-left: -16rem;
      width: calc(100% - 16rem);
      box-sizing: border-box;
    }

    .page-header {
      margin-top: 0px;
    }
  }
}

.page {
  max-width: var(--page-width);

  & > * {
    @include mq.for-extra-large-desktop-up {
      padding-inline: 0px;
    }
  }

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

h3,
h4 {
  margin-block-start: 2em;
}

.wizard {
  .show-button {
    display: block;
    margin-block-start: 2rem;
  }
}

.adev-version-selector {
  display: flex;
  gap: 1rem;
}

.adev-template-dropdown {
  border: 1px solid var(--senary-contrast);
  border-radius: 0.25rem;
  padding: 0;
  transform: translateY(-0.7rem);
  max-height: 200px;
  overflow-y: auto;
  width: $ver-dropdown-width;
  box-sizing: border-box;
  background: var(--page-background);

  li {
    list-style: none;
    box-sizing: border-box;

    button {
      background: var(--page-background);
      font-size: 0.875rem;
      width: 100%;
      text-align: left;
      padding-block: 0.5rem;
      color: var(--quaternary-contrast);
      transition:
        color 0.3s ease,
        background 0.3s ease;
      font-weight: 400;

      &:hover {
        background: var(--senary-contrast);
        color: var(--primary-contrast);
      }
    }
  }
}

.adev-template-select {
  margin-block-end: 0.5rem;

  // cdk select button
  button {
    font-size: 0.875rem;
    border: 1px solid var(--senary-contrast);
    border-radius: 0.25rem;
    width: $ver-dropdown-width;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.5rem;
    font-weight: 400;
    transition: border 0.3s ease;

    span {
      color: var(--primary-contrast);
      transition: color 0.3s ease;
      margin-inline-start: 0.1rem;
    }

    docs-icon {
      font-size: 1.3rem;
      color: var(--quaternary-contrast);
      transition: color 0.3s ease;
    }
  }
}

.adev-recommendation-item {
  display: flex;

  mat-checkbox {
    margin-top: 0.5rem;
  }

  .adev-recommendation-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .adev-complexity-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;

    --badge-color: var(--primary-text, black);

    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 10%, var(--page-background));

    .docs-dark-mode & {
      background: color-mix(in srgb, var(--badge-color) 17%, var(--page-background));
    }

    @include mq.for-tablet-landscape-down {
      display: none;
    }
  }

  .adev-complexity-1 {
    --badge-color: var(--super-green);
  }
  .adev-complexity-2 {
    --badge-color: var(--bright-blue);
  }
  .adev-complexity-3 {
    --badge-color: var(--symbolic-orange);
  }

  // Code blocks are generable from the markdown, we need to opt-out of the scoping
  ::ng-deep {
    code {
      cursor: pointer;
    }

    // External links (rendered with target="_blank") get an "open in new" icon
    a[target='_blank'] {
      @include links.external-link-with-icon;
    }
  }
}