admin-lte 4.0.0-rc7 → 4.0.0

package/src/scss/_docs.scss

@@ -1,4 +1,820 @@
+//
+// Component: Docs
+//
+// Visual treatment for documentation pages. Body class `.docs-page` opts in.
+// Demo pages are not affected.
+//
+
+// Inline code blocks rendered by MDX (Astro highlight default class)
 .astro-code {
   padding: .75rem;
   @include border-radius($border-radius);
 }
+
+.docs-page {
+  // Constrain the docs card to a comfortable reading width.
+  // Tables and code blocks inside can still scroll horizontally if needed.
+  .app-content > .container-fluid {
+    max-width: 60rem; // ~960px
+
+    @include media-breakpoint-up(xxl) {
+      max-width: 64rem;
+    }
+  }
+
+  //
+  // Card body — breathing room + prose typography.
+  // Only applied inside docs content cards so demo-page card content
+  // stays unchanged.
+  //
+  .card > .card-body {
+    padding: 1.5rem;
+    font-size: 1rem;
+    line-height: 1.7;
+    color: var(--#{$prefix}body-color);
+
+    @include media-breakpoint-up(md) {
+      padding: 2.5rem;
+    }
+
+    //
+    // Heading hierarchy. The MDX content in src/html/components/docs/ uses
+    // ##### (h5) as the dominant section heading and ###### (h6) as a
+    // sub-heading (most visible in FAQ.mdx, where h5 is a topic and h6 is
+    // a question). Style h5 as a major section and h6 as a sub-section so
+    // the visual hierarchy matches the semantic one.
+    //
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+      margin-top: 2em;
+      margin-bottom: .5em;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--#{$prefix}emphasis-color);
+      scroll-margin-top: 4rem; // anchor-link friendly
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h2,
+    .h2 {
+      padding-bottom: .35em;
+      font-size: 1.75rem;
+      border-bottom: 1px solid var(--#{$prefix}border-color);
+    }
+
+    h3,
+    .h3 {
+      font-size: 1.4rem;
+    }
+
+    h4,
+    .h4 {
+      font-size: 1.2rem;
+    }
+
+    // h5 is the dominant section heading across docs MDX files. Give it
+    // a visible separator above so sections are easy to scan.
+    h5,
+    .h5 {
+      padding-top: 1.5em;
+      margin-top: 2.5em;
+      font-size: 1.3rem;
+      border-top: 1px solid var(--#{$prefix}border-color);
+
+      &:first-child {
+        padding-top: 0;
+        border-top: 0;
+      }
+    }
+
+    // h6 is the sub-section / FAQ question style. Smaller than h5 but
+    // still distinctly heading-like, with a touch of accent colour to
+    // separate from body text.
+    h6,
+    .h6 {
+      margin-top: 1.75em;
+      font-size: 1.08rem;
+      color: var(--#{$prefix}emphasis-color);
+    }
+
+    //
+    // Paragraphs and lists.
+    //
+    p,
+    ul,
+    ol,
+    dl,
+    blockquote,
+    table {
+      margin-bottom: 1.1rem;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.5rem;
+
+      li {
+        margin-bottom: .35rem;
+      }
+
+      // Tighter nested lists
+      ul,
+      ol {
+        margin-top: .35rem;
+        margin-bottom: 0;
+      }
+    }
+
+    // Lead-style first paragraph (just after a heading)
+    h2 + p,
+    h3 + p,
+    h5 + p {
+      margin-top: 0;
+    }
+
+    //
+    // Inline code — pill style that complements MDX's syntax-highlighted blocks.
+    //
+    p code,
+    li code,
+    td code,
+    th code,
+    h2 code,
+    h3 code,
+    h4 code,
+    h5 code,
+    h6 code {
+      padding: .15em .4em;
+      font-size: .875em;
+      color: var(--#{$prefix}emphasis-color);
+      background: var(--#{$prefix}tertiary-bg);
+      border: 1px solid var(--#{$prefix}border-color);
+      @include border-radius($border-radius-sm);
+    }
+
+    //
+    // Code blocks.
+    //
+    pre.astro-code,
+    pre {
+      padding: 1rem 1.25rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.5rem;
+      overflow-x: auto;
+      font-size: .875rem;
+      line-height: 1.6;
+      @include border-radius($border-radius);
+
+      code {
+        padding: 0;
+        background: transparent;
+        border: 0;
+      }
+    }
+
+    //
+    // Tables — reference-doc styling with hairline borders.
+    //
+    table {
+      width: 100%;
+      margin-top: 1.25rem;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+      font-size: .95rem;
+      border-collapse: collapse;
+      border: 1px solid var(--#{$prefix}border-color);
+      @include border-radius($border-radius-sm);
+
+      th,
+      td {
+        padding: .65rem .9rem;
+        text-align: left;
+        vertical-align: top;
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+      }
+
+      th {
+        font-weight: 600;
+        color: var(--#{$prefix}emphasis-color);
+        background: var(--#{$prefix}tertiary-bg);
+      }
+
+      tr:last-child td {
+        border-bottom: 0;
+      }
+
+      code {
+        white-space: nowrap;
+      }
+    }
+
+    //
+    // Blockquotes used as info callouts.
+    //
+    blockquote {
+      padding: .85rem 1.1rem;
+      margin-top: 1.25rem;
+      color: var(--#{$prefix}emphasis-color);
+      background: var(--#{$prefix}info-bg-subtle);
+      border-left: 4px solid var(--#{$prefix}info-border-subtle);
+      @include border-radius($border-radius-sm);
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+
+      code {
+        background: rgba(0, 0, 0, .05);
+      }
+    }
+
+    //
+    // Prose links — stand out more than Bootstrap defaults.
+    //
+    a:not(.btn):not(.nav-link) {
+      color: var(--#{$prefix}primary);
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 3px;
+
+      &:hover {
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    //
+    // Horizontal rule — used as additional section separator.
+    //
+    hr {
+      margin: 2.5rem 0;
+      border: 0;
+      border-top: 1px solid var(--#{$prefix}border-color);
+      opacity: 1;
+    }
+
+    //
+    // Lead paragraph — the first paragraph in any doc is a summary.
+    // Visually heavier so it functions as a deck.
+    //
+    > p:first-child,
+    > p:first-of-type {
+      margin-bottom: 2rem;
+      font-size: 1.125rem;
+      line-height: 1.6;
+      color: var(--#{$prefix}body-color);
+    }
+
+    //
+    // FAQ / disclosure accordion — uses native <details>/<summary>.
+    // Add `.faq-item` to <details> to opt in.
+    //
+    details.faq-item {
+      margin-bottom: .5rem;
+      overflow: hidden;
+      background: var(--#{$prefix}body-bg);
+      border: 1px solid var(--#{$prefix}border-color);
+      @include border-radius($border-radius);
+      @include transition(border-color .15s ease, box-shadow .15s ease);
+
+      &:hover {
+        border-color: var(--#{$prefix}primary-border-subtle);
+      }
+
+      &[open] {
+        background: var(--#{$prefix}body-bg);
+        border-color: var(--#{$prefix}primary-border-subtle);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
+      }
+
+      summary {
+        position: relative;
+        padding: .9rem 3rem .9rem 1.1rem;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--#{$prefix}emphasis-color);
+        list-style: none;
+        cursor: pointer;
+        user-select: none;
+        @include transition(color .15s ease);
+
+        // Hide the default disclosure triangle in Webkit/Blink
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        // Hide the marker in modern Firefox too
+        &::marker {
+          content: "";
+        }
+
+        &:hover {
+          color: var(--#{$prefix}primary);
+        }
+
+        // Right-side chevron, rotates on open
+        &::after {
+          position: absolute;
+          top: 50%;
+          right: 1.1rem;
+          display: inline-block;
+          width: .55rem;
+          height: .55rem;
+          margin-top: -.4rem;
+          content: "";
+          border-right: 2px solid currentcolor;
+          border-bottom: 2px solid currentcolor;
+          opacity: .55;
+          transform: rotate(45deg);
+          @include transition(transform .2s ease);
+        }
+      }
+
+      &[open] > summary {
+        color: var(--#{$prefix}primary);
+        border-bottom: 1px solid var(--#{$prefix}border-color);
+
+        &::after {
+          margin-top: -.15rem;
+          opacity: 1;
+          transform: rotate(-135deg);
+        }
+      }
+
+      // Content (everything after <summary>) gets the inner padding
+      > *:not(summary) {
+        padding-right: 1.1rem;
+        padding-left: 1.1rem;
+      }
+
+      > *:not(summary):first-of-type {
+        padding-top: 1rem;
+      }
+
+      > *:not(summary):last-child {
+        padding-bottom: 1rem;
+      }
+
+      // Tighten paragraphs/lists inside an FAQ answer
+      p,
+      ul,
+      ol {
+        margin-bottom: .65rem;
+      }
+
+      > *:last-child p:last-child,
+      > p:last-child,
+      > ul:last-child,
+      > ol:last-child {
+        margin-bottom: 0;
+      }
+
+      // Code blocks inside an FAQ answer get a less-distracting bg
+      pre.astro-code,
+      pre {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+  }
+
+  // Dark-mode tweak: blockquote info bg needs more contrast on dark
+  &[data-bs-theme="dark"],
+  [data-bs-theme="dark"] & {
+    .card > .card-body blockquote code {
+      background: rgba(255, 255, 255, .08);
+    }
+  }
+}
+
+//
+// FAQ page — custom layout that breaks out of the standard docs card
+// to give the FAQ a more distinctive visual identity. Opt in via
+// body.faq-page (set in pages/docs/faq.astro).
+//
+
+.faq-page {
+  // The FAQ doesn't use the standard card wrapper used by other docs,
+  // so the container can stretch wider for the chip strip and section
+  // grid.
+  .app-content > .container-fluid {
+    max-width: 64rem;
+
+    @include media-breakpoint-up(xxl) {
+      max-width: 72rem;
+    }
+  }
+
+  // --- Hero -------------------------------------------------------------
+  .faq-hero {
+    position: relative;
+    padding: 3rem 1.5rem 2.5rem;
+    margin-top: 1rem;
+    overflow: hidden;
+    background: radial-gradient(ellipse at top left, rgba(var(--#{$prefix}primary-rgb), .12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--#{$prefix}info-rgb), .1), transparent 65%), var(--#{$prefix}body-bg);
+    border: 1px solid var(--#{$prefix}border-color);
+    @include border-radius($border-radius-xl);
+  }
+
+  .faq-hero-eyebrow {
+    display: inline-flex;
+    gap: .4rem;
+    align-items: center;
+    padding: .35rem .85rem;
+    margin-bottom: 1rem;
+    font-size: .75rem;
+    font-weight: 600;
+    color: var(--#{$prefix}primary);
+    text-transform: uppercase;
+    letter-spacing: .08em;
+    background: var(--#{$prefix}primary-bg-subtle);
+    border: 1px solid var(--#{$prefix}primary-border-subtle);
+    @include border-radius(50rem);
+
+    .bi {
+      font-size: .9rem;
+    }
+  }
+
+  .faq-hero-title {
+    margin: 0 0 .5rem;
+    font-size: 2.25rem;
+    font-weight: 700;
+    line-height: 1.15;
+    color: var(--#{$prefix}emphasis-color);
+
+    @include media-breakpoint-up(md) {
+      font-size: 2.75rem;
+    }
+  }
+
+  .faq-hero-lead {
+    max-width: 36rem;
+    margin: 0 auto 1.75rem;
+    font-size: 1.05rem;
+    line-height: 1.55;
+    color: var(--#{$prefix}secondary-color);
+  }
+
+  .faq-search {
+    position: relative;
+    max-width: 32rem;
+    margin: 0 auto;
+
+    .form-control {
+      height: 3rem;
+      padding-right: 3rem;
+      padding-left: 3rem;
+      font-size: 1rem;
+      background: var(--#{$prefix}body-bg);
+      @include border-radius(50rem);
+      @include transition(box-shadow .15s ease, border-color .15s ease);
+
+      &:focus {
+        box-shadow: 0 0 0 .25rem rgba(var(--#{$prefix}primary-rgb), .15);
+      }
+    }
+  }
+
+  .faq-search-icon {
+    position: absolute;
+    top: 50%;
+    left: 1.2rem;
+    color: var(--#{$prefix}secondary-color);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  .faq-search-clear {
+    position: absolute;
+    top: 50%;
+    right: .65rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    color: var(--#{$prefix}secondary-color);
+    background: var(--#{$prefix}tertiary-bg);
+    border: 0;
+    transform: translateY(-50%);
+    @include border-radius(50%);
+    @include transition(background .15s ease, color .15s ease);
+
+    &:hover {
+      color: var(--#{$prefix}body-color);
+      background: var(--#{$prefix}secondary-bg);
+    }
+  }
+
+  .faq-empty-state {
+    max-width: 32rem;
+    padding: 1rem;
+    margin: 1.5rem auto 0;
+    font-size: .95rem;
+    color: var(--#{$prefix}secondary-color);
+    background: var(--#{$prefix}tertiary-bg);
+    @include border-radius($border-radius);
+
+    .bi {
+      margin-right: .35rem;
+    }
+  }
+
+  // --- Section nav chips ------------------------------------------------
+  .faq-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    justify-content: center;
+  }
+
+  .faq-chip {
+    display: inline-flex;
+    gap: .45rem;
+    align-items: center;
+    padding: .45rem .85rem;
+    font-size: .875rem;
+    font-weight: 500;
+    color: var(--#{$prefix}body-color);
+    text-decoration: none;
+    background: var(--#{$prefix}body-bg);
+    border: 1px solid var(--#{$prefix}border-color);
+    @include border-radius(50rem);
+    @include transition(transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease);
+
+    &:hover {
+      color: var(--#{$prefix}emphasis-color);
+      background: var(--#{$prefix}tertiary-bg);
+      transform: translateY(-1px);
+    }
+
+    .bi {
+      font-size: 1rem;
+    }
+  }
+
+  .faq-chip-count {
+    padding: 0 .45rem;
+    font-size: .7rem;
+    font-weight: 600;
+    color: var(--#{$prefix}secondary-color);
+    background: var(--#{$prefix}tertiary-bg);
+    @include border-radius(50rem);
+  }
+
+  // Per-section chip accent on hover/active
+  @each $tone in (primary, info, warning, success, danger, secondary) {
+    .faq-chip-#{$tone}:hover {
+      color: var(--#{$prefix}#{$tone}-text-emphasis);
+      background: var(--#{$prefix}#{$tone}-bg-subtle);
+      border-color: var(--#{$prefix}#{$tone}-border-subtle);
+
+      .faq-chip-count {
+        color: var(--#{$prefix}#{$tone}-text-emphasis);
+        background: rgba(0, 0, 0, .06);
+      }
+    }
+  }
+
+  // --- Sections ---------------------------------------------------------
+  .faq-section {
+    margin-bottom: 2.5rem;
+    scroll-margin-top: 5rem;
+  }
+
+  .faq-section-header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    background: var(--#{$prefix}body-bg);
+    border: 1px solid var(--#{$prefix}border-color);
+    border-left: 4px solid var(--#{$prefix}primary);
+    @include border-radius($border-radius);
+  }
+
+  .faq-section-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.35rem;
+    color: var(--#{$prefix}primary);
+    background: var(--#{$prefix}primary-bg-subtle);
+    @include border-radius($border-radius);
+  }
+
+  .faq-section-title {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--#{$prefix}emphasis-color);
+  }
+
+  .faq-section-count {
+    margin: .1rem 0 0;
+    font-size: .8rem;
+    color: var(--#{$prefix}secondary-color);
+  }
+
+  // Per-section tone accents
+  @each $tone in (primary, info, warning, success, danger, secondary) {
+    .faq-section-#{$tone} {
+      border-left-color: var(--#{$prefix}#{$tone});
+
+      .faq-section-icon {
+        color: var(--#{$prefix}#{$tone}-text-emphasis);
+        background: var(--#{$prefix}#{$tone}-bg-subtle);
+      }
+    }
+  }
+
+  // --- FAQ items (override the generic .docs-page details styling) ------
+  .faq-section-items .faq-item {
+    margin-bottom: .5rem;
+    overflow: hidden;
+    background: var(--#{$prefix}body-bg);
+    border: 1px solid var(--#{$prefix}border-color);
+    @include border-radius($border-radius);
+    @include transition(border-color .15s ease, box-shadow .15s ease, transform .15s ease);
+
+    &:hover {
+      border-color: var(--#{$prefix}primary-border-subtle);
+      transform: translateX(2px);
+    }
+
+    &[open] {
+      border-color: var(--#{$prefix}primary-border-subtle);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
+      transform: none;
+    }
+
+    summary {
+      display: flex;
+      gap: .85rem;
+      align-items: center;
+      padding: 1rem 1.25rem;
+      font-size: 1rem;
+      font-weight: 500;
+      color: var(--#{$prefix}emphasis-color);
+      list-style: none;
+      cursor: pointer;
+      user-select: none;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &::marker {
+        content: "";
+      }
+
+      &::after {
+        content: none; // disable the generic chevron, we use our own
+      }
+    }
+
+    .faq-q-icon {
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      font-size: .85rem;
+      color: var(--#{$prefix}primary);
+      background: var(--#{$prefix}primary-bg-subtle);
+      @include border-radius(50%);
+    }
+
+    .faq-q-text {
+      flex-grow: 1;
+    }
+
+    .faq-q-chevron {
+      flex-shrink: 0;
+      color: var(--#{$prefix}secondary-color);
+      @include transition(transform .2s ease, color .2s ease);
+    }
+
+    &[open] .faq-q-chevron {
+      color: var(--#{$prefix}primary);
+      transform: rotate(180deg);
+    }
+
+    &[open] summary {
+      color: var(--#{$prefix}primary);
+      border-bottom: 1px solid var(--#{$prefix}border-color);
+    }
+
+    .faq-answer {
+      padding: 1.1rem 1.25rem 1.1rem 3.85rem; // align with the question text (icon + gap)
+      font-size: .95rem;
+      line-height: 1.65;
+      color: var(--#{$prefix}body-color);
+
+      p:last-child,
+      ul:last-child,
+      ol:last-child,
+      pre:last-child {
+        margin-bottom: 0;
+      }
+
+      a {
+        color: var(--#{$prefix}primary);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+
+        &:hover {
+          text-decoration-thickness: 2px;
+        }
+      }
+
+      code {
+        padding: .12em .35em;
+        font-size: .875em;
+        color: var(--#{$prefix}emphasis-color);
+        background: var(--#{$prefix}tertiary-bg);
+        border: 1px solid var(--#{$prefix}border-color);
+        @include border-radius($border-radius-sm);
+      }
+
+      pre.astro-code,
+      pre {
+        padding: .85rem 1rem;
+        margin-top: .75rem;
+        margin-bottom: .75rem;
+        overflow-x: auto;
+        font-size: .85rem;
+        line-height: 1.55;
+        @include border-radius($border-radius-sm);
+
+        code {
+          padding: 0;
+          background: transparent;
+          border: 0;
+        }
+      }
+    }
+  }
+
+  // --- CTA footer -------------------------------------------------------
+  .faq-cta {
+    padding: 2.5rem 1.5rem;
+    text-align: center;
+    background: radial-gradient(ellipse at top, rgba(var(--#{$prefix}primary-rgb), .08), transparent 60%), var(--#{$prefix}body-bg);
+    border: 1px solid var(--#{$prefix}border-color);
+    @include border-radius($border-radius-xl);
+  }
+
+  .faq-cta-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.5rem;
+    height: 3.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.6rem;
+    color: var(--#{$prefix}primary);
+    background: var(--#{$prefix}primary-bg-subtle);
+    @include border-radius(50%);
+  }
+
+  .faq-cta h2 {
+    margin: 0 0 .5rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--#{$prefix}emphasis-color);
+  }
+
+  .faq-cta p {
+    max-width: 32rem;
+    margin: 0 auto 1.5rem;
+    color: var(--#{$prefix}secondary-color);
+  }
+
+  .faq-cta-actions {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    justify-content: center;
+  }
+}