feat(subscription): add switch toggle component and update plan terminology

This commit is contained in:
hamed
2026-06-24 03:32:50 +03:30
parent 15e7d92fc1
commit 253414ef3e
2 changed files with 47 additions and 18 deletions
+16
View File
@@ -533,6 +533,22 @@ table.t tbody tr:hover .row-actions { opacity: 1; }
.seg button { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: .14s; cursor: pointer; font-family: inherit; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* ── Switch toggle ───────────────────────────────────────────── */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.switch-track {
position: absolute; inset: 0; display: block;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; transition: background .18s, border-color .18s;
}
.switch-thumb {
position: absolute; top: 50%; right: 3px; width: 16px; height: 16px; margin-top: -8px;
border-radius: 50%; background: var(--text-3); box-shadow: var(--shadow-sm);
transition: transform .18s, background .18s;
}
.switch input:checked ~ .switch-track { background: var(--primary); border-color: var(--primary); }
.switch input:checked ~ .switch-track .switch-thumb { background: #fff; transform: translateX(-20px); }
.switch input:focus-visible ~ .switch-track { box-shadow: 0 0 0 4px var(--ring); }
/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
display: flex; align-items: center; gap: 6px; padding: 16px 0;