27 lines
1.9 KiB
HTML
27 lines
1.9 KiB
HTML
|
<!doctype html>
|
|||
|
|
<!-- @dsCard group="Spacing" name="Spacing · Elevation" subtitle="Mostly none · wireframe system" viewport="700x220" -->
|
|||
|
|
<html><head>
|
|||
|
|
<meta charset="utf-8"><title>Elevation</title>
|
|||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|||
|
|
<style>
|
|||
|
|
body { padding: 28px 32px; background: var(--paper-2); }
|
|||
|
|
.row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 22px; }
|
|||
|
|
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|||
|
|
.cell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
|||
|
|
.obj { width: 100%; height: 72px; background: var(--paper); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
|
|||
|
|
.lbl { font: 500 11px var(--ff-mono); color: var(--fg-1); }
|
|||
|
|
.val { font: 400 10px var(--ff-mono); color: var(--fg-3); text-align: center; line-height: 1.4; }
|
|||
|
|
.s1 { box-shadow: 0 1px 0 var(--line); }
|
|||
|
|
.s2 { box-shadow: 0 1px 0 var(--line-strong); }
|
|||
|
|
.s3 { box-shadow: 0 4px 12px -6px rgba(10,10,10,.10); border-color: var(--border-soft); }
|
|||
|
|
</style></head>
|
|||
|
|
<body>
|
|||
|
|
<div class="row-label">Elevation — this is a wireframe system, prefer none</div>
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="cell"><div class="obj">default</div><span class="lbl">--shadow-0</span><span class="val">none · everywhere</span></div>
|
|||
|
|
<div class="cell"><div class="obj s1">+1</div><span class="lbl">--shadow-1</span><span class="val">1px hairline · sticky nav</span></div>
|
|||
|
|
<div class="cell"><div class="obj s2">+2</div><span class="lbl">--shadow-2</span><span class="val">1px strong · sticky strong</span></div>
|
|||
|
|
<div class="cell"><div class="obj s3">float</div><span class="lbl">--shadow-3</span><span class="val">soft 4–12px · popover only</span></div>
|
|||
|
|
</div>
|
|||
|
|
</body></html>
|