@visns-studio/visns-components 6.32.3 → 6.34.0

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

@@ -511,27 +511,123 @@
         transform: translateY(-50%);
     }
 
-    // Beside the rail, bottom-aligned with the row that opened it.
+    /* Beside the rail, bottom-aligned with the row that opened it.
+
+       `top: 100%; right: 0` is a panel hanging off the bottom-right corner of
+       a header chip. From a row pinned to the FOOT of a full-height rail that
+       is the bottom-left corner of the viewport: the panel drops off the
+       screen and lies half on the rail, half on the page. Anchored to the
+       row's right edge instead, it opens over the content the way a rail's
+       flyout is expected to — the gap is the only thing between it and the
+       rail, so the two read as one surface hinged at the row.
+
+       `z-index` is stated because `.rail-actions` sits at 996 (above the
+       content header's sticky 995); a panel opening from a row inside it has
+       to clear both. */
     .dropdownWrapper {
         top: auto;
         right: auto;
         bottom: 0;
-        left: calc(100% + 10px);
+        left: calc(100% + var(--nav-action-panel-gap, 10px));
         margin-top: 0;
+        z-index: 1200;
+        /* The rail's own shadow language, rather than the chip's flat drop —
+           this floats over the page, not over a bar. */
+        filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.22));
+    }
+
+    /* A column, so the list is the only part that scrolls.
+
+       The box used to be as tall as its contents with a 320px scroller inside
+       it, which from the foot of the rail grew upward past the top of the
+       viewport before the scroller ever engaged. A height cap on the BOX and
+       `min-height: 0` on the list is what makes the header, the alerts row
+       and the footer button stay put while the notifications move. */
+    .notibox {
+        display: flex;
+        flex-direction: column;
+        max-height: min(70vh, 640px);
+        /* The radius the rail's own rows wear. */
+        border-radius: var(--br, 10px);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
+    }
+
+    .notiscrollwrap {
+        flex: 1 1 auto;
+        /* Without this a flex item floors at its content height and the cap
+           above does nothing. */
+        min-height: 0;
+        max-height: none;
+    }
+
+    /* The three fixed bands around it. `flex-shrink` only — every other
+       property they own is already `!important` in the rules above and is
+       deliberately left alone. */
+    .notiboxHeader,
+    .alertsRow,
+    .notiboxActions {
+        flex: 0 0 auto;
+    }
+
+    /* The footer button was mid-grey on a grey band: the same colour as a
+       disabled control, for the one action in the panel. It is the primary
+       button the rest of the product uses, on the project's own token. */
+    .notiboxActions {
+        background-color: transparent;
+    }
+
+    .viewAllBtn {
+        background-color: var(--primary-color, #0056b3) !important;
+        color: var(--tertiary-color, #fff) !important;
+        border: 1px solid var(--primary-color, #0056b3) !important;
+        border-radius: var(--br, 8px) !important;
+        font-weight: 600 !important;
+        height: 40px !important;
+        padding: 0 20px !important;
+        max-width: none !important;
+        box-shadow: none !important;
+    }
+
+    .viewAllBtn:hover:not(:disabled) {
+        /* No second colour token to reach for — every project sets
+           `--primary-color` and not all set a darker partner — so the hover
+           is the same ink with the page showing through it. */
+        background-color: color-mix(
+            in srgb,
+            var(--primary-color, #0056b3) 88%,
+            #000
+        ) !important;
+        border-color: color-mix(
+            in srgb,
+            var(--primary-color, #0056b3) 88%,
+            #000
+        ) !important;
+        box-shadow: 0 2px 8px
+            rgba(var(--primary-color-rgb, 0, 86, 179), 0.35) !important;
+    }
+
+    .viewAllBtn:focus:not(:disabled) {
+        box-shadow: 0 0 0 2px
+            rgba(var(--primary-color-rgb, 0, 86, 179), 0.35) !important;
     }
 
     @media (max-width: 1024px) {
-        // Inside the drawer there is nothing to the right, so the panel
-        // opens upward from the row.
+        /* Inside the drawer there is nothing to the right, so the panel
+           opens upward from the row — and takes the drawer's full width
+           rather than a 360px card floating inside a 300px column. */
         .dropdownWrapper {
             left: 0;
+            right: 0;
             bottom: calc(100% + 8px);
+            filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
         }
 
-        // Keeps the panel inside a phone's viewport when the list is long —
-        // it grows from the foot of the drawer towards the header.
-        .notiscrollwrap {
-            max-height: 40vh;
+        .notibox {
+            width: 100%;
+            max-width: none;
+            /* It grows from the foot of the drawer towards the header, so it
+               gets less of the viewport than it does beside a rail. */
+            max-height: min(60vh, 520px);
         }
     }
 }
@@ -638,3 +734,39 @@
         transition: none;
     }
 }
+
+/* ----------------------------------------------------------------------------
+   …and the rail collapsed to an icon strip
+   ----------------------------------------------------------------------------
+   `<html data-nav-collapsed="true">` (Navigation writes it; see
+   utils/navCollapsed.js) means the rail is 64px wide and every row shows its
+   icon alone, with the tooltip doing the labelling. The bell draws its own
+   trigger, so the two things the rail cannot do for it are done here: drop the
+   `::after` label, and centre what is left.
+
+   Desktop only, exactly as the rail's own collapsed rules are — below 1024px
+   the rail is a drawer and the attribute is never written.
+
+   The panel itself needs nothing: it is anchored to the ROW's right edge
+   (`left: calc(100% + gap)`), so it follows the rail in and out without a
+   figure of its own.
+   ------------------------------------------------------------------------- */
+@media (min-width: 1025px) {
+    :root[data-nav-collapsed='true'] [data-nav-actions='sidebar'] {
+        .notificationTrigger {
+            justify-content: center;
+
+            &::after {
+                display: none;
+            }
+        }
+
+        /* Back on the icon's shoulder: there is no line for it to sit at the
+           end of any more. */
+        .badge {
+            top: 2px;
+            right: 8px;
+            transform: none;
+        }
+    }
+}

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

@@ -0,0 +1,105 @@
+@use 'controls' as *;
+
+/* ============================================================================
+   PasskeyEnrolPrompt — the offer made once, after signing in
+   ----------------------------------------------------------------------------
+   Inside a StandardModal at `size="small"`, so the panel's width, its phone
+   geometry and its z-index all come from StandardModal.module.scss and none of
+   it is restated here. What is here is the inside of the panel: a line of
+   explanation and a row of three buttons whose weights say what they are.
+
+   The three are deliberately NOT three equal buttons. "Add passkey" is the
+   thing being offered; "Not now" is the way out anybody can take without
+   thinking about it; "Don't ask again" is quieter still and reads as a link,
+   because a permanent decision should not be the easiest button on the screen
+   to hit by accident.
+
+   Every measurement is `var(--hook, <value>)` so an app can retune it from
+   `:root` without forking the component, the same way Profile.module.scss
+   does.
+   ========================================================================= */
+
+.body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md, 1rem);
+    padding: var(--spacing-md, 1rem) 0 0;
+}
+
+/* The mark. A key in a tinted disc — enough to say "this is about signing in"
+   without an illustration nobody asked to download. */
+.mark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* A column flex parent stretches its children; without this the disc
+       becomes a lozenge the width of the panel. */
+    align-self: flex-start;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
+    background: var(--primary-color-light, rgba(0, 0, 0, 0.06));
+    color: var(--primary-color, #1b3a57);
+    flex: 0 0 auto;
+}
+
+.text {
+    margin: 0;
+    font-size: var(--font-size-sm, 0.875rem);
+    line-height: 1.55;
+    color: var(--text-color, #333);
+}
+
+/* The row of choices. It wraps rather than scrolls: on a 320px phone three
+   buttons do not fit side by side, and a row that overflows puts the way out
+   off the edge of the sheet. */
+.actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-sm, 0.5rem);
+    padding-top: var(--spacing-sm, 0.5rem);
+}
+
+.primary {
+    @include button-primary;
+}
+
+.later {
+    @include button-secondary;
+}
+
+/* Pushed to the far end of the row, and styled as text: the permanent answer
+   should be available, findable, and never the thing a thumb lands on. */
+.never {
+    @include button-base;
+
+    margin-left: auto;
+    background: none;
+    border-color: transparent;
+    color: var(--muted-color, #6b7280);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+
+    &:hover:not(:disabled) {
+        background: none;
+        color: var(--text-color, #333);
+    }
+}
+
+/* Phones: one full-width button per line, in the order they are read, and the
+   quiet one loses its auto margin — `margin-left: auto` in a column pushes it
+   to the right edge of a stack, which is where nothing else is. */
+@media (max-width: 640px) {
+    .actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .primary,
+    .later,
+    .never {
+        width: 100%;
+        margin-left: 0;
+    }
+}

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

@@ -580,6 +580,44 @@
     }
 }
 
