CSS: gap
.--gap-md — Flex/grid gap segédosztályok a térközskálán, rövid (--gap-sm) vagy hosszú (--gap-small) írásmóddal. Használható önállóan vagy bármely komponenshez láncolva (.instui-view.--gap-sm) — azoknál a komponenseknél, amelyek már beállítják a saját gap értéküket egy komponensspecifikus tokenből, ez felülbírálásra kerülhet.
Forrás: index.ts
Használat
css
@import "@pantoken/components/utilities.css";Demó
Példák
html
<div class="--display-flex --gap-sm">
<span>One</span>
<span>Two</span>
</div>Módosítók
| Módosító | Leírás |
|---|---|
.--gap-md | A közepes térköz tokent alkalmazza résként. |
.--gap-* | Réssegédosztályok rövid és hosszú térközlépés-írásmódokhoz. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-shared-tokens-spacing-general-space-none | <length> | 0rem |
--instui-spacing-space-lg | <length> | 1rem |
--instui-spacing-space-md | <length> | 0.75rem |
--instui-spacing-space-sm | <length> | 0.5rem |
--instui-spacing-space-xl | <length> | 1.5rem |
--instui-spacing-space-xs | <length> | 0.25rem |
--instui-spacing-space2xl | <length> | 2rem |
--instui-spacing-space2xs | <length> | 0.125rem |