@kerusiweb/react 2.1.0 → 2.3.0

package/styles.css

@@ -148,6 +148,22 @@
   paint-order: stroke;
 }
 
+/* With a custom seat template the library cannot assume a `.kerusi-seat__box`
+   exists, so it draws this outline of the seat's body over the custom content
+   instead (the stock seat never renders it). Same colour chain as the ring
+   above; the stroke is centred on the outline because there is no fill of its
+   own to sit behind. */
+.kerusi-seat__focus {
+  fill: none;
+  stroke: none;
+  pointer-events: none;
+}
+
+.kerusi-seat:focus-visible .kerusi-seat__focus {
+  stroke: var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  stroke-width: 2.5;
+}
+
 .kerusi-element__void {
   stroke-width: 1;
   stroke-dasharray: 4 3;
@@ -228,3 +244,122 @@
   opacity: 0.7;
   font-variant-numeric: tabular-nums;
 }
+
+/* --- zoom, pan and maximize -------------------------------------------------
+   Everything below applies only when `zoomable` or `maximizable` is on; a plain
+   map renders none of these elements. Colours are bound inline from the
+   `--kerusi-*` tokens, so this file owns layout, motion and the focus ring.
+   The same rules as the Angular component's stylesheet. */
+
+/* Same column the sections sit in without the wrapper, so turning a feature on
+   does not move anything. */
+.kerusi-seatmap__stage {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.kerusi-toolbar {
+  display: flex;
+  gap: 0.35rem;
+  align-self: flex-end;
+  /* Stays put under a maximized map's scrolling stage. */
+  flex: none;
+}
+
+.kerusi-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* 44px: a comfortable touch target on the phones this exists for. */
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: 1px solid;
+  border-radius: 0.4rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* `aria-disabled`, not `disabled`: a disabled button drops out of the tab order,
+   and pressing "zoom in" until the ceiling would throw focus away mid-press. */
+.kerusi-control[aria-disabled='true'] {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.kerusi-control svg {
+  width: 1.4rem;
+  height: 1.4rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.kerusi-control:focus-visible,
+.kerusi-viewport:focus-visible {
+  outline: 2px solid var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  outline-offset: 2px;
+}
+
+/* A window onto the map. `clip` rather than `hidden`: a hidden box can still be
+   scrolled by the browser when a seat inside takes focus, which would fight the
+   transform; a clipped one cannot be scrolled at all. */
+.kerusi-viewport {
+  position: relative;
+  overflow: hidden;
+  overflow: clip;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The same column the sections sit in outside a viewport. */
+.kerusi-viewport__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  transform-origin: 0 0;
+}
+
+/* Only for a button, key or reveal. A finger or wheel moves the map directly, and
+   easing behind it would feel like lag. */
+.kerusi-viewport__content--animated {
+  transition: transform 160ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kerusi-viewport__content--animated {
+    transition: none;
+  }
+}
+
+/* Maximized: the map fills the screen. This is the whole feature on iPhone,
+   which has no element full screen; elsewhere native full screen is requested
+   on top. `Canvas` / `CanvasText` and the backdrop come from inline styles. */
+.kerusi-seatmap--maximized {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kerusi-maximized-z-index, 1000);
+  box-sizing: border-box;
+  padding: 0.75rem;
+  gap: 0.5rem;
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.kerusi-seatmap--maximized .kerusi-seatmap__stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 0.5rem;
+  /* A map that is not zoomable has no viewport to pan, so it scrolls instead. */
+  overflow: auto;
+}
+
+.kerusi-seatmap--maximized .kerusi-viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+}