+/* The passkey list. A stack of rows rather than a table: each row is a name,
+   a quiet line of context and the one control that acts on it, and at phone
+   width a table of three columns is a table that scrolls sideways. The row
+   wraps instead, so the Remove button drops under the name rather than off
+   the edge. */
+.passkeyList {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm, 0.5rem);
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.passkeyItem {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-sm, 0.5rem);
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+    border: 1px solid var(--border-color, #e1e1e1);
+    border-radius: var(--radius-sm, 8px);
+}
+
+.passkeyName {
+    font-weight: var(--font-weight-semibold, 600);
+    /* Takes the slack so the button sits at the far edge of the row. */
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.passkeyMeta {
+    font-size: var(--font-size-xs, 0.75rem);
+    color: var(--muted-color, #6b7280);
+}
+
 /* The setup walkthrough. It used to be a bordered, shadowed card inside the
    panel card, carrying a heading that repeated the heading above it. The
    section owns the title and the separation now, so this is only the steps. */
@@ -902,3 +940,122 @@
         color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.65);
     }
 }
+
+/* ============================================================================
+ * Tabs as a strip
+ * ----------------------------------------------------------------------------
+ * The rail above is the layout this screen has always had, and on a top-bar
+ * app it is still the one it gets. In a SIDEBAR app the page already has a
+ * vertical navigation column two centimetres to the left, and a second one
+ * beside it spends a fifth of the content width to show two words. Profile
+ * asks for the strip there (see profileLayout.js for the rule, Profile.jsx
+ * for where the classes below are applied) and for the same three shapes
+ * GenericIndex and GenericDetail use for it, so the three pages agree:
+ *
+ *   `.crmtitle--flat`            the page title as type on the page ground.
+ *   `.grid__subrow--stacked`     one column instead of rail + panel.
+ *   `.grid__subnav--underline`   the rail's card undone; TableFilter's
+ *                                `variant="underline"` draws what is inside.
+ *
+ * Appended rather than merged into the rules above, and every selector here
+ * carries a modifier class: with none of them applied — which is every
+ * `layout="full"` app, and any app that passes `tabLayout="rail"` — not one
+ * declaration in this block matches anything.
+ * ==========================================================================*/
+
+/* `.crmtitle` is applied to the same element as `.grid__full`, so this has to
+   undo that card's surface, border, radius, shadow and 2px padding as well as
+   the title card's own. Matched to `.crmtitle` in GenericIndex.module.scss —
+   the same inset, the same type size — so the account screen sits on the same
+   baseline as every index page. */
+.crmtitle--flat {
+    padding: 0 0.25rem 0.85rem;
+    margin: 8px 0 0;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    h1 {
+        font-size: 1.375rem;
+        font-weight: 700;
+        letter-spacing: -0.01em;
+        line-height: 1.25;
+        color: var(--heading-color, var(--primary-color, #1b3933));
+    }
+}
+
+/* Two grid tracks become one flow column: `grid-template-columns: none` is
+   what hands the rail's 14rem back to the panel rather than leaving a hole
+   beside it. */
+.grid__subrow--stacked {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    grid-template-columns: none;
+    align-items: stretch;
+    gap: 0;
+}
+
+.grid__subrow--stacked > .grid__subnav,
+.grid__subrow--stacked > .grid__subcontent {
+    flex: 0 0 auto;
+    width: 100%;
+    /* Without this the strip's min-content width floors the flex item, so a
+       row of tabs widens the page instead of scrolling inside it. */
+    min-width: 0;
+}
+
+/* The strip and the card it labels are one object: no gap, and the card's top
+   corners squared off under it. The `8px 0` margin `.grid__subcontent` carries
+   for the rail layout would put a hairline gap between the two. */
+.grid__subrow--stacked > .grid__subcontent {
+    margin: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.grid__subnav--underline {
+    /* Not a card. */
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    /* The one hairline under the whole strip; the selected tab's accent edge
+       sits on top of it, and the content card below continues it. */
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
+    display: block;
+    min-width: 0;
+}
+
+/* `.grid__subnav > div` above only zeroes a margin; the strip needs the
+   wrapper to stay a plain block, which is what TableFilter's own stylesheet
+   expects around its scroller. */
+.grid__subnav--underline > div {
+    display: block;
+    min-width: 0;
+    margin-bottom: 0;
+    padding: 0;
+    background: none;
+}
+
+/* The panel header named the tab — "Overview" under a rail whose selected
+   item also said "Overview". Beside a strip that is the same word twice, half
+   a centimetre apart, so the strip is the only place the tab is named.
+
+   Hidden rather than dropped from the markup: the rail layout renders this
+   element and must keep rendering it, the heading is the same string the
+   selected tab already publishes (with real tab semantics — see TableFilter's
+   underline variant), and one class in one place is easier to be sure about
+   than a branch inside a memoised renderer with sixteen dependencies. */
+.grid__subrow--stacked .gridtxt__header {
+    display: none;
+}
+
+/* With the header gone the sections would start hard against the card's top
+   edge. The header's own vertical padding, given back to the body. */
+.grid__subrow--stacked .form {
+    padding-top: var(--spacing-md, 1rem);
+}