CSS: view
.instui-view — A View primitív: egy semleges doboz kulcs-érték módosítókkal a háttérhez, szegélyhez, sugárhoz, árnyékhoz, megjelenítéshez, pozícióhoz, túlcsorduláshoz és kurzorhoz.
Forrás: view.ts
Használat
css
@import "@pantoken/components/utilities.css";Példák
html
<div class="instui-view -background-secondary -border-radius-medium -shadow-resting">A card-like surface.</div>A card-like surface.
Módosítók
| Módosító | Leírás |
|---|---|
.-background-alert | Figyelmeztetés felület háttere. |
.-background-brand | Brand felület háttere. |
.-background-danger | Veszély felület háttere. |
.-background-info | Információ felület háttere. |
.-background-primary | Elsődleges felület háttere. |
.-background-primary-inverse | Inverz elsődleges felület háttere. |
.-background-secondary | Másodlagos felület háttere. |
.-background-success | Siker felület háttere. |
.-background-transparent | Átlátszó háttér. |
.-background-warning | Figyelmeztetés felület háttere. |
.-border-color-brand | Brand vonás szegély szín. |
.-border-color-danger | Hiba vonás szegély szín. |
.-border-color-info | Információ vonás szegély szín. |
.-border-color-primary | Alap vonás szegély szín. |
.-border-color-success | Siker vonás szegély szín. |
.-border-color-warning | Figyelmeztetés vonás szegély szín. |
.-border-radius-circle | Teljesen kör alakú (50%) sugár. |
.-border-radius-large | Nagy sarok sugár. |
.-border-radius-medium | Közepes sarok sugár. |
.-border-radius-pill | Kapszula (teljes) sugár. |
.-border-radius-small | Kis sarok sugár. |
.-border-width-large | Nagy szilárd szegély az alap vonás színben. |
.-border-width-medium | Közepes szilárd szegély az alap vonás színben. |
.-border-width-small | Kis szilárd szegély az alap vonás színben. |
.-cursor-auto | cursor: auto. |
.-cursor-default | cursor: default. |
.-cursor-grab | cursor: grab. |
.-cursor-move | cursor: move. |
.-cursor-not-allowed | cursor: not-allowed. |
.-cursor-pointer | cursor: pointer. |
.-cursor-text | cursor: text. |
.-cursor-wait | cursor: wait. |
.-display-block | display: block. |
.-display-flex | display: flex. |
.-display-inline | display: inline. |
.-display-inline-block | display: inline-block. |
.-display-inline-flex | display: inline-flex. |
.-display-none | display: none. |
.-overflow-x-auto | overflow-x: auto. |
.-overflow-x-clip | overflow-x: clip. |
.-overflow-x-hidden | overflow-x: hidden. |
.-overflow-x-scroll | overflow-x: scroll. |
.-overflow-x-visible | overflow-x: visible. |
.-overflow-y-auto | overflow-y: auto. |
.-overflow-y-clip | overflow-y: clip. |
.-overflow-y-hidden | overflow-y: hidden. |
.-overflow-y-scroll | overflow-y: scroll. |
.-overflow-y-visible | overflow-y: visible. |
.-position-absolute | position: absolute. |
.-position-fixed | position: fixed. |
.-position-relative | position: relative. |
.-position-static | position: static. |
.-position-sticky | position: sticky. |
.-shadow-above | Feletti emelkedés árnyék. |
.-shadow-resting | Pihenő emelkedés árnyék. |
.-shadow-topmost | Legfelső emelkedés árnyék. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-border-radius-full | <length> | 999rem |
--instui-border-radius-lg | <length> | 0.75rem |
--instui-border-radius-md | <length> | 0.5rem |
--instui-border-radius-sm | <length> | 0.25rem |
--instui-border-width-lg | <length> | 0.25rem |
--instui-border-width-md | <length> | 0.125rem |
--instui-border-width-sm | <length> | 0.0625rem |
--instui-color-stroke-base | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-color-stroke-brand | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-color-stroke-error | <color> | #E62429 |
--instui-color-stroke-info | <color> | #2B7ABC |
--instui-color-stroke-success | <color> | #03893D |
--instui-color-stroke-warning | <color> | #CF4A00 |
--instui-component-view-background-alert | <color> | #2B7ABC |
--instui-component-view-background-brand | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-component-view-background-danger | <color> | #E62429 |
--instui-component-view-background-info | <color> | #2B7ABC |
--instui-component-view-background-primary | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-view-background-primary-inverse | <color> | light-dark(#334450, #F2F4F5)LightDark |
--instui-component-view-background-secondary | <color> | light-dark(#F2F4F5, #273540)LightDark |
--instui-component-view-background-success | <color> | #03893D |
--instui-component-view-background-warning | <color> | #CF4A00 |
--instui-elevation-above | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-resting | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-topmost | [ inset? && <length>{2,4} && <color>? ]# | none | — |