rapidoc 11.0.1 → 12.1.0

package/src/styles/nav-styles.js

@@ -0,0 +1,633 @@
+import { css } from "lit";
+
+export default css`
+  #advanced-search-btn {
+    display: none;
+    margin-left: 5px;
+    width: 75px;
+  }
+  .btn-clear-filter {
+    margin-left: 5px;
+    color: var(--foreground);
+    width: 75px;
+  }
+  .nav-bar-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    transition:
+      box-shadow 0.2s ease,
+      background 0.2s ease;
+  }
+  @container scroll-state(scrollable: top) {
+    .nav-bar-header {
+      box-shadow:
+        0 4px 12px -2px rgba(0, 0, 0, 0.25),
+        0 2px 4px -1px rgba(0, 0, 0, 0.15);
+    }
+  }
+  .nav-bar-search-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: stretch;
+    padding: 8px 16px 12px 16px;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .nav-bar-search-container.has-bottom-border {
+    border-bottom: 1px solid var(--muted);
+  }
+  .nav-bar-search-input-wrapper {
+    display: flex;
+    flex: 1;
+    position: relative;
+    line-height: 22px;
+  }
+  /* Wrapper in the selector so it outranks input-styles' input[type='text'] padding (room for the icon) */
+  .nav-bar-search-input-wrapper .nav-bar-search-input {
+    width: 100%;
+    line-height: 1.25;
+    padding: 0.45em 28px 0.45em 10px;
+    color: var(--foreground);
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    background: var(--input-background);
+    /* Inputs do not inherit the page font; getNavCss() puts this on a page, outside the element's input styles. */
+    font-family: inherit;
+    font-size: calc(var(--font-size-small) + 1px);
+    box-sizing: border-box;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+  }
+  .nav-bar-search-input:focus {
+    outline: none;
+    border-color: var(--sidebar-ring);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sidebar-ring) 25%, transparent);
+  }
+  .nav-bar-search-icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: var(--font-size-regular);
+    cursor: pointer;
+    color: var(--foreground);
+    opacity: 0.6;
+    user-select: none;
+  }
+  /* The static nav's filter icon is a single-colour SVG (magnifying glass), not a glyph. */
+  svg.nav-bar-search-icon {
+    cursor: default;
+    pointer-events: none;
+  }
+  .nav-bar-search-icon:hover {
+    opacity: 1;
+    color: var(--foreground);
+  }
+  #nav-bar-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 36px;
+    line-height: 30px;
+    width: 50px;
+    height: 50px;
+    background: var(--card);
+    color: var(--foreground);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    z-index: 10;
+    box-shadow:
+      0 12px 16px 0 rgba(0, 0, 0, 0.24),
+      0 17px 50px 0 rgba(0, 0, 0, 0.19);
+    &:hover {
+      border-color: var(--primary);
+      color: var(--primary);
+    }
+  }
+  .nav-bar {
+    width: 0;
+    height: 100%;
+    overflow: hidden;
+    color: var(--sidebar-foreground);
+    background: var(--sidebar);
+    background-blend-mode: multiply;
+    border-right: 1px solid var(--sidebar-border);
+    /* Same size as body text (14px by default), like most API references; 20px line height at that size. */
+    font-size: var(--font-size-regular);
+    line-height: calc(var(--font-size-regular) + 6px);
+    position: relative;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    word-break: break-word;
+    &.floating-nav {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 330px;
+      overflow: scroll;
+      z-index: 5;
+    }
+  }
+
+  .nav-bar-info:focus-visible,
+  .nav-bar-tag:focus-visible,
+  .nav-bar-path:focus-visible {
+    outline: 1px solid;
+    box-shadow: none;
+    outline-offset: -4px;
+  }
+  .nav-bar-expand-all:focus-visible,
+  .nav-bar-collapse-all:focus-visible,
+  .nav-bar-tag-icon:focus-visible {
+    outline: 1px solid;
+    box-shadow: none;
+    outline-offset: 2px;
+  }
+  ::slotted([slot='nav-logo']) {
+    max-height: var(--sidebar-logo-max-height);
+    overflow: hidden;
+    box-sizing: border-box;
+    width: auto;
+    padding: 16px 16px 0 16px;
+    object-fit: contain;
+  }
+  .nav-scroll {
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-y: overlay;
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted) transparent;
+    scroll-padding-top: 60px;
+    container-type: scroll-state;
+  }
+
+  .nav-bar-tag {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+  }
+  /* Collapsing a tag or tag group slides its body shut: height auto -> 0 (interpolate-size lets the
+     keyword animate; browsers without it switch at once). The body goes visibility: hidden once
+     closed, so its links leave the tab order; opening shows it at once. */
+  .nav-bar-paths-under-tag,
+  .nav-bar-tags-under-group {
+    interpolate-size: allow-keywords;
+    height: auto;
+    overflow: hidden;
+    transition:
+      height 0.25s ease,
+      visibility 0s;
+  }
+  .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag,
+  .nav-bar-tag-group.collapsed .nav-bar-tags-under-group {
+    height: 0;
+    visibility: hidden;
+    transition:
+      height 0.25s ease,
+      visibility 0s linear 0.25s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nav-bar-paths-under-tag,
+    .nav-bar-tags-under-group {
+      transition: none;
+    }
+  }
+  .nav-bar-paths-under-tag {
+    padding-left: 10px;
+  }
+
+  .nav-bar-expand-all {
+    transform: rotate(90deg);
+    cursor: pointer;
+    margin-inline-end: 10px;
+  }
+  .nav-bar-collapse-all {
+    transform: rotate(270deg);
+    cursor: pointer;
+  }
+  .nav-bar-expand-all:hover,
+  .nav-bar-collapse-all:hover {
+    color: var(--primary);
+  }
+
+  .nav-bar-tag-icon,
+  .nav-bar-tag-group-icon {
+    font-size: 14px;
+    color: var(--foreground);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    line-height: 1;
+    user-select: none;
+    transition: color 0.15s ease;
+  }
+  .nav-bar-tag-icon:hover,
+  .nav-bar-tag-group-icon:hover {
+    color: var(--foreground);
+  }
+
+  .nav-bar-tag-icon::after,
+  .nav-bar-tag-group-icon::after {
+    content: '';
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    background-color: currentColor;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
+    -webkit-mask-size: 14px 14px;
+    mask-size: 14px 14px;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    transition: transform 0.2s ease-out 0s;
+    transform-origin: center;
+  }
+
+  .nav-bar-tag-and-paths.collapsed .nav-bar-tag-icon::after,
+  .nav-bar-tag-group.collapsed .nav-bar-tag-group-icon::after {
+    transform: rotate(-90deg);
+  }
+
+  .nav-bar-tag-and-paths.expanded .nav-bar-tag-icon::after,
+  .nav-bar-tag-group.expanded .nav-bar-tag-group-icon::after {
+    transform: rotate(0deg);
+  }
+  .nav-scroll::-webkit-scrollbar {
+    width: 8px;
+  }
+  .nav-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .nav-scroll::-webkit-scrollbar-thumb {
+    background: var(--muted);
+  }
+  .nav-bar-tag-group {
+    margin-top: 6px;
+    margin-bottom: 2px;
+  }
+  .nav-bar-tag-group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 15px 4px 6px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--sidebar-foreground);
+    cursor: pointer;
+    user-select: none;
+    border-inline-start: 4px solid transparent;
+    transition:
+      border-color 0.15s ease,
+      color 0.15s ease;
+  }
+  .nav-bar-tag-group-header:hover {
+    color: var(--sidebar-accent-foreground);
+  }
+  .nav-bar-tag-group-title {
+    flex: 1;
+    min-width: 0;
+  }
+  .nav-bar-tags-under-group {
+    border-inline-start: 1px solid var(--border);
+    margin-inline-start: 10px;
+  }
+
+  .nav-bar-tag {
+    color: var(--primary);
+    border-inline-start: 4px solid transparent;
+    font-weight: 600;
+    padding: 10px 15px 10px 10px;
+    text-transform: capitalize;
+    min-width: 0;
+  }
+  .nav-bar-tag a,
+  .nav-bar-tag-title,
+  a.nav-bar-tag-title {
+    color: inherit;
+    text-decoration: none;
+    flex: 1;
+    min-width: 0;
+  }
+  .nav-bar-tag a:hover,
+  .nav-bar-tag-title:hover,
+  a.nav-bar-tag-title:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+  /* a description-only tag (show-unused-tags) is itself the link */
+  a.nav-bar-tag {
+    text-decoration: none;
+  }
+
+  .nav-bar-components,
+  .nav-bar-h1,
+  .nav-bar-h2,
+  .nav-bar-info,
+  .nav-bar-tag,
+  .nav-bar-path {
+    display: flex;
+    cursor: pointer;
+    /* Border-box and no underline here too: getNavCss() (@rapidoc/prerender) styles these on a page
+       without the component's global box-sizing reset and link styles */
+    box-sizing: border-box;
+    width: 100%;
+    border: none;
+    color: var(--sidebar-foreground);
+    background: transparent;
+    border-inline-start: 4px solid transparent;
+    text-decoration: none;
+    transition:
+      background 0.15s ease,
+      color 0.15s ease;
+  }
+
+  .nav-bar-path,
+  a.nav-bar-path {
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  a.nav-bar-info:hover,
+  a.nav-bar-path:hover {
+    text-decoration: none;
+  }
+
+  .nav-bar-path > * {
+    pointer-events: none;
+  }
+
+  .nav-bar-path.deprecated {
+    filter: opacity(0.5);
+  }
+
+  .portal-sidebar-footer-link {
+    padding: 16px 12px;
+  }
+
+  .nav-bar-path-label {
+    display: flex;
+    align-items: baseline;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .nav-bar-webhook {
+    font-weight: bold;
+    margin-right: 8px;
+    font-size: var(--font-size-xs);
+    flex-shrink: 0;
+  }
+
+  /* A path in place of the summary (use-path-in-nav-bar); also in the static navigation, which has no font styles */
+  .nav-bar-path-label .mono-font {
+    font-family: var(--font-mono);
+  }
+
+  .nav-method {
+    font-weight: bold;
+    margin-inline-start: auto;
+    flex-shrink: 0;
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+
+    &.false {
+      display: none;
+    }
+  }
+
+  .nav-method.as-colored-text {
+    color: var(--method-default);
+  }
+  .nav-method.as-colored-text.get {
+    color: var(--method-get);
+  }
+  .nav-method.as-colored-text.put {
+    color: var(--method-put);
+  }
+  .nav-method.as-colored-text.post {
+    color: var(--method-post);
+  }
+  .nav-method.as-colored-text.delete {
+    color: var(--method-delete);
+  }
+  .nav-method.as-colored-text.head {
+    color: var(--method-head);
+  }
+  .nav-method.as-colored-text.patch {
+    color: var(--method-patch);
+  }
+  .nav-method.as-colored-text.options {
+    color: var(--method-options);
+  }
+  .nav-method.as-colored-text.trace {
+    color: var(--method-trace);
+  }
+  .nav-method.as-colored-text.query {
+    color: var(--method-query);
+  }
+  .nav-method.as-colored-text.copy {
+    color: var(--method-default);
+  }
+  .nav-method.as-colored-text.purge {
+    color: var(--method-default);
+  }
+
+  .nav-method.as-colored-block {
+    padding: 1px 4px;
+    min-width: 32px;
+    text-align: center;
+    border-radius: 4px;
+    color: var(--method-badge-fg);
+    background: var(--method-default);
+    font-weight: 600;
+  }
+  :host([color-scheme='light']) .nav-method.as-colored-block {
+    color: var(--method-badge-fg);
+  }
+  @media (prefers-color-scheme: light) {
+    :host([color-scheme='system']) .nav-method.as-colored-block {
+      color: var(--method-badge-fg);
+    }
+  }
+  .colored-block .nav-method.as-colored-block {
+    outline: 1px solid;
+  }
+
+  .nav-method.as-colored-block.get {
+    background: var(--method-get);
+  }
+  .nav-method.as-colored-block.put {
+    background: var(--method-put);
+  }
+  .nav-method.as-colored-block.post {
+    background: var(--method-post);
+  }
+  .nav-method.as-colored-block.delete {
+    background: var(--method-delete);
+  }
+  .nav-method.as-colored-block.head {
+    background: var(--method-head);
+  }
+  .nav-method.as-colored-block.patch {
+    background: var(--method-patch);
+  }
+  .nav-method.as-colored-block.options {
+    background: var(--method-options);
+  }
+  .nav-method.as-colored-block.trace {
+    background: var(--method-trace);
+  }
+  .nav-method.as-colored-block.query {
+    background: var(--method-query);
+  }
+  .nav-method.as-colored-block.copy {
+    background: var(--method-default);
+  }
+  .nav-method.as-colored-block.purge {
+    background: var(--method-default);
+  }
+
+  .nav-bar-h1,
+  .nav-bar-h2,
+  .nav-bar-path {
+    font-weight: 400;
+    padding: var(--sidebar-item-padding);
+  }
+
+  .nav-bar-info {
+    padding: 12px 10px;
+    font-weight: 600;
+  }
+  .nav-bar-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: var(--foreground);
+    padding: var(--sidebar-item-padding);
+    font-weight: 700;
+  }
+  .nav-bar-section.operations {
+    display: none !important;
+  }
+
+  .nav-bar-section:first-child {
+    display: none;
+  }
+  .nav-bar-h2 {
+    padding-inline-start: 28px;
+  }
+
+  /* Active item indicator - always left-bar style */
+  .nav-bar-h1.active,
+  .nav-bar-h2.active,
+  .nav-bar-info.active,
+  .nav-bar-tag.active,
+  .nav-bar-path.active,
+  .nav-bar-section.operations.active,
+  .nav-bar-h1.left-bar.active,
+  .nav-bar-h2.left-bar.active,
+  .nav-bar-info.left-bar.active,
+  .nav-bar-tag.left-bar.active,
+  .nav-bar-path.left-bar.active,
+  .nav-bar-section.left-bar.operations.active {
+    border-inline-start: 4px solid var(--sidebar-primary);
+    color: var(--sidebar-primary);
+  }
+
+  .nav-bar-h1.active:hover,
+  .nav-bar-h2.active:hover,
+  .nav-bar-info.active:hover,
+  .nav-bar-tag.active:hover,
+  .nav-bar-path.active:hover,
+  .nav-bar-section.operations.active:hover,
+  .nav-bar-h1.left-bar.active:hover,
+  .nav-bar-h2.left-bar.active:hover,
+  .nav-bar-info.left-bar.active:hover,
+  .nav-bar-tag.left-bar.active:hover,
+  .nav-bar-path.left-bar.active:hover,
+  .nav-bar-section.left-bar.operations.active:hover {
+    color: var(--sidebar-primary);
+  }
+
+  /* Highlight collapsed parents using modern CSS :has() */
+  .nav-bar-tag-and-paths.collapsed:has(.nav-bar-path.active) > .nav-bar-tag {
+    border-inline-start-color: var(--sidebar-primary);
+    color: var(--sidebar-primary);
+  }
+
+  .nav-bar-tag-group.collapsed:has(.active) > .nav-bar-tag-group-header {
+    border-inline-start-color: var(--sidebar-primary);
+    color: var(--sidebar-primary);
+  }
+
+  .nav-bar-tag-and-paths.collapsed:has(.nav-bar-path.active) > .nav-bar-tag:hover,
+  .nav-bar-tag-group.collapsed:has(.active) > .nav-bar-tag-group-header:hover {
+    color: var(--sidebar-primary);
+  }
+
+  .nav-bar-h1:hover,
+  .nav-bar-h2:hover,
+  .nav-bar-info:hover,
+  .nav-bar-tag:hover,
+  .nav-bar-path:hover {
+    color: var(--sidebar-accent-foreground);
+    background: var(--sidebar-accent);
+  }
+
+  /* nav-item-overflow: ellipsis (default) vs wrap */
+  :host([nav-item-overflow='ellipsis']) .nav-bar-tag-group-title,
+  :host(:not([nav-item-overflow])) .nav-bar-tag-group-title,
+  .overflow-ellipsis .nav-bar-tag-group-title,
+  :host([nav-item-overflow='ellipsis']) .nav-bar-tag-title,
+  :host(:not([nav-item-overflow])) .nav-bar-tag-title,
+  .overflow-ellipsis .nav-bar-tag-title,
+  :host([nav-item-overflow='ellipsis']) .nav-bar-path-label,
+  :host(:not([nav-item-overflow])) .nav-bar-path-label,
+  .overflow-ellipsis .nav-bar-path-label,
+  :host([nav-item-overflow='ellipsis']) .nav-bar-info,
+  :host(:not([nav-item-overflow])) .nav-bar-info,
+  .overflow-ellipsis .nav-bar-info,
+  :host([nav-item-overflow='ellipsis']) .nav-bar-section-title,
+  :host(:not([nav-item-overflow])) .nav-bar-section-title,
+  .overflow-ellipsis .nav-bar-section-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+
+  :host([nav-item-overflow='wrap']) .nav-bar-tag-group-title,
+  .overflow-wrap .nav-bar-tag-group-title,
+  :host([nav-item-overflow='wrap']) .nav-bar-tag-title,
+  .overflow-wrap .nav-bar-tag-title,
+  :host([nav-item-overflow='wrap']) .nav-bar-path-label,
+  .overflow-wrap .nav-bar-path-label,
+  :host([nav-item-overflow='wrap']) .nav-bar-info,
+  .overflow-wrap .nav-bar-info,
+  :host([nav-item-overflow='wrap']) .nav-bar-section-title,
+  .overflow-wrap .nav-bar-section-title {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    word-break: break-word;
+  }
+`;