@design.estate/dees-catalog 9.5.0 → 9.6.0

package/ts_web/elements/00group-layout/dees-stepper/styles.ts

@@ -0,0 +1,41 @@
+import { css } from '@design.estate/dees-element';
+
+export const stepperStyles = css`
+  :host { display: block; position: relative; width: 100%; height: 100%; min-height: 440px; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); }
+  :host([overlay]) { position: static; width: 0; height: 0; min-height: 0; }
+  .stepperContainer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; overflow-anchor: none; box-sizing: border-box; container: stepper-surface / inline-size; }
+  .stepperContainer.overlay { position: fixed; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 0; margin: 0; color: inherit; background: transparent; }
+  .stepperContainer::backdrop { background: var(--dees-color-scrim); }
+  dees-tile.step { position: relative; width: min(var(--dees-stepper-width, 520px), calc(100% - 40px)); max-height: calc(100% - 48px); min-height: min(280px, calc(100% - 48px)); margin: 0 auto 20px; pointer-events: none; opacity: .25; transition: opacity 240ms var(--dees-ease-standard); }
+  dees-tile.step::part(outer) { border-color: var(--dees-color-border-subtle); }
+  dees-tile.step.selected { pointer-events: auto; opacity: 1; }
+  dees-tile.step.selected::part(outer) { border-color: var(--dees-color-border-default); box-shadow: var(--dees-shadow-md); }
+  dees-tile.step.hiddenStep { opacity: 0; }
+  dees-tile.step:last-child { margin-bottom: 100dvh; }
+  .step-header { display: flex; align-items: center; gap: 16px; padding: 16px 24px; min-height: 48px; box-sizing: border-box; }
+  .step-rail { display: flex; flex: 1; gap: 5px; list-style: none; margin: 0; padding: 0; min-width: 0; }
+  .step-marker { flex: 1; height: 4px; border-radius: 2px; background: var(--dees-color-fill-secondary); }
+  .step-marker.complete { background: var(--dees-color-text-secondary); }
+  .step-marker.current { background: var(--dees-color-accent-primary); }
+  .step-counter { flex: none; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dees-color-text-secondary); }
+  .step-body { padding: 24px; }
+  .heading-row { display: flex; align-items: flex-start; gap: 16px; }
+  .title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; outline: none; }
+  .description { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--dees-color-text-secondary); }
+  .content { margin-top: 24px; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
+  .content:empty { display: none; }
+  .progressStep { margin: 20px -8px 0; }
+  .step-error { display: flex; align-items: flex-start; gap: 8px; padding: 12px; margin-top: 16px; border-radius: var(--dees-radius-md); background: var(--dees-color-badge-error-bg); color: var(--dees-color-text-error); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
+  .step-error dees-icon { flex: none; margin-top: 1px; }
+  .step-footer { padding: 12px 24px; }
+  .step-hint { flex: 0 0 120px; padding-top: 4px; margin-left: auto; color: var(--dees-color-text-secondary); font-size: 11px; line-height: 1.4; text-align: right; transition: opacity 160ms var(--dees-ease-standard), visibility 160ms; }
+  .step-hint[aria-hidden='true'] { opacity: 0; visibility: hidden; pointer-events: none; }
+  .bottomButtons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .back-action { margin-right: auto; }
+  .footer-spacer { margin-right: auto; }
+  .empty { display: grid; place-content: center; height: 100%; text-align: center; color: var(--dees-color-text-secondary); font-size: 13px; }
+  .predestroy .step.selected { animation: stepper-exit 160ms var(--dees-ease-standard) forwards; }
+  @keyframes stepper-exit { to { opacity: 0; transform: translateY(10px); } }
+  @media (prefers-reduced-motion: reduce) { dees-tile.step, .step-hint { transition: none; } .predestroy .step.selected { animation: none; } }
+  @container stepper-surface (max-width: 540px) { dees-tile.step { width: calc(100% - 24px); max-height: calc(100% - 24px); } .step-header { padding: 12px 20px; } .step-body { padding: 20px; } .step-footer { padding: 12px 20px; } .step-hint { flex-basis: 84px; } }
+`;