@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/styles/UniversalSearch.module.scss

@@ -0,0 +1,229 @@
+// ============================================================================
+// Universal search — the ⌘K palette
+// ----------------------------------------------------------------------------
+// Mounts inside Navigation's `.hactions > ul`, whose chip rules reach every
+// descendant `a` and `button` and hand them white text on a fixed 36px box.
+// On a white panel that renders as blank boxes, so — exactly as Vault and Sms
+// do — nothing here inherits anything it actually needs. Every token carries a
+// fallback, because a var() on an undefined property with no fallback is
+// invalid at computed-value time and the whole declaration is dropped.
+// ============================================================================
+
+.wrap {
+    --us-primary: var(--primary-color, #1b3933);
+    --us-ink: var(--paragraph-color, #2b2b2b);
+    --us-surface: var(--background-color, #fff);
+    --us-line: color-mix(in srgb, var(--us-ink) 14%, transparent);
+    --us-muted: color-mix(in srgb, var(--us-ink) 66%, transparent);
+    --us-quiet: color-mix(in srgb, var(--us-ink) 4%, var(--us-surface));
+    --us-hover: color-mix(in srgb, var(--us-primary) 8%, var(--us-surface));
+    --us-motion: var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+// The same 40px chip as Notification and VaultQuickSearch, so the counts and
+// controls in the header read as one row rather than three treatments.
+.trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nav-action-size, 34px);
+    height: var(--nav-action-size, 34px);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nav-chip-radius, var(--radius-pill, 999px));
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background var(--us-motion);
+}
+
+.trigger:hover { background: rgba(255, 255, 255, 0.14); }
+
+.trigger:focus-visible {
+    outline: 2px solid var(--highlight-color, #3cbf7d);
+    outline-offset: 2px;
+}
+
+.overlay {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    z-index: 1200;
+}
+
+.panel {
+    width: min(620px, calc(100vw - 2rem));
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--us-line);
+    border-radius: 14px;
+    background: var(--us-surface);
+    color: var(--us-ink);
+    // Two stops: a tight contact shadow plus a wide ambient one. One large
+    // blur reads as a smudge rather than a raised surface.
+    box-shadow:
+        0 2px 4px color-mix(in srgb, var(--us-primary) 10%, transparent),
+        0 24px 48px -20px color-mix(in srgb, var(--us-primary) 40%, transparent);
+    overflow: hidden;
+}
+
+// -- the field ---------------------------------------------------------------
+
+.field {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.7rem 0.85rem;
+    border-bottom: 1px solid var(--us-line);
+}
+
+.fieldIcon { flex: 0 0 auto; color: var(--us-muted); }
+
+.input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: var(--us-ink);
+    font: inherit;
+    font-size: 0.9375rem;
+    line-height: 1.4;
+}
+
+.input:focus { outline: none; }   // the panel itself is the focus surface
+.input::placeholder { color: var(--us-muted); }
+
+// -- results -----------------------------------------------------------------
+
+.results {
+    // Scrolls inside the panel; a long result set must never make the page
+    // scroll behind the overlay.
+    max-height: min(52vh, 26rem);
+    overflow-y: auto;
+    padding: 0.35rem 0;
+}
+
+.state {
+    margin: 0;
+    padding: 1.1rem 0.9rem;
+    color: var(--us-muted);
+    font-size: 0.8125rem;
+    text-align: center;
+}
+
+.group { padding: 0.25rem 0; }
+
+.groupLabel {
+    margin: 0;
+    padding: 0.4rem 0.9rem 0.25rem;
+    color: var(--us-muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.rows {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+// `> li` reset restated explicitly: the host's own `li` rules are 0,1,2 and no
+// single module class can outrank them. Same note as the Sms and Vault lists.
+.rows > li {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    list-style: none;
+}
+
+.row {
+    display: grid;
+    // A fixed final track for the ↵ hint, so a row does not reflow when it
+    // becomes the active one.
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: baseline;
+    gap: 0.15rem 0.6rem;
+    width: 100%;
+    height: auto;
+    min-height: 0;
+    padding: 0.5rem 0.9rem;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: var(--us-ink);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--us-motion);
+}
+
+.rowActive { background: var(--us-hover); }
+
+.rowTitle {
+    grid-column: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.rowSub {
+    grid-column: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--us-muted);
+    font-size: 0.75rem;
+}
+
+.rowEnter {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: center;
+    color: var(--us-muted);
+}
+
+// -- footer ------------------------------------------------------------------
+
+.foot {
+    display: flex;
+    gap: 1rem;
+    padding: 0.5rem 0.9rem;
+    border-top: 1px solid var(--us-line);
+    background: var(--us-quiet);
+    color: var(--us-muted);
+    font-size: 0.6875rem;
+}
+
+.kbd {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.3rem;
+    min-width: 1.1rem;
+    height: 1.1rem;
+    border: 1px solid var(--us-line);
+    border-radius: 4px;
+    background: var(--us-surface);
+    color: var(--us-muted);
+    font-family: inherit;
+    font-size: 0.6875rem;
+    line-height: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .trigger,
+    .row { transition: none; }
+}

package/src/components/styles/Vault.module.scss

@@ -482,6 +482,16 @@ $vault-tick: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
     cursor: pointer;
 }
 
+// A select that is currently narrowing the list. Without it a filter picked
+// from a row's chip is a change the user did not make in the toolbar and can
+// easily fail to notice — and then the vault looks half empty.
+.selectActive {
+    border-color: color-mix(in srgb, var(--v-primary) 45%, transparent);
+    background: var(--v-tint);
+    color: var(--v-primary);
+    font-weight: 600;
+}
+
 // Every checkbox and radio in the vault carries this, so the box survives
 // being mounted anywhere — see `vault-check`. The descendant selectors below
 // repeat it only as a safety net for markup that forgets the class.
@@ -1981,3 +1991,406 @@ input.checkControl {
     font-size: 0.75rem;
     white-space: nowrap;
 }
+
+// ---------------------------------------------------------------------------
+// Client attachment
+//
+// A vault entry can belong to a client. On the form that is a typeahead; on
+// the list it is one line under the title, so the association is visible
+// without opening the entry.
+// ---------------------------------------------------------------------------
+
+.clientPicker {
+    position: relative;
+}
+
+.clientSpinner {
+    position: absolute;
+    top: 50%;
+    right: 0.55rem;
+    color: var(--v-muted);
+    transform: translateY(-50%);
+    animation: vault-client-spin 0.9s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes vault-client-spin {
+    to {
+        transform: translateY(-50%) rotate(360deg);
+    }
+}
+
+.clientResults {
+    position: absolute;
+    z-index: 30;
+    top: calc(100% + 4px);
+    right: 0;
+    left: 0;
+    // Roughly seven rows. Enough to scan, short enough that the field below
+    // it is still reachable without scrolling the modal.
+    max-height: 15rem;
+    margin: 0;
+    padding: 0.25rem;
+    overflow-y: auto;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    box-shadow: 0 12px 28px -12px rgb(0 0 0 / 35%);
+    list-style: none;
+}
+
+.clientResult,
+.clientResultActive {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: flex;
+    gap: 0.45rem;
+    align-items: center;
+    width: 100%;
+    padding: 0.4rem 0.5rem;
+    border-radius: var(--v-btn-br);
+    color: var(--v-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        color: var(--v-muted);
+    }
+}
+
+.clientResultActive {
+    background: var(--v-tint);
+    color: var(--v-primary);
+
+    svg {
+        color: currentcolor;
+    }
+}
+
+.clientEmpty {
+    padding: 0.5rem;
+    color: var(--v-muted);
+    font-size: 0.82rem;
+}
+
+.clientChosen {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    max-width: 100%;
+    padding: 0.35rem 0.4rem 0.35rem 0.55rem;
+    border: 1px solid var(--v-line);
+    border-radius: 999px;
+    background: var(--v-tint);
+    color: var(--v-primary);
+    font-size: 0.83rem;
+    font-weight: 600;
+}
+
+.clientChosenLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.clientClear {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.1rem;
+    height: 1.1rem;
+    border-radius: 999px;
+    color: currentcolor;
+    cursor: pointer;
+    opacity: 0.7;
+
+    &:hover {
+        background: color-mix(in srgb, currentcolor 18%, transparent);
+        opacity: 1;
+    }
+}
+
+// The client a credential belongs to, beside the title.
+//
+// A chip rather than loose grey text. Once the importer's duplicated
+// "Client — Title" prefix is stripped (vault:strip-client-titles) this is the
+// ONLY place the client is named on the row, so it has to be legible on its
+// own — but it must still read as secondary to the title, which is why it
+// takes the flattest surface in the palette (`--v-surface` is 4% of the body
+// colour) and the muted text colour rather than a tint of the brand.
+//
+// The icon stays: it is what separates this chip at a glance from the tag
+// pills sitting on the line below, which are the same size and shape.
+//
+// Inline, not block: the title cell is `white-space: nowrap` in fitted mode
+// and the chip is meant to sit on the title's line, with the tags taking the
+// second. `margin-left` is the whole fix for the run-on look.
+.clientUnderTitle {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    max-width: 100%;
+    margin-left: 0.45rem;
+    padding: 0.08rem 0.45rem;
+    border: 1px solid var(--v-line);
+    border-radius: 999px;
+    background: var(--v-surface);
+    color: var(--v-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    line-height: 1.5;
+    white-space: nowrap;
+    vertical-align: middle;
+
+    svg {
+        flex-shrink: 0;
+        // The glyph is decoration next to a name that is already the label;
+        // at full strength it competes with the text it introduces.
+        opacity: 0.75;
+    }
+
+    // The name itself. Own ellipsis rather than the cell's: the cell clips
+    // everything after the overflow point, which on a long client name would
+    // take the chip's right-hand border with it and leave a shape that reads
+    // as a rendering fault.
+    .clientChipLabel {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        // Roughly 22 characters. Past that the client is identified well
+        // enough and the title has the better claim on the row.
+        max-width: 11rem;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover,
+        &:focus-visible {
+            text-decoration: underline;
+        }
+    }
+
+    // The name, as the control that filters the list to this client. Reset to
+    // nothing and told to inherit: it has to be indistinguishable from the
+    // plain-text version of the same chip on a page that cannot filter, or the
+    // row grows a button-shaped thing in the middle of a title cell.
+    .clientChipButton {
+        @include vault-reset;
+        @include vault-focus;
+
+        display: block;
+        max-width: 11rem;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+
+        &:hover .clientChipLabel,
+        &:focus-visible .clientChipLabel {
+            text-decoration: underline;
+        }
+    }
+
+    // The link to the client's own record, kept alongside the filter button.
+    // Icon-only and quiet: filtering is the common intent from a row, opening
+    // the client is the occasional one.
+    .clientChipLink {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        opacity: 0.6;
+
+        &:hover,
+        &:focus-visible {
+            opacity: 1;
+        }
+
+        svg {
+            opacity: 1;
+        }
+    }
+
+    // The whole chip lifts on hover, so the target reads as the chip rather
+    // than as the few pixels of text inside it.
+    &:has(a:hover),
+    &:has(a:focus-visible),
+    &:has(button:hover),
+    &:has(button:focus-visible) {
+        border-color: color-mix(in srgb, var(--v-primary) 35%, transparent);
+        background: var(--v-tint);
+        color: var(--v-primary);
+    }
+}
+
+// The client this list is currently filtered to. Every visible row carries the
+// same chip once the filter is on, so this is not a highlight so much as a
+// statement of why these rows are the ones on screen.
+.clientUnderTitleActive {
+    border-color: color-mix(in srgb, var(--v-primary) 45%, transparent);
+    background: var(--v-tint);
+    color: var(--v-primary);
+}
+
+// ---------------------------------------------------------------------------
+// Share links
+//
+// The dialog behind the Share action: choose what to send, get a URL once, and
+// see what has already gone out. Everything here lives inside `.form`, which
+// already carries the token block, so these rules only add what the form's own
+// controls do not.
+// ---------------------------------------------------------------------------
+
+.shareFields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+
+    // The hint under a field name — "the current code, not the secret", or the
+    // reason a box is greyed out. Own line, so a long one does not push the
+    // checkbox off centre.
+    .shareHint {
+        display: block;
+        color: var(--v-muted);
+        font-size: 0.72rem;
+        font-style: normal;
+    }
+}
+
+// The one-time URL, and the sentence that makes it clear it IS one time.
+.shareResult {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+    padding: 0.85rem;
+    border: 1px solid color-mix(in srgb, var(--v-primary) 35%, transparent);
+    border-radius: var(--v-br);
+    background: var(--v-tint);
+}
+
+.shareResultHead {
+    display: flex;
+    gap: 0.35rem;
+    align-items: center;
+    margin: 0;
+    color: var(--v-primary);
+    font-size: 0.82rem;
+    font-weight: 700;
+}
+
+// Deliberately loud. The link is the credential, and the two things a person
+// has to take from this dialog — it will not be shown again, and anyone with
+// it can read the password — are both easy to skim past in body text.
+.shareWarning {
+    display: flex;
+    gap: 0.45rem;
+    align-items: flex-start;
+    margin: 0;
+    color: var(--v-paragraph);
+    font-size: 0.78rem;
+    line-height: 1.45;
+
+    svg {
+        flex-shrink: 0;
+        margin-top: 0.15rem;
+        color: var(--v-bad);
+    }
+
+    strong {
+        font-weight: 700;
+    }
+}
+
+.shareList {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding-top: 0.7rem;
+    border-top: 1px solid var(--v-line);
+
+    > p:first-child {
+        display: flex;
+        gap: 0.35rem;
+        align-items: center;
+        margin: 0 0 0.2rem;
+    }
+}
+
+.shareRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 0.6rem;
+    align-items: center;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-br);
+    background: var(--v-surface);
+    font-size: 0.79rem;
+
+    // The revoke button is pushed to the far end rather than floated, so a row
+    // without one simply has nothing there instead of a gap in the middle.
+    > button:last-child {
+        margin-left: auto;
+    }
+}
+
+.shareRowMain {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    align-items: center;
+    min-width: 0;
+}
+
+.shareRowFields {
+    overflow: hidden;
+    color: var(--v-paragraph);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.shareRowMeta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.15rem 0.5rem;
+    align-items: center;
+    color: var(--v-muted);
+    font-size: 0.74rem;
+
+    // Interpuncts between the facts rather than commas: they are three
+    // independent readings, not a list.
+    > span + span::before {
+        content: '·';
+        margin-right: 0.5rem;
+    }
+}
+
+// Green for a link that still opens, red for one somebody deliberately closed,
+// neutral grey for one that simply ran out — an expired link is not an
+// incident, and colouring it as one trains people to ignore the colour.
+.shareStatusActive {
+    background: color-mix(in srgb, var(--v-ok) 15%, var(--v-background));
+    color: var(--v-ok);
+}
+
+.shareStatusRevoked {
+    background: color-mix(in srgb, var(--v-bad) 15%, var(--v-background));
+    color: var(--v-bad);
+}
+
+.shareStatusClosed {
+    background: color-mix(in srgb, var(--v-paragraph) 12%, var(--v-background));
+    color: var(--v-muted);
+}