@visns-studio/visns-components 6.6.3 → 6.15.0

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

@@ -12,6 +12,120 @@
  * dropped, which is exactly how a rail like this loses its padding.
  */
 
+
+/**
+ * The one-row tab strip.
+ *
+ * A rail's items laid out in a row, each an unadorned label, with a 3px accent
+ * edge under the selected one instead of the vertical rail's brand fill. It is
+ * the treatment narrow viewports get for any rail without expandable parents
+ * (`.flatFilter`, inside the phone media query at the bottom of this file),
+ * and the treatment a page opts into at every width with
+ * `<TableFilter variant="underline">` — a vertical rail spends a fifth of the
+ * page on navigation, which pays for itself at seven tabs and does not at two.
+ *
+ * The selectors inside are deliberately longer than the ones they override:
+ * `.subactive` and `.activetab button` carry `!important`, so only a more
+ * specific `!important` can take the brand fill back off.
+ */
+@mixin tab-strip {
+    .tableFilter,
+    .tableFilter.mobileOpen {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: var(--spacing-xs, 0.25rem);
+        max-height: none;
+        overflow-x: auto;
+        overflow-y: hidden;
+        /* Momentum panning on iOS. */
+        -webkit-overflow-scrolling: touch;
+        /* The scrollbar is noise on a two-tab strip; the overflowing tab is
+           the affordance. */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        /* The dropdown drew itself a card. A strip sits on the panel it is
+           already inside. */
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        margin-bottom: 0;
+        /* No baseline rule under the row: every surface this rail sits on
+           (`.grid__subnav` in Profile, GenericIndex and GenericDetail) already
+           draws its own border a few pixels below, and a second hairline
+           alongside it read as a mistake. The 3px edge under the selected tab
+           is the whole marker. */
+        box-shadow: none;
+    }
+
+    .tableFilter::-webkit-scrollbar {
+        display: none;
+    }
+
+    .tableFilter > li {
+        flex: 0 0 auto;
+        margin: 0;
+        border-bottom: none;
+    }
+
+    /* Inactive tabs are muted labels, not tinted blocks. `white-space: nowrap`
+       is what keeps the row one row: without it a two-word tab wraps and the
+       strip grows a second line instead of overflowing. */
+    .tableFilter > li > .link,
+    .tableFilter > li > .parentLink,
+    .tableFilter > li > button {
+        display: block;
+        white-space: nowrap;
+        padding: 0.75rem var(--spacing-md, 1rem);
+        border: none;
+        border-bottom: 3px solid transparent;
+        border-radius: 0;
+        background: none !important;
+        color: var(--paragraph-color, #6b7280) !important;
+        font-size: var(--font-size-sm, 0.8125rem);
+        font-weight: var(--font-weight-medium, 500);
+        cursor: pointer;
+    }
+
+    /* The selected tab. `--primary-color` first because it is what the rail
+       already fills the active item with everywhere else; `--accent-color`
+       covers apps that only declare that one, and the literal keeps the edge
+       visible in an app that declares neither. */
+    .tableFilter > li > .subactive,
+    .tableFilter > li.activetab > button {
+        background: none !important;
+        color: var(--heading-color, #111) !important;
+        font-weight: var(--font-weight-semibold, 600);
+        border-bottom-color: var(
+            --primary-color,
+            var(--accent-color, #0076c0)
+        );
+    }
+
+    /* Touch devices keep :hover stuck on the last tap, which on the old rule
+       tinted whichever tab was tapped last and made it compete with the
+       selected one. */
+    .tableFilter > li > .link:hover,
+    .tableFilter > li > .parentLink:hover,
+    .tableFilter > li > button:hover {
+        background: none !important;
+        color: var(--heading-color, #111) !important;
+    }
+}
+
+/* The opt-in variant. Same strip, at every width; TableFilter sets this class
+   alongside `.flatFilter` when a page asks for `variant="underline"`. The
+   container's own bottom margin goes: the strip is separated from the panel
+   below it by that panel's own spacing, and 20px of air under a tab row reads
+   as a gap in the page. */
+.tableFilterContainer.underlineFilter {
+    /* Both classes: `.tableFilterContainer` below sets a 20px bottom margin,
+       and a single-class selector here would lose to it on source order. */
+    margin-bottom: 0;
+
+    @include tab-strip;
+}
+
 .tableFilterContainer {
     width: 100%;
     position: relative;
@@ -299,103 +413,9 @@
         border-left: none;
     }
 
-    /* ---------------------------------------------------------------------
-       Flat rails: a one-row tab strip instead of the hamburger.
-
-       `.flatFilter` is set by TableFilter on any rail whose items have no
-       expandable children, and exists only inside this media query — above
-       759px the class matches nothing and the rail is byte-for-byte the
-       vertical list it has always been.
-
-       The strip pans horizontally with a thumb and marks the selection with a
-       3px accent edge rather than the full brand fill: on a phone the fill was
-       a solid band the width of the screen, which read as a header rather than
-       as one tab out of several.
-
-       These selectors are deliberately longer than the ones they override —
-       `.subactive` and `.activetab button` carry `!important`, so only a more
-       specific `!important` can take the fill back off. --------------------- */
-
-    .flatFilter .tableFilter,
-    .flatFilter .tableFilter.mobileOpen {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: stretch;
-        gap: var(--spacing-xs, 0.25rem);
-        max-height: none;
-        overflow-x: auto;
-        overflow-y: hidden;
-        /* Momentum panning on iOS. */
-        -webkit-overflow-scrolling: touch;
-        /* The scrollbar is noise on a two-tab strip; the overflowing tab is
-           the affordance. */
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-        /* The dropdown drew itself a card. A strip sits on the panel it is
-           already inside. */
-        padding: 0;
-        border: none;
-        border-radius: 0;
-        margin-bottom: 0;
-        /* No baseline rule under the row: every surface this rail sits on
-           (`.grid__subnav` in Profile, GenericIndex and GenericDetail) already
-           draws its own border a few pixels below, and a second hairline
-           alongside it read as a mistake. The 3px edge under the selected tab
-           is the whole marker. */
-        box-shadow: none;
-    }
-
-    .flatFilter .tableFilter::-webkit-scrollbar {
-        display: none;
-    }
-
-    .flatFilter .tableFilter > li {
-        flex: 0 0 auto;
-        margin: 0;
-        border-bottom: none;
-    }
-
-    /* Inactive tabs are muted labels, not tinted blocks. `white-space: nowrap`
-       is what keeps the row one row: without it a two-word tab wraps and the
-       strip grows a second line instead of overflowing. */
-    .flatFilter .tableFilter > li > .link,
-    .flatFilter .tableFilter > li > .parentLink,
-    .flatFilter .tableFilter > li > button {
-        display: block;
-        white-space: nowrap;
-        padding: 0.75rem var(--spacing-md, 1rem);
-        border: none;
-        border-bottom: 3px solid transparent;
-        border-radius: 0;
-        background: none !important;
-        color: var(--paragraph-color, #6b7280) !important;
-        font-size: var(--font-size-sm, 0.8125rem);
-        font-weight: var(--font-weight-medium, 500);
-        cursor: pointer;
-    }
-
-    /* The selected tab. `--primary-color` first because it is what the rail
-       already fills the active item with everywhere else; `--accent-color`
-       covers apps that only declare that one, and the literal keeps the edge
-       visible in an app that declares neither. */
-    .flatFilter .tableFilter > li > .subactive,
-    .flatFilter .tableFilter > li.activetab > button {
-        background: none !important;
-        color: var(--heading-color, #111) !important;
-        font-weight: var(--font-weight-semibold, 600);
-        border-bottom-color: var(
-            --primary-color,
-            var(--accent-color, #0076c0)
-        );
-    }
-
-    /* Touch devices keep :hover stuck on the last tap, which on the old rule
-       tinted whichever tab was tapped last and made it compete with the
-       selected one. */
-    .flatFilter .tableFilter > li > .link:hover,
-    .flatFilter .tableFilter > li > .parentLink:hover,
-    .flatFilter .tableFilter > li > button:hover {
-        background: none !important;
-        color: var(--heading-color, #111) !important;
+    /* The one-row tab strip. Shared with the opt-in `.underlineFilter`
+       variant — see the mixin at the top of this file. */
+    .flatFilter {
+        @include tab-strip;
     }
 }

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

@@ -1,208 +1,147 @@
-.formItem {
-    width: 100%;
-    position: relative;
-    box-sizing: border-box;
-    margin-bottom: 1rem;
-
-    .fi__label {
-        position: relative;
-        display: flex;
-        align-items: center;
+/**
+ * Two-factor verification.
+ *
+ * Replaces the pre-6.1 centred card (`.lcontainer` / `.lwrap` / `.login`, with
+ * its own greys and its own button) with the two-pane sign-in language. Signing
+ * in with 2FA on is one journey, and it used to change design halfway through
+ * it: the login screen, then a differently-styled card, then the app.
+ *
+ * Everything shared with the other auth screens comes from _authShell.scss.
+ * Only what is particular to entering a code lives here.
+ */
+
+@use './authShell' as *;
+
+@include auth-shell;
+
+/* The code field is read digit by digit, so it is set wide, centred and
+   monospaced — nothing like the identifier fields on the login screen. */
+.code {
+    input {
+        font-family: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+        font-size: 1.3rem;
+        font-weight: 600;
+        letter-spacing: 0.55rem;
+        /* The tracking is applied to the right of each glyph, so without this
+           the run of digits sits visibly left of centre. */
+        text-indent: 0.55rem;
+        text-align: center;
+        padding-top: 1.35rem;
     }
 
-    .fi__span {
-        position: absolute;
-        transition: all 200ms;
-        opacity: 0.7;
-        left: 0;
-        transform-origin: top left;
-        cursor: text;
-        padding: 0 1rem;
-        font-size: 0.9rem;
-        color: #6b7280;
+    label {
+        /* Centred with the value it labels, rather than hanging off the left
+           edge of a field whose contents are centred. */
+        left: 50%;
+        transform: translateX(-50%);
     }
 
-    input[name='verificationCode'] {
-        letter-spacing: 0.25rem;
-        font-size: 1.2rem;
-        text-align: center;
+    input:focus + label,
+    input:not(:placeholder-shown) + label {
+        transform: translateX(-50%) translateY(-0.85rem);
     }
 }
 
-.fwItem,
-.fwBuilderItem {
-    grid-column: 1 / -1;
-    width: 100%;
-}
-
-.lastItem .btn {
-    width: 100%;
-}
-
-.loginlogo {
-    display: block;
-    width: 100%;
-    max-width: 150px;
-    height: auto;
-    margin: 0 auto;
-    padding-bottom: 1.5rem;
+/* Where the code went, in code mode: the masked number the SMS was sent to.
+   Sits directly under the subtitle so it reads as part of the instruction. */
+.destination {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin: -1.4rem 0 1.6rem;
+    padding: 0.35rem 0.7rem;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: var(--warm);
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: var(--ink);
+
+    svg {
+        flex: none;
+        color: var(--navy);
+    }
 }
 
-.logincontainer {
-    width: 100%;
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: 1rem;
-    background-color: #f9fafb;
+/* Resend sits on the same line as the expiry note: one is the reason for the
+   other. */
+.resendRow {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-top: 1.1rem;
+    font-size: 0.82rem;
+    color: var(--muted);
 }
 
-.login {
-    width: 28rem;
-    padding: 2rem;
+.expiry {
     margin: 0;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    background-color: white;
-    border-radius: 0.75rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-    > .formItem {
-        padding: 0;
-
-        small {
-            position: absolute;
-            width: 18px;
-            height: 18px;
-            right: 14px;
-            top: 14px;
-            opacity: 0.4;
-            color: #6b7280;
-        }
-    }
-
-    h2 {
-        text-align: center;
-        margin-bottom: 0.5rem;
-        color: #111827;
-        font-weight: 600;
-        font-size: 1.5rem;
-    }
+    font-size: 0.82rem;
+    line-height: 1.5;
+    color: var(--muted);
 }
 
-.instructions {
-    text-align: center;
-    margin: 0 0 1.5rem;
-    color: var(--paragraph-color, #6b7280);
-    font-size: 0.95rem;
-    line-height: 1.4;
+/* The link is disabled while the request is in flight and, if the consumer set
+   a cooldown, for that many seconds after — .link already carries the disabled
+   treatment, this only holds the countdown's width steady. */
+.resend {
+    flex: none;
+    font-variant-numeric: tabular-nums;
 }
 
-.forgotten span {
-    display: block;
-    text-align: center;
-    color: #6b7280;
-    padding: 1rem 0;
-    font-size: 0.875rem;
-
-    a {
-        color: var(--primary-color, #4f46e5);
-        text-decoration: none;
-        font-weight: 500;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
+/* "Having trouble?" and the way back to the login screen. Quiet, and last. */
+.help {
+    margin: 1.6rem 0 0;
+    padding-top: 1.1rem;
+    border-top: 1px solid var(--line);
+    font-size: 0.82rem;
+    line-height: 1.5;
+    color: var(--muted);
 }
 
-.lcontainer {
-    min-height: 100vh;
-    display: flex;
+.back {
+    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    background-color: #f9fafb;
-}
-
-.lwrap {
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.75rem 1rem;
+    gap: 0.35rem;
+    margin-top: 0.6rem;
+    padding: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--navy);
     cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: white;
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color, #4f46e5);
-    border: 1px solid var(--primary-color, #4f46e5);
-    border-radius: 0.5rem;
-    outline: none;
-    transition: all 0.2s ease;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
     &:hover {
-        background: var(--secondary-color, #3cbf7d);
-        border-color: var(--secondary-color, #3cbf7d);
+        text-decoration: underline;
     }
 
-    &:focus {
-        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+    svg {
+        flex: none;
     }
 }
 
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-135%) translateX(10px) scale(0.85);
-    opacity: 1;
-    padding: 0;
-    background: white;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    color: var(--primary-color, #4f46e5) !important;
-}
-
-.rememberMeIndicator {
+/* Carried over in spirit from the old screen's remember-me confirmation, which
+   was the one thing about it worth keeping: after typing a password and then a
+   code, it is genuinely useful to be told the box you ticked two screens ago is
+   still ticked. */
+.remembered {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin: 0.75rem auto 0;
-    padding: 0.6rem 1rem;
-    background-color: rgba(var(--primary-rgb), 0.08);
-    border-radius: var(--br);
-    border-left: 3px solid var(--primary-color);
-    max-width: 80%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
-
-    &:hover {
-        background-color: rgba(var(--primary-rgb), 0.12);
-        transform: translateY(-1px);
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
-    }
+    gap: 0.45rem;
+    margin: 0.9rem 0 0;
+    padding: 0.55rem 0.75rem;
+    border-left: 3px solid var(--navy);
+    border-radius: 0.4rem;
+    background: var(--warm);
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--ink);
 
-    span {
-        font-size: 0.85rem;
-        color: var(--primary-color);
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-
-        &::before {
-            content: '✓';
-            display: inline-block;
-            margin-right: 0.5rem;
-            font-weight: bold;
-            font-size: 0.9rem;
-        }
+    svg {
+        flex: none;
+        color: var(--navy);
     }
 }