Initial commit: fabric-trade-user Vue 3 app with mobile and desktop layouts

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-03 09:57:24 +02:00
commit fd3e5e5126
142 changed files with 19798 additions and 0 deletions
@@ -0,0 +1,128 @@
+/* Application shell — global (unscoped) layout breakpoints */
+
+.app-shell {
+  height: 100dvh;
+  display: flex;
+  width: 100%;
+  background: var(--color-shell-bg);
+  overflow: hidden;
+}
+
+.app-layout {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.app-frame {
+  width: 100%;
+  height: 100%;
+  background: var(--color-bg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+  flex: 1;
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-main__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  max-width: var(--content-max-width);
+  margin-inline: auto;
+  padding-inline: var(--page-padding);
+}
+
+@media (min-width: 768px) {
+  .app-content {
+    padding-inline: var(--page-padding-tablet);
+  }
+}
+
+@media (min-width: 1200px) {
+  .app-content {
+    padding-inline: var(--page-padding-desktop);
+  }
+}
+
+/* ── Mobile: full-width native app (< 768px) ── */
+.app-shell--with-nav {
+  justify-content: stretch;
+}
+
+.app-shell--with-nav .app-frame {
+  max-width: 100%;
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* ── Tablet + Desktop: sidebar + header shell (>= 768px) ── */
+@media (min-width: 768px) {
+  .app-shell--with-nav {
+    background: var(--color-page-background);
+  }
+
+  .app-shell--with-nav .app-frame {
+    background: var(--color-page-background);
+  }
+
+  .app-shell--with-nav .app-main__content {
+    overflow-y: auto;
+  }
+}
+
+/* ── Guest pages (login, checkout) ── */
+@media (min-width: 768px) {
+  .app-shell--no-nav {
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: var(--color-page-background);
+  }
+
+  .app-shell--no-nav .app-layout {
+    max-width: var(--form-max-width);
+    width: 100%;
+    height: auto;
+    max-height: calc(100dvh - 48px);
+  }
+
+  .app-shell--no-nav .app-frame {
+    max-width: var(--form-max-width);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-frame);
+    max-height: calc(100dvh - 48px);
+    background: var(--color-surface);
+  }
+
+  .app-shell--no-nav.app-shell--wide .app-layout,
+  .app-shell--no-nav.app-shell--wide .app-frame {
+    max-width: min(var(--content-max-width), calc(100vw - 48px));
+  }
+
+  .app-shell--no-nav.app-shell--wide .app-frame {
+    background: var(--color-bg);
+  }
+}