nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.Popup.css

@@ -0,0 +1,731 @@
+@layer nexus.components {
+  /*
+   * Popup: a native <dialog> shown modally. The panel is the dialog itself, so a click on the backdrop reaches the
+   * dialog element and nothing else. The header and footer stay while the body scrolls.
+   */
+  .nx-popup {
+    --nx-popup-width: 560px;
+
+    /* Percentages, not vw: the viewport width here leaves out the scrollbar. */
+    width: min(var(--nx-popup-width), calc(100% - 32px));
+    max-width: none;
+    max-height: min(calc(100vh - 48px), calc(100dvh - 48px));
+    margin: auto;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    box-shadow: var(--nx-shadow);
+    outline: none;
+    /* Where the title bar moved it, from the center (set by the Popup while dragging). */
+    translate: var(--nx-popup-x, 0px) var(--nx-popup-y, 0px);
+  }
+
+  .nx-popup[open] {
+    display: flex;
+    flex-direction: column;
+    animation: nx-popup-in 180ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-popup::backdrop {
+    background: rgb(0 0 0 / 0.5);
+    animation: nx-popup-fade-in 180ms ease-out;
+  }
+
+  /* A closing popup takes no more clicks, so a double-click on Save does not submit twice. */
+  .nx-popup--closing[open] {
+    animation: nx-popup-out 140ms ease-in forwards;
+    pointer-events: none;
+  }
+
+  .nx-popup--closing::backdrop {
+    animation: nx-popup-fade-out 140ms ease-in forwards;
+  }
+
+  @keyframes nx-popup-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.98);
+    }
+  }
+
+  @keyframes nx-popup-out {
+    to {
+      opacity: 0;
+      transform: translateY(6px) scale(0.98);
+    }
+  }
+
+  @keyframes nx-popup-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes nx-popup-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* The page behind a modal popup stops scrolling; the Popup sets --nx-scrollbar-gap to the scrollbar's width, so nothing shifts. */
+  :root:has(.nx-popup:modal) {
+    overflow: hidden;
+    padding-right: var(--nx-scrollbar-gap, 0px);
+  }
+
+  /* Sizes */
+  .nx-popup--xs {
+    --nx-popup-width: 360px;
+  }
+
+  .nx-popup--sm {
+    --nx-popup-width: 440px;
+  }
+
+  .nx-popup--lg {
+    --nx-popup-width: 720px;
+  }
+
+  .nx-popup--xl {
+    --nx-popup-width: 960px;
+  }
+
+  .nx-popup--full {
+    --nx-popup-width: calc(100% - 32px);
+
+    height: calc(100vh - 32px);
+    max-height: none;
+  }
+
+  /* Maximized: the whole window, edge to edge, wherever it was moved. Two classes, to win over the sizes and phones. */
+  .nx-popup.nx-popup--maximized {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border-width: 0;
+    border-radius: 0;
+    translate: none;
+  }
+
+  /* Minimizing: the page comes back while the popup flies to the dock. */
+  .nx-popup[data-nx-minimizing] {
+    pointer-events: none;
+  }
+
+  .nx-popup[data-nx-minimizing]::backdrop {
+    animation: nx-popup-fade-out 200ms ease-in forwards;
+  }
+
+  /* Header, either design: the title bar moves the popup, so it selects no text and a touch drags instead of scrolling. */
+  .nx-popup__head {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .nx-popup--movable .nx-popup__head {
+    cursor: move;
+    touch-action: none;
+    user-select: none;
+  }
+
+  .nx-popup__title,
+  .nx-popup__description {
+    margin: 0;
+  }
+
+  .nx-popup__controls {
+    display: flex;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  .nx-popup__control {
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-popup__control .nx-icon {
+    vertical-align: 0;
+  }
+
+  /* Close turns red on hover, the one button that throws away what the popup holds. */
+  .nx-popup__close:hover {
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+  }
+
+  /*
+   * Window (the default): one low title bar, as on a desktop window. The icon and the title on the left, the
+   * description after the title in muted text, and the window buttons filling the top right corner.
+   */
+  .nx-popup--window {
+    --nx-popup-bar: 32px;
+  }
+
+  .nx-popup--window .nx-popup__head {
+    box-sizing: content-box;
+    align-items: center;
+    gap: var(--nx-space-2);
+    height: var(--nx-popup-bar);
+    padding-left: var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+    background: color-mix(in oklab, var(--nx-surface), var(--nx-text) 4%);
+  }
+
+  .nx-popup--window .nx-popup__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    color: var(--nx-primary);
+  }
+
+  .nx-popup--window .nx-popup__icon .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  /* One line: the title keeps its room, the description takes what is left, and both end in … when cut. */
+  .nx-popup--window .nx-popup__heading {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: baseline;
+    gap: var(--nx-space-2);
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .nx-popup--window .nx-popup__title {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    line-height: var(--nx-popup-bar);
+    text-overflow: ellipsis;
+  }
+
+  .nx-popup--window .nx-popup__description {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    text-overflow: ellipsis;
+  }
+
+  .nx-popup--window .nx-popup__controls {
+    align-self: stretch;
+  }
+
+  .nx-popup--window .nx-popup__control {
+    width: 46px;
+    height: 100%;
+  }
+
+  .nx-popup--window .nx-popup__control:hover {
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+    color: var(--nx-text);
+  }
+
+  .nx-popup--window .nx-popup__control:active {
+    background: color-mix(in oklab, var(--nx-text) 15%, transparent);
+  }
+
+  .nx-popup--window .nx-popup__close:hover {
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+  }
+
+  .nx-popup--window .nx-popup__close:active {
+    background: var(--nx-danger-hover);
+  }
+
+  /* The buttons touch the popup's edges, where an outer ring would be cut off, so the ring is drawn inside. */
+  .nx-popup--window .nx-popup__control:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  /* Thin lines, as desktop window buttons have; the square glyphs fill more of their box, so they are drawn smaller. */
+  .nx-popup--window .nx-popup__control .nx-icon {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
+
+  .nx-popup--window .nx-popup__maximize .nx-icon {
+    width: 13px;
+    height: 13px;
+    stroke-width: 1.75;
+  }
+
+  /* Touch screens get taller buttons. */
+  @media (pointer: coarse) {
+    .nx-popup--window {
+      --nx-popup-bar: 40px;
+    }
+
+    .nx-popup--window .nx-popup__control {
+      width: 48px;
+    }
+  }
+
+  /*
+   * Dialog (message boxes): a larger heading, the icon in a circle that carries the tone, the description under the
+   * title, and a small close button.
+   */
+  .nx-popup--dialog .nx-popup__head {
+    align-items: flex-start;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-5) var(--nx-space-5) 0;
+  }
+
+  .nx-popup--dialog .nx-popup__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+  }
+
+  .nx-popup--dialog .nx-popup__icon .nx-icon {
+    width: 22px;
+    height: 22px;
+    vertical-align: 0;
+  }
+
+  .nx-popup--dialog .nx-popup__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-top: 2px;
+  }
+
+  .nx-popup--dialog .nx-popup__title {
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-popup--dialog .nx-popup__description {
+    margin-top: 4px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+  }
+
+  .nx-popup--dialog .nx-popup__controls {
+    gap: 2px;
+    margin: -6px -8px 0 auto;
+  }
+
+  .nx-popup--dialog .nx-popup__control {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--nx-radius);
+  }
+
+  .nx-popup--dialog .nx-popup__control:not(.nx-popup__close):hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-popup--dialog .nx-popup__control:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-popup--dialog .nx-popup__control .nx-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .nx-popup--dialog .nx-popup__maximize .nx-icon {
+    width: 15px;
+    height: 15px;
+  }
+
+  /* Body: scrolls when the content is taller than the window allows. */
+  .nx-popup__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--nx-space-4) var(--nx-space-5) var(--nx-space-5);
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  .nx-popup__head + .nx-popup__body:empty {
+    padding-top: var(--nx-space-2);
+  }
+
+  .nx-popup__body:only-child,
+  .nx-popup--window .nx-popup__body {
+    padding-top: var(--nx-space-5);
+  }
+
+  .nx-popup--flush .nx-popup__body {
+    padding: 0;
+  }
+
+  /* Footer: buttons at the end. */
+  .nx-popup__foot {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-3) var(--nx-space-5);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* Message boxes: a small popup whose icon carries the tone. */
+  .nx-popup--message .nx-popup__body {
+    padding-top: var(--nx-space-2);
+  }
+
+  .nx-popup--message .nx-popup__body:empty {
+    padding: var(--nx-space-3) 0 0;
+  }
+
+  .nx-message__text {
+    color: var(--nx-text-muted);
+    line-height: 1.5;
+  }
+
+  .nx-message__form {
+    display: grid;
+    gap: var(--nx-space-4);
+  }
+
+  .nx-popup--tone-info .nx-popup__icon {
+    background: var(--nx-info-soft);
+    color: var(--nx-info);
+  }
+
+  .nx-popup--tone-success .nx-popup__icon {
+    background: var(--nx-success-soft);
+    color: var(--nx-success);
+  }
+
+  .nx-popup--tone-warning .nx-popup__icon {
+    background: var(--nx-warning-soft);
+    color: var(--nx-warning);
+  }
+
+  .nx-popup--tone-danger .nx-popup__icon {
+    background: var(--nx-danger-soft);
+    color: var(--nx-danger);
+  }
+
+  /*
+   * The dock: minimized popups as bars at the bottom right. Several stack behind the newest, with cards peeking out
+   * above it and a count that opens the whole list. It sits on the page, so an open popup's backdrop covers it.
+   */
+  .nx-dock {
+    --nx-dock-edge: 16px;
+
+    position: fixed;
+    right: calc(var(--nx-dock-edge) + env(safe-area-inset-right, 0px));
+    bottom: calc(var(--nx-dock-edge) + env(safe-area-inset-bottom, 0px));
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--nx-space-2);
+    width: min(300px, calc(100% - 2 * var(--nx-dock-edge)));
+    max-height: calc(100dvh - 2 * var(--nx-dock-edge));
+    /* Only the bars and the count take clicks, not the space between them. */
+    pointer-events: none;
+  }
+
+  .nx-dock > * {
+    pointer-events: auto;
+  }
+
+  /* While a popup locks the page, its scrollbar's space is padding; the dock keeps its place beside it. */
+  :root:has(.nx-popup:modal) .nx-dock {
+    right: calc(var(--nx-dock-edge) + var(--nx-scrollbar-gap, 0px) + env(safe-area-inset-right, 0px));
+  }
+
+  .nx-dock__toggle {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 6px;
+    height: 28px;
+    padding: 0 10px 0 4px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-full);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    color: var(--nx-text);
+    box-shadow: var(--nx-shadow-sm);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-dock__toggle:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-dock__toggle:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-dock__toggle .nx-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dock__count {
+    display: grid;
+    place-items: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  .nx-dock__list {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Open: the whole list, oldest at the top; it scrolls when taller than the window, with room for the shadows. */
+  .nx-dock--open .nx-dock__list {
+    margin: -8px;
+    padding: 8px;
+    width: calc(100% + 16px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* Stacked: one or two cards peek out above the newest bar; a click on them opens the list. */
+  .nx-dock__list[data-depth] {
+    margin-top: calc(var(--nx-dock-depth) * 5px);
+    cursor: pointer;
+  }
+
+  .nx-dock__list[data-depth="1"] {
+    --nx-dock-depth: 1;
+  }
+
+  .nx-dock__list[data-depth="2"] {
+    --nx-dock-depth: 2;
+  }
+
+  .nx-dock__list[data-depth]::before,
+  .nx-dock__list[data-depth="2"]::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    right: 8px;
+    left: 8px;
+    z-index: -1;
+    height: 24px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    box-shadow: var(--nx-shadow-sm);
+  }
+
+  .nx-dock__list[data-depth="2"]::after {
+    top: -10px;
+    right: 16px;
+    left: 16px;
+    z-index: -2;
+  }
+
+  .nx-dock__item {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+    height: 44px;
+    padding-right: 6px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    color: var(--nx-text);
+    box-shadow: var(--nx-shadow);
+    cursor: default;
+    transition: background-color var(--nx-duration);
+    animation: nx-dock-in 180ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-dock__item:has(.nx-dock__window:hover) {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-dock__item:has(.nx-dock__window:focus-visible) {
+    box-shadow: var(--nx-focus-ring), var(--nx-shadow);
+  }
+
+  /* The bar's title part brings the popup back. */
+  .nx-dock__window {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    height: 100%;
+    padding: 0 6px 0 7px;
+    border: 0;
+    border-radius: inherit;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nx-dock__window:focus-visible {
+    outline: none;
+  }
+
+  .nx-dock__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--nx-radius);
+    background: var(--nx-primary-soft);
+    color: var(--nx-primary);
+  }
+
+  .nx-dock__icon .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-dock__title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-size: var(--nx-text-md);
+    font-weight: 600;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nx-dock__restore {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-dock__window:hover .nx-dock__restore {
+    color: var(--nx-text);
+  }
+
+  .nx-dock__close {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-dock__close:hover {
+    background: var(--nx-danger-solid);
+    color: var(--nx-danger-text);
+  }
+
+  .nx-dock__close:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-dock__close .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  @keyframes nx-dock-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .nx-popup {
+      width: calc(100% - 16px);
+      max-height: min(calc(100vh - 16px), calc(100dvh - 16px));
+    }
+
+    .nx-popup--dialog .nx-popup__head {
+      padding: var(--nx-space-4) var(--nx-space-4) 0;
+    }
+
+    .nx-popup__body {
+      padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-4);
+    }
+
+    .nx-popup--window:not(.nx-popup--flush) .nx-popup__body {
+      padding-top: var(--nx-space-4);
+    }
+
+    .nx-popup__foot {
+      padding: var(--nx-space-3) var(--nx-space-4);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-popup[open],
+    .nx-popup--closing[open],
+    .nx-popup::backdrop,
+    .nx-popup--closing::backdrop,
+    .nx-popup[data-nx-minimizing]::backdrop,
+    .nx-dock__item {
+      animation: none;
+    }
+  }
+}