wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
27 lines
2.2 KiB
HTML
27 lines
2.2 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Components" name="表单控件" subtitle="输入框(focus 光环)与开关" viewport="700x175" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px;color:var(--fg1)}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
|
.wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
|
|
.field{flex:1;min-width:220px}
|
|
.flabel{font-size:12px;font-weight:600;color:var(--fg2);margin-bottom:6px;display:block}
|
|
.input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:14px;color:var(--fg1);background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:11px 14px}
|
|
.input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-focus)}
|
|
.input.focused{border-color:var(--accent);box-shadow:var(--shadow-focus)}
|
|
.toggles{display:flex;gap:20px;align-items:center}
|
|
.sw{width:46px;height:28px;border-radius:var(--radius-full);position:relative;cursor:pointer;transition:background var(--dur-base) var(--ease-out)}
|
|
.sw.on{background:var(--accent)} .sw.off{background:var(--sand-300)}
|
|
.knob{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left var(--dur-base) var(--ease-out)}
|
|
.sw.on .knob{left:21px} .sw.off .knob{left:3px}
|
|
.tlab{font-size:13px;font-weight:500}</style></head><body>
|
|
<div class="lab">FORM · 输入框 (focus 显示 clay 光环) · 开关</div>
|
|
<div class="wrap">
|
|
<div class="field"><label class="flabel">邮箱 Email</label><input class="input focused" value="me@pangolin.vpn"></div>
|
|
<div class="field"><label class="flabel">兑换码</label><input class="input" placeholder="输入兑换码 / Redeem code"></div>
|
|
<div class="toggles">
|
|
<div style="display:flex;flex-direction:column;gap:8px"><span class="tlab">开机自启</span><div class="sw on"><div class="knob"></div></div></div>
|
|
<div style="display:flex;flex-direction:column;gap:8px"><span class="tlab">Kill Switch</span><div class="sw off"><div class="knob"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|