feat(subscription): add switch toggle component and update plan terminology
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user