/** * Kåbdalis Blocks 2 — shared UX primitives. * * Plugin-owned (loaded site-wide + in the editor iframe alongside colors.css) * so every block gets a consistent loading shimmer, a visible keyboard-focus * ring, and a reduced-motion safety net without each block re-inventing them. * * .kab-skel(+--line/--title/--block) loading skeleton shimmer * :focus-visible ring keyboard-only accent outline * prefers-reduced-motion backstop neutralises stray per-block keyframes */ /* ---------- Skeleton loaders (P1.6) ---------------------------------------- Use in a widget's loading state instead of a "Hämtar…" string. Sized to the final content so there's no layout jump when the real data swaps in. */ .kab-skel{ position:relative; overflow:hidden; background:var(--surface2, #ece9e2); border-radius:var(--radius-sm); } .kab-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface, #fff) 65%, transparent), transparent); animation:kab-skel-shimmer 1.3s ease-in-out infinite; } .kab-skel--line{ height:.8em; margin:.45em 0; } .kab-skel--title{ height:1.3em; width:58%; margin:.2em 0 .7em; } .kab-skel--block{ height:120px; } .kab-skel--pill{ height:25px; width:120px; border-radius:999px; } .kab-skel--tile{ display:block; width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); } @keyframes kab-skel-shimmer{ to{ transform:translateX(100%); } } /* Composed skeleton layouts emitted by window.kabSkeletonHTML() (B12). Keep them shaped like the final content so the real data swaps in without a jump. */ .kab-skel-lines{ display:block; } .kab-skel-card + .kab-skel-card{ margin-top:14px; } .kab-skel-card{ padding:18px 20px; } .kab-skel-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; } .kab-skel-pills{ display:flex; flex-wrap:wrap; gap:8px; } /* Screen-reader-only text — pair with aria-hidden skeletons so assistive tech hears "Loading…" while sighted users see the shimmer. */ .kab-visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (prefers-reduced-motion: reduce){ .kab-skel::after{ animation:none; } } /* ---------- Empty state (P1.10) -------------------------------------------- One look for "nothing to show" across feeds/lists, via window.kabEmptyHTML(). Calm, centred, dashed frame so it reads as intentional, not broken. */ .kab-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:clamp(24px,5vw,48px) 20px; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface2); } .kab-empty__icon{ font-size:1.8rem; opacity:.6; color:var(--accent); } .kab-empty__msg{ margin:0; font-size:.95rem; line-height:1.45; max-width:42ch; } /* Error variant — surfaces a retry button (P4.32). */ .kab-empty--error{ border-style:solid; border-color:color-mix(in srgb, var(--no) 30%, var(--line)); } .kab-empty--error .kab-empty__icon{ color:var(--no); opacity:.8; } .kab-empty--error .btn{ margin-top:4px; } /* Card being removed (e.g. a cancelled booking) fades out before the list reloads, so the change feels intentional rather than an abrupt reflow (P4.33). */ .kab-booking--removing{ opacity:.45; transition:opacity .45s ease; pointer-events:none; } /* ---------- Keyboard focus ring (P1.7) ------------------------------------- Scoped to the design-system primitives + anything inside a kabdalis block, so it never fights the WP admin chrome. :focus-visible keeps it keyboard-only (mouse clicks don't get the ring). */ .btn:focus-visible, .link-arrow:focus-visible, .b-input:focus-visible, .b-select:focus-visible, .b-textarea:focus-visible, [class*="kabdalis-"] a:focus-visible, [class*="kabdalis-"] button:focus-visible, [class*="kabdalis-"] [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---------- Anchor scroll offset (P4.34) ----------------------------------- Keep in-page jump targets (block anchors, tab panels, headings with an id) clear of the fixed site header instead of hidden beneath it. */ [class*="kabdalis-"] [id], [class*="kabdalis-"][id]{ scroll-margin-top: calc(var(--hd-h, 64px) + 16px); } /* ---------- Interactive card hover (P4.35) --------------------------------- One consistent lift for cards that are themselves links or marked interactive. Static cards are untouched. Neutralised by the reduced-motion backstop below. */ @media (hover: hover) { [class*="kabdalis-"] a.b-card, [class*="kabdalis-"] .b-card--interactive, a.b-card[class*="kabdalis-"]{ transition: transform .18s var(--ease, ease), box-shadow .2s ease, border-color .2s ease; } [class*="kabdalis-"] a.b-card:hover, [class*="kabdalis-"] .b-card--interactive:hover, a.b-card[class*="kabdalis-"]:hover{ transform: translateY(-3px); box-shadow: var(--shadow, 0 18px 40px -24px rgba(60,48,30,.4)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } } /* ---------- Reduced-motion backstop (P1.9) --------------------------------- Belt-and-suspenders: even if an individual block's @keyframes forgets to honour the user's setting, animations/transitions inside kabdalis blocks are neutralised. The loading spinner (.b-spin) is exempt — it stays a slow spin so "loading" is still legible. */ @media (prefers-reduced-motion: reduce){ [class*="kabdalis-"] *:not(.b-spin), [class*="kabdalis-"]:not(.b-spin){ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ---------- Native