@ieeesa-npm/shared-styles 0.7.2 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/shared-styles",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0"

package/styles/mixins.scss

@@ -111,35 +111,98 @@
   border-left: $left;
 }
 
-@mixin create-form-scroll-shell($offset-variable, $fallback-offset: 320px) {
+// ── Create / edit form shells ────────────────────────────────────────────────
+//
+// A create/edit form has a fixed set of fields. It does not grow with data, so
+// it is sized to its content and the page is the single scroll surface. Its
+// navigation chrome (tab strip / stepper header) and action bar are pinned
+// instead, which keeps them reachable without shrinking the field area.
+//
+// Capping these shells to a slice of the viewport was tried and rejected: it
+// left the field area as short as ~167px on a 1366x600 screen (about one field
+// out of ~25), produced a page scrollbar alongside the inner one, and detached
+// open Material dropdown panels from fields that had scrolled out of the pane.
+// Regions that DO grow with data are bounded individually — see
+// `bounded-record-region`.
+@mixin create-form-dynamic-shell() {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - var(#{$offset-variable}, #{$fallback-offset}));
-  min-height: max(0px, min(240px, calc(100vh - var(#{$offset-variable}, #{$fallback-offset}))));
+  max-height: none;
+  min-height: 0;
 }
 
-@mixin create-form-scroll-surface() {
-  flex: 1 1 auto;
+// Field area of a dynamic-height form. Grows to fit its fields and never
+// introduces its own scrollbar.
+@mixin create-form-dynamic-surface() {
+  flex: 0 0 auto;
   min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 8px;
-  background:
-    linear-gradient($ieeesa-white 30%, rgba($ieeesa-white, 0)) top / 100% 28px
-      no-repeat local,
-    linear-gradient(rgba($ieeesa-white, 0), $ieeesa-white 70%) bottom / 100%
-      28px no-repeat local,
-    radial-gradient(
-        farthest-side at 50% 0,
-        rgba(0, 0, 0, 0.18),
-        rgba(0, 0, 0, 0)
-      )
-      top / 100% 12px no-repeat scroll,
-    radial-gradient(
-        farthest-side at 50% 100%,
-        rgba(0, 0, 0, 0.18),
-        rgba(0, 0, 0, 0)
-      )
-      bottom / 100% 12px no-repeat scroll;
+  overflow: visible;
+  background: none;
+  background-color: $ieeesa-white;
+}
+
+// ── Sticky form chrome ───────────────────────────────────────────────────────
+
+// Pins a form's navigation chrome (tab strip or stepper header) to the top of
+// the viewport while long content scrolls underneath.
+//
+// The host app publishes the heights of anything already pinned above the routed
+// content, and this chrome stacks below the total:
+//   --ieeesa-sticky-header-offset     the fixed global header
+//   --ieeesa-sticky-subheader-offset  a pinned breadcrumb / sub-header, if any
+// Both are live measurements, so chrome that wraps taller on narrow screens is
+// followed automatically, and both resolve to 0 when the host pins nothing —
+// which is why these are additive rather than a single value.
+@mixin sticky-form-nav() {
+  position: sticky;
+  top: calc(
+    var(--ieeesa-sticky-header-offset, 0px) +
+      var(--ieeesa-sticky-subheader-offset, 0px)
+  );
+  z-index: 6;
   background-color: $ieeesa-white;
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.18);
+}
+
+// Pins a form's action bar to the bottom of the viewport so the primary and
+// secondary buttons stay reachable without scrolling to the end of the form.
+// When the content is shorter than the viewport the bar simply sits at the end
+// of the content.
+@mixin sticky-form-actions() {
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+  background-color: $ieeesa-white;
+  border-top: 1px solid $ieeesa-disabled-border-color;
+  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.12);
+}
+
+// Applied to the page scroll container of a form that uses `sticky-form-nav`
+// and `sticky-form-actions`. Programmatic scrolls — focusing the first invalid
+// field on submit, anchor navigation — would otherwise land the target behind
+// the fixed app header, the sticky nav chrome or the sticky action bar.
+// `$nav-height` is the height of that nav chrome and `$actions-height` the
+// height of the action bar.
+@mixin sticky-form-scroll-padding($nav-height: 64px, $actions-height: 72px) {
+  scroll-padding-top: calc(
+    var(--ieeesa-sticky-header-offset, 0px) +
+      var(--ieeesa-sticky-subheader-offset, 0px) + #{$nav-height}
+  );
+  scroll-padding-bottom: $actions-height;
+}
+
+// ── Record regions ───────────────────────────────────────────────────────────
+
+// Bounds a region that grows with the number of records it displays (a
+// timeslot/agenda/meeting list) so adding records scrolls the region instead of
+// lengthening the page. This is the case the "must not expand indefinitely as
+// additional records are displayed" requirement is about.
+//
+// `auto` on both axes means a scrollbar appears only when the content actually
+// overflows, so short lists stay scrollbar-free, and wide rows scroll sideways
+// rather than being wrapped or clipped.
+@mixin bounded-record-region($max-height) {
+  max-height: $max-height;
+  overflow-y: auto;
+  overflow-x: auto;
 }