CSS: view

.instui-view — View-primitiiva: nuorta boxa maid lei datovuođa ja ovddasvástádusaid modifiera backgroundiin, borderiin, radiusiin, shadow’ii, display’ii, position’ii, overflow’ii ja cursor’ii. Buot dárkki modifierat leat mus leat maid giellašuvvon globála (lohkan, vai lassin buot oassi rároheapmi) — geahččal background/border/shadow/display/position/overflow/cursor utilitehtaid.

Source: view.css

Buktáhašvuohta

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

Exempla

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

Modifisuvnnat

Modifiserer	Deskripción
.-background-alert	Alert-buovddaššuvdna background.
.-background-brand	Brand-buovddaššuvdna background.
.-background-danger	Danger-buovddaššuvdna background.
.-background-info	Info-buovddaššuvdna background.
.-background-primary	Primary-buovddaššuvdna background.
.-background-primary-inverse	Inverse primary-buovddaššuvdna background.
.-background-secondary	Secondary-buovddaššuvdna background.
.-background-success	Success-buovddaššuvdna background.
.-background-transparent	Transparent background.
.-background-warning	Warning-buovddaššuvdna background.
.-border-color-brand	Brand-stroke bordeš colour.
.-border-color-danger	Error-stroke bordeš colour.
.-border-color-info	Info-stroke bordeš colour.
.-border-color-primary	Base-stroke bordeš colour.
.-border-color-success	Success-stroke bordeš colour.
.-border-color-warning	Warning-stroke bordeš colour.
.-border-radius-circle	Bassi guovdagas (50%) radius.
.-border-radius-large	Gaskkas nuollu radius.
.-border-radius-medium	Međi nuollu radius.
.-border-radius-pill	Pill (duottar) radius.
.-border-radius-small	Lihkka nuollu radius.
.-border-width-large	Gaskkas solid bordeš base-stroke colour’s.
.-border-width-medium	Međi solid bordeš base-stroke colour’s.
.-border-width-small	Lihkka solid bordeš base-stroke colour’s.
.-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	Above-elevation shadow.
.-shadow-resting	Resting-elevation shadow.
.-shadow-topmost	Topmost-elevation shadow.

Tokenat gaskkalit

Token	Type	Vaššun
--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>#	—