devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss - main - githubmirror/angular

devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss

125 строк2 KB

hawkgs

refactor(devtools): substitute remaining Angie images with ng-angie

31 июл 2026, 18:36

31 июл 2026, 18:36e144e69

@use '../../../styles/typography';

:host {
  display: flex;
  flex-direction: column;
  height: 100%;

  .filter {
    border-bottom: 1px solid var(--color-separator);
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.5rem;

    ng-filter {
      --ng-filter-width: 8rem;
      --ng-filter-height: 24px;
    }

    .show-full-path {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
  }

  .visualization {
    position: relative;
    overflow: hidden;
    flex: 1;

    .side-pane {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;

      .close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;

        mat-icon {
          font-size: 16px;
          width: 16px;
          height: 16px;
        }
      }

      h2 {
        @extend %heading-400;
        margin: 0;
        padding-top: 0;
        padding: 1rem;
      }

      .scrollable-wrapper {
        padding: 0 1rem 1rem 1rem;
        height: 100%;
        overflow-y: auto;
      }
    }

    .legend {
      position: absolute;
      bottom: 0.75rem;
      left: 0.75rem;
      padding: 0.5rem;
      border-radius: 0.5rem;
      background-color: color-mix(in srgb, var(--color-background) 80%, transparent 20%);
      backdrop-filter: blur(8px);

      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
          margin: 0;
          display: flex;
          align-items: center;
          gap: 0.375rem;
          color: var(--tertiary-contrast);

          &:not(:last-child) {
            margin-bottom: 0.75rem;
          }

          &::before {
            content: '';
            display: block;
            width: 12px;
            height: 12px;
            border: 1px solid;
          }

          &.eager::before {
            border-color: var(--red-05);
            background-color: var(--red-06);
          }

          &.lazy::before {
            border-color: var(--blue-02);
            background-color: var(--blue-03);
          }

          &.active::before {
            border-color: var(--green-02);
            background-color: var(--green-03);
          }
        }
      }
    }
  }
}

.unsupported-version {
  width: 50%;
  margin: auto;
  text-align: center;

  ng-angie {
    margin: 0 auto 1rem;
  }
}