phase-4: scss upgrade

2026-06-04 15:49:49 -04:00
parent f5a338fc4e
commit e4ab9ce45b
18 changed files with 1275 additions and 819 deletions
@@ -0,0 +1,101 @@
+// ── Shared placeholders ───────────────────────────────────────────────────
+
+%btn-disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+%btn-inline-flex {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// ── Button base reset ─────────────────────────────────────────────────────
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--fs-md);
+  font-weight: 600;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 10px 18px;
+  white-space: nowrap;
+  transition: background var(--transition), opacity var(--transition), color var(--transition);
+
+  &:disabled { @extend %btn-disabled; }
+}
+
+// ── btn-primary  (blue filled — "＋ New Call", "Save Call") ───────────────
+
+.btn-primary {
+  @extend %btn-inline-flex;
+  background: var(--blue-dark);
+  color: #fff;
+  gap: 8px;
+
+  &:hover:not(:disabled) { background: var(--blue-darker); }
+  &:disabled { opacity: 0.5; }
+}
+
+// ── btn-catalyst  (blue filled — "📰 Today Market") ──────────────────────
+
+.btn-catalyst {
+  @extend %btn-inline-flex;
+  background: var(--blue-dark);
+  color: #fff;
+  gap: 6px;
+  padding: 10px 20px;
+
+  &:hover:not(:disabled) { background: var(--blue-darker); }
+}
+
+// ── btn-ghost  (dark border — "🔍 Search tickers") ───────────────────────
+
+.btn-ghost {
+  background: var(--bg-card);
+  color: var(--text-dim);
+  border: 1px solid var(--border-input);
+  font-size: 12px;
+  padding: 8px 14px;
+
+  &:hover { background: #263347; color: var(--text-muted); }
+}
+
+// ── btn-screen  (muted blue — "Screen" inside search row) ────────────────
+
+.btn-screen {
+  @extend %btn-inline-flex;
+  background: var(--blue-surface);
+  color: var(--blue-muted);
+  border: 1px solid var(--blue-surface);
+  min-width: 80px;
+
+  &:hover:not(:disabled) { background: #163356; }
+}
+
+// ── btn-analyze  (ghost blue — "✦ Analyze" in section header) ────────────
+
+.btn-analyze {
+  @extend %btn-inline-flex;
+  background: transparent;
+  color: #7c93b0;
+  border: 1px solid var(--border);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 4px 12px;
+  border-radius: var(--radius-sm);
+  gap: 5px;
+  margin-left: 8px;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background: var(--blue-deep);
+    color: #93c5fd;
+    border-color: var(--blue-surface);
+  }
+
+  &:disabled { @extend %btn-disabled; opacity: 0.4; }
+}