@7365admin1/layer-common 3.2.1 → 3.2.2-staging.101

package/assets/css/primitives.css

@@ -0,0 +1,680 @@
+/**
+ * PLATFORM REDESIGN - THE PAGE PRIMITIVES.
+ *
+ * Phases 1-5 tokenised what Vuetify draws. This file is the other half: the
+ * pieces the design draws that Vuetify has no component for, taken as literal
+ * CSS out of the handoff prototype
+ * (`design_handoff_platform_redesign/iService365 Redesign.dc.html`) rather
+ * than re-derived by eye. Every declaration below has a line in that file.
+ *
+ * The rule for a screen adopting these: MARKUP, not a theme override. A
+ * `.v-btn` restyled into a pill is still a `.v-btn` with Vuetify's ripple,
+ * overlay, min-width and uppercase tracking fighting it at a higher
+ * specificity; a `<button class="app-btn">` simply is the button in the
+ * design. Where Vuetify owns the behaviour (the data table, the menu, the
+ * dialog) it stays - only the chrome around it is replaced.
+ *
+ * Numbers, for review against the handoff:
+ *   page title 22px/800/-0.01em   ·  card radius 14px, 1px border, --shadow
+ *   in-card toolbar 0 20px, tabs 14px 2px 12px, 2px accent underline
+ *   fields 40px (34px compact), 10px radius, 13.5px/500
+ *   primary button 40px, 10px radius, 13.5px/800  ·  ghost 38px, 13px/700
+ */
+
+/* ------------------------------------------------------------------ */
+/* The typeface.                                                       */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Phase 1 loaded Manrope and deliberately did not apply it, so that the
+ * product would not sit half-migrated between two typefaces. The page
+ * scaffold is the migration, so the font goes on now - on Vuetify's own
+ * application root, which is every rendered page in all eleven apps.
+ *
+ * `.v-application` and not `body`: Vuetify sets `font-family` on that class
+ * itself, so a rule on `body` loses to it and the product would keep Roboto
+ * everywhere while the new primitives alone changed - the exact
+ * half-migrated look this was avoiding.
+ */
+.v-application,
+.v-overlay-container {
+  font-family: var(--font-sans);
+}
+
+/* ------------------------------------------------------------------ */
+/* PageHeader - the row every screen opens with.                       */
+/* ------------------------------------------------------------------ */
+
+.app-page-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+  flex-wrap: wrap;
+}
+
+.app-page-head__title {
+  margin: 0;
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  line-height: 1.25;
+  color: var(--text);
+}
+
+.app-page-head__sub {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 4px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.app-page-head__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppCard - the surface everything else sits on.                      */
+/* ------------------------------------------------------------------ */
+
+.app-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.app-card--flush {
+  overflow: visible;
+}
+
+/* ------------------------------------------------------------------ */
+/* CardToolbar - the in-card top row.                                  */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Two shapes in the handoff, one component. With tabs the row is `0 20px` and
+ * the tabs supply their own vertical padding, so the underline meets the
+ * card's rule; without tabs (a refresh button on the left) it is `10px 14px`.
+ */
+.app-toolbar {
+  display: flex;
+  align-items: center;
+  /* One row at desktop widths, as drawn. On a phone the tabs and the
+     search/pager group drop onto their own lines rather than overflow. */
+  flex-wrap: wrap;
+  gap: 22px;
+  padding: 0 var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+  min-height: 48px;
+}
+
+.app-toolbar--plain {
+  gap: 8px;
+  padding: 10px 14px;
+}
+
+.app-toolbar__spacer {
+  flex: 1;
+}
+
+.app-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The list toolbar's own search box. `--search` alone stretches (it is written
+   for the filter row), which would push the pager off the end of the row. */
+.app-toolbar__search.app-field--search {
+  flex: 0 0 auto;
+  width: 200px;
+  min-width: 0;
+}
+
+.app-toolbar__count {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.app-tabs {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.app-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.app-tab {
+  padding: 14px 2px 12px 2px;
+  border: none;
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+  cursor: pointer;
+  /* A tab is a <button> on the screens that switch a list in place and a link
+     on the ones that route (Invitations), so the underline has to be ours. */
+  text-decoration: none;
+}
+
+.app-tab:hover {
+  color: var(--text2);
+}
+
+.app-tab--active {
+  font-weight: 800;
+  color: var(--accent-text);
+  border-bottom-color: var(--accent);
+}
+
+/* ------------------------------------------------------------------ */
+/* The table, drawn as a grid.                                         */
+/* ------------------------------------------------------------------ */
+
+.app-thead {
+  display: grid;
+  gap: 12px;
+  padding: 12px var(--cellpad-x);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--thead);
+}
+
+.app-trow {
+  display: grid;
+  gap: 12px;
+  align-items: center;
+  padding: var(--cellpad) var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.app-trow:hover {
+  background: var(--hover);
+}
+
+.app-cell--strong {
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--muted {
+  color: var(--text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-cell--num {
+  color: var(--text2);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 52px var(--cellpad-x);
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-align: center;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppButton.                                                          */
+/* ------------------------------------------------------------------ */
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--btn-h);
+  padding: 0 16px;
+  border: none;
+  border-radius: var(--r-inner);
+  /* `--accent` at 3.23:1 cannot carry a white label - see Phase 1. The fill,
+     and only the fill, uses the 18%-darker `--accent-strong`; the underline,
+     the links and every soft background stay on `--accent`. */
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+  font-family: inherit;
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-btn:hover {
+  filter: brightness(1.06);
+}
+
+.app-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+  filter: none;
+}
+
+.app-btn--ghost {
+  height: 38px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text2);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-btn);
+}
+
+.app-btn--ghost:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+.app-btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text2);
+}
+
+.app-btn--icon:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* The 30px bordered row action - the `more_vert` at the end of a member row. */
+.app-btn--row {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+}
+
+.app-btn--row:hover {
+  background: var(--hover);
+  filter: none;
+}
+
+/* ------------------------------------------------------------------ */
+/* AppField / AppSelect / AppDateField.                                */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Flat and compact, with the label OUTSIDE the box as a small muted word -
+ * not Vuetify's outlined field with a label that floats through the border.
+ * A native `<input>`/`<select>`, so the browser keeps the keyboard, the date
+ * picker and the accessibility for free.
+ */
+.app-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--input-h);
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  font-size: var(--fs-nav);
+  font-weight: 600;
+  color: var(--text);
+  min-width: 0;
+}
+
+.app-field--compact {
+  height: var(--input-h-compact);
+}
+
+.app-field:focus-within {
+  border-color: var(--accent);
+}
+
+.app-field__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.app-field__icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-field__input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+
+.app-field__input::placeholder {
+  color: var(--muted);
+  opacity: 1;
+}
+
+/* A `<select>` keeps the native menu; only the chrome is ours. */
+select.app-field__input {
+  font-weight: 600;
+  font-size: var(--fs-nav);
+  appearance: none;
+  cursor: pointer;
+}
+
+/*
+ * The MULTI select. Native has no dropdown for `multiple` - only an
+ * always-open list box - so multi wears the same field chrome as a button and
+ * opens a popover. The chosen values are `StatusChip pill tone-neutral`, the
+ * soft pill the design already uses and the one whose contrast is measured.
+ */
+.app-select {
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.app-select--disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.app-select__values {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.app-select__placeholder {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+/* The x that removes one pill, and the one that empties the field. */
+.app-select__x,
+.app-select__clear {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  opacity: 0.7;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.app-select__x:hover,
+.app-select__clear:hover {
+  opacity: 1;
+}
+
+.app-select__clear {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-select__menu {
+  min-width: 200px;
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
+  background: var(--card);
+  box-shadow: var(--shadow-menu);
+}
+
+.app-select__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  border-radius: var(--r-inner-sm);
+  background: none;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.app-select__option:hover {
+  background: var(--hover);
+}
+
+.app-select__box {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.app-select__box--on {
+  color: var(--accent);
+}
+
+.app-select__option-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-field--search {
+  flex: 1;
+  min-width: 220px;
+}
+
+.app-filter-row {
+  display: flex;
+  gap: var(--grid-gap);
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 599.98px) {
+  .app-filter-row > * {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* SegmentedControl - Today | Week | Month.                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws this as a 3px-padded bordered tray holding 8px-radius
+ * segments; the SELECTED one is an ACCENT FILL, not a grey one. Vuetify's
+ * `v-btn-toggle` cannot be talked into that shape (its own height scale, its
+ * dividers, its overlay layer), so the tray is written as markup.
+ *
+ * The fill is `--accent-strong`, not `--accent`: white on `--accent` measures
+ * 3.23:1, the same Phase-1 rule every other filled label follows.
+ */
+.app-seg {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+.app-seg__item {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-seg__item:hover {
+  background: var(--hover);
+}
+
+.app-seg__item--on,
+.app-seg__item--on:hover {
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* ------------------------------------------------------------------ */
+/* KpiTile - the dashboard's headline figure.                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Three rows, in this order, straight from the handoff:
+ *   1. a 34px soft icon square and the uppercase label, side by side
+ *   2. the 30px tabular number with its percentage pill BESIDE it
+ *   3. the sub-line
+ * The product had the icon alone on row 1 and the pill stranded at the
+ * bottom, which is why the tile read as a different component.
+ */
+.app-kpi {
+  padding: 18px;
+}
+
+.app-kpi__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.app-kpi__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: var(--r-inner);
+}
+
+.app-kpi__label {
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.app-kpi__action {
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.app-kpi__figure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-kpi__value {
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-kpi__chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.2;
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+
+.app-kpi__chip--down {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.app-kpi__sub {
+  margin-top: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Responsive - the prototype has no reference, this follows Phase 1.  */
+/* ------------------------------------------------------------------ */
+
+@media (max-width: 767.98px) {
+  .app-page-head {
+    align-items: flex-start;
+  }
+
+  /* The grid table keeps its columns and scrolls sideways inside the card,
+     deliberately not restacked into key/value blocks: the columns carry
+     meaning by position. Same decision as Phase 1's tables. */
+  .app-table-scroll {
+    overflow-x: auto;
+  }
+
+  .app-table-scroll > * {
+    min-width: 720px;
+  }
+}