ImBenjiandClaude Opus 5.5
b5e5ed5b75
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the components are CSS on top of them, and the cards cover foundations, components and whole hub and Arcs & Angles screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
74 lines
4.2 KiB
HTML
74 lines
4.2 KiB
HTML
<!-- @dsCard group="Components" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Menus and tooltips</title>
|
|
<link rel="stylesheet" href="../components.css">
|
|
<style>
|
|
.ds { padding: 0 var(--container-padding) var(--container-padding); }
|
|
.ds-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-xl); padding: 0 var(--gap-xs); align-items: start; }
|
|
.ds-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-xs); }
|
|
.ds-rules { margin: 0; padding: 0 var(--gap-xs) 0 var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-xxs); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="ds">
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Menus and tooltips</div>
|
|
<div class="subtitle">Floating surfaces. Flat, no shadow.</div>
|
|
</div>
|
|
|
|
<div class="ds-grid">
|
|
<div class="ds-cell">
|
|
<div class="caption">Menu</div>
|
|
<div class="popover" role="menu">
|
|
<div class="menu-label">Edit</div>
|
|
<div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3" /><path d="M8.12 8.12 12 12" /><path d="M20 4 8.12 15.88" /><circle cx="6" cy="18" r="3" /><path d="M14.8 14.8 20 20" /></svg>Cut<span class="shortcut">⌘ + X</span></div>
|
|
<div class="menu-item is-hovered" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>Copy<span class="shortcut">⌘ + C</span></div>
|
|
<div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M11 14h10" /><path d="M16 4h2a2 2 0 0 1 2 2v1.344" /><path d="m17 18 4-4-4-4" /><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" /><rect x="8" y="2" width="8" height="4" rx="1" /></svg>Paste<span class="shortcut">⌘ + V</span></div>
|
|
<div class="menu-divider"></div>
|
|
<div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M10 11v6" /><path d="M14 11v6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></svg>Delete</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ds-cell">
|
|
<div class="caption">Context menu</div>
|
|
<div class="popover" role="menu">
|
|
<div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /></svg>Reset to Default</div>
|
|
<div class="menu-item" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>Copy</div>
|
|
<div class="menu-item disabled" aria-disabled="true" role="menuitem"><svg class="icon" viewBox="0 0 24 24"><path d="M11 14h10" /><path d="M16 4h2a2 2 0 0 1 2 2v1.344" /><path d="m17 18 4-4-4-4" /><path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113" /><rect x="8" y="2" width="8" height="4" rx="1" /></svg>Paste</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ds-cell">
|
|
<div class="caption">Tooltip</div>
|
|
<button class="btn ghost icon-only" aria-label="Copy"><svg class="icon" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg></button>
|
|
<span class="tooltip" role="tooltip">Copy client ID</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Use it for</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>MenuButton rows, with MenuLabel and MenuDivider to group them.</li>
|
|
<li>showContextMenu for right-click. Property rows get Reset, Copy and Paste, greyed when theres nothing to do.</li>
|
|
<li>A tooltip on every icon-only button, with plain text in it.</li>
|
|
</ul>
|
|
|
|
<div class="sub-heading">
|
|
<div class="title">Dont</div>
|
|
</div>
|
|
<ul class="ds-rules">
|
|
<li>Hand-build a popover out of a container with a fill, border and radius.</li>
|
|
<li>Colour tooltip text, or pad the tooltip yourself.</li>
|
|
<li>Add a shadow to a menu. Surfaces are separated by their border and fill.</li>
|
|
</ul>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|