CSS: view

.instui-view — An phrímhveirteach View: bosca neodrach le coigeartóirí eochair‑luach do chúlra, teorainn, raidis, scáth, taispeántas, suíomh, rómheastach agus cursóir. Tá gach ceann de na coigeartóirí seo ar fáil go domhanda freisin (gan aon chomhlánú, nó slabhraithe ar aon chomhpháirt eile) — féach na huirlisí background/border/shadow/display/position/overflow/cursor.

Source: view.css

Úsáid

@import "@pantoken/components/components.css";
@import "@pantoken/components/view.css";

Samplaí

<div class="instui-view -background-secondary -border-radius-medium -shadow-resting">
  A card-like surface.
</div>

Modhnóirí

Modhnóir	Cur síos
.-background-alert	Cúlra dromchla foláirimh.
.-background-brand	Cúlra dromchla branda.
.-background-danger	Cúlra dromchla contúirte.
.-background-info	Cúlra dromchla eolais.
.-background-primary	Cúlra dromchla príomha.
.-background-primary-inverse	Cúlra dromchla príomha inbhéartaithe.
.-background-secondary	Cúlra dromchla tánaisteach.
.-background-success	Cúlra dromchla rathúil.
.-background-transparent	Cúlra trédhearcach.
.-background-warning	Cúlra dromchla rabhadh.
.-border-color-brand	Dath teorainn stróc branda.
.-border-color-danger	Dath teorainn stróc earráide.
.-border-color-info	Dath teorainn stróc eolais.
.-border-color-primary	Dath teorainn stróc bhunúsach.
.-border-color-success	Dath teorainn stróc ratha.
.-border-color-warning	Dath teorainn stróc rabhadh.
.-border-radius-circle	Raidis lánchiorclach (50%).
.-border-radius-large	Raidis uilleach mór.
.-border-radius-medium	Raidis uilleach meánach.
.-border-radius-pill	Raidis piléir (lán).
.-border-radius-small	Raidis uilleach beag.
.-border-width-large	Teorann sholadach mór sa dath stróc bhunúsach.
.-border-width-medium	Teorann sholadach meánach sa dath stróc bhunúsach.
.-border-width-small	Teorann sholadach beag sa dath stróc bhunúsach.
.-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	Scáth ardaithe os cionn.
.-shadow-resting	Scáth ardaithe socair (ag sos).
.-shadow-topmost	Scáth ardaithe is airde.

Tóicíní a úsáideadh

Token	Cineál	Luach
--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>	LightDarklight-dark(#8D959F, #6A7883)
--instui-color-stroke-brand	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--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>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-view-background-danger	<color>	#E62429
--instui-component-view-background-info	<color>	#2B7ABC
--instui-component-view-background-primary	<color>	LightDarklight-dark(#ffffff, #171B21)
--instui-component-view-background-primary-inverse	<color>	LightDarklight-dark(#334450, #F2F4F5)
--instui-component-view-background-secondary	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-component-view-background-success	<color>	#03893D
--instui-component-view-background-warning	<color>	#CF4A00
--instui-elevation-above	none | <shadow>#	—
--instui-elevation-resting	none | <shadow>#	—
--instui-elevation-topmost	none | <shadow>#	—