125 lines
8.6 KiB
HTML
125 lines
8.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Switches & Checkboxes - Design System Wiki{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
|
|
|
<!-- Left Navigation Sidebar -->
|
|
{% include "components/sidebar.html" %}
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 space-y-8">
|
|
|
|
<!-- Header -->
|
|
<div class="pb-6 border-b border-border">
|
|
<span class="text-xs font-semibold text-indigo-405">Toggles</span>
|
|
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Switches & Checkboxes</h1>
|
|
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
|
Premium animated toggle elements, range sliders, and custom styled checkboxes that mask standard hidden inputs with custom animations.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Section Toggles -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-lg font-bold text-slate-200">Interactive Toggles & Checkbox Demos</h2>
|
|
|
|
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
|
|
<!-- Tab Headers -->
|
|
<div class="flex border-b border-border/60 pb-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'toggle-sandbox')">Interactive Demo</button>
|
|
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'toggle-code')">HTML Markup</button>
|
|
</div>
|
|
|
|
<!-- Demo Viewport -->
|
|
<div id="toggle-sandbox" class="wiki-pane space-y-5 max-w-xs py-2">
|
|
<!-- Toggle Switch -->
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-muted-foreground font-medium">Toggle Status</span>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" class="sr-only peer">
|
|
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Custom Checkbox -->
|
|
<div class="flex flex-col gap-3">
|
|
<label class="flex items-center gap-3 cursor-pointer group">
|
|
<input type="checkbox" class="sr-only peer" checked>
|
|
<div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&_svg]:opacity-100 transition">
|
|
<svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
</div>
|
|
<span class="text-xs text-muted-foreground peer-checked:text-slate-200">Enable Email notifications</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Range Slider -->
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-semibold text-muted-foreground">Range Slider (0-100%)</label>
|
|
<div class="flex items-center gap-4">
|
|
<input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'">
|
|
<span class="text-xs font-mono font-bold text-sky-400 w-10 text-right">50%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Snippet Area -->
|
|
<div id="toggle-code" class="wiki-pane hidden space-y-4">
|
|
<div class="relative group">
|
|
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
|
Copy Code
|
|
</button>
|
|
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code><!-- 1. Toggle Switch Variant -->
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<!-- sr-only: visually hides native input; peer: lets siblings styled with 'peer-checked:' react to its state -->
|
|
<input type="checkbox" class="sr-only peer">
|
|
<!-- bg-secondary: base slider bg; peer-checked:bg-indigo-600: checked slider bg;
|
|
after: absolute round knob dot; peer-checked:after:translate-x-4: moves knob when checked -->
|
|
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
|
|
</label>
|
|
|
|
<!-- 2. Custom Checkbox -->
|
|
<label class="flex items-center gap-3 cursor-pointer group">
|
|
<!-- sr-only peer hides checkbox input globally but exposes its state -->
|
|
<input type="checkbox" class="sr-only peer">
|
|
<!-- peer-checked:[&_svg]:opacity-100: uses a descendant selector to show the checkmark when checked -->
|
|
<div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&_svg]:opacity-100 transition">
|
|
<svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs text-muted-foreground peer-checked:text-slate-200 select-none">Label Option</span>
|
|
</label>
|
|
|
|
<!-- 3. Custom Range Slider (accent-indigo-600 styles input thumb in modern browsers) -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- oninput: updates text element sibling content to display slider value -->
|
|
<input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'">
|
|
<span class="text-xs font-mono font-bold text-sky-400 w-10 text-right">50%</span>
|
|
</div></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleWikiTabs(btn, paneId) {
|
|
const card = btn.closest('.border-border');
|
|
if (!card) return;
|
|
card.querySelectorAll('button').forEach(b => {
|
|
b.classList.remove('border-sky-500', 'text-sky-400');
|
|
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
|
});
|
|
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
|
btn.classList.add('border-sky-500', 'text-sky-400');
|
|
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
|
const target = card.querySelector('#' + paneId);
|
|
if (target) target.classList.remove('hidden');
|
|
}
|
|
</script>
|
|
{% endblock %}
|