Mått & form
En skala, i steg om 0,25 rem. Inga halvsteg.
Skalan
Roller
Ett beslut per roll. Råa steg är för layout.
| Token | Värde | Till |
|---|---|---|
--ws-pad-control | 0.5rem 0.75rem | Knappar, fält, selects, nav-pillar |
--ws-pad-control-sm | 0.25rem 0.5rem | Täta rader, pillar, små knappar |
--ws-pad-control-lg | 0.75rem 1.25rem | Sidans huvudåtgärd |
--ws-pad-panel | 1rem | Insidan av en panel |
--ws-pad-cell | 0.5rem 0.75rem | En tabellcell |
--ws-control-height | 2.25rem | Höjden varje kontroll på en rad är överens om |
--ws-control-height-lg | 2.75rem | Träffytan på en telefon |
Kontrollhöjd
Alla fyra är 2,25 rem höga och radar upp sig på mitten.
<div class="ws-cluster">
<button type="button" class="btn btn-primary">Spara</button>
<input type="text" value="Ett fält" aria-label="Exempelfält" />
<select aria-label="Exempelval"><option>Ett val</option></select>
<a class="ws-nav-link" href="#">En nav-länk</a>
</div>Radier
Fyra radier och en pill.
--ws-radius-smKnappar, fält, menyrader
--ws-radius-mdNotiser, nav-pillar, dialogens delar
--ws-radius-lgPaneler, kort, popover, dialog
--ws-radius-xlEn stor yta som ska läsas som ett ark
--ws-radius-pillPillar, badges, avatarer, mätare
Djup
Streck bär de platta ytorna. Skugga är reserverat för det som faktiskt svävar.
panel
Ett streck och en pixel. Den lyfter ingenting.
popover
Ligger framför.
dialog
Framför allt annat, med sidan nedtonad bakom.
Stackningsordningen är nedskriven: sticky 100, header 200, dropdown 300, overlay 400, dialog 500, toast 600.
Layout
--ws-max-width | 75rem | Sidans innehållskolumn |
|---|---|---|
--ws-max-width-narrow | 64rem | En sida med ett formulär |
--ws-max-width-text | 45rem | Löptext |
--ws-sidebar-width | 16rem | Skalets vänsterkolumn |
--ws-header-height | 3.5rem | Toppradens minsta höjd |
--ws-gutter | 1.5rem | Luften runt sidan |