CSS: view

.instui-view — View frumgerð: hlutlaus kassabox með lykil‑gildi breytum fyrir bakgrunn, ramma, geisla, skugga, sýningu, stöðu, flæði og bendil. Hver þessara breyta er einnig aðgengileg globalt (einangrað eða tengt við hvaða annan hluta sem er) — sjá background/border/shadow/display/position/overflow/cursor gagnvirknina.

Source: view.css

Notkun

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

Dæmi

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

Breytingar

Breyti	Lýsing
.-background-alert	Bakgrunnur fyrir viðvörunaryfirborð.
.-background-brand	Bakgrunnur vörumerkis‑yfirborðs.
.-background-danger	Bakgrunnur hættuyfirborðs.
.-background-info	Bakgrunnur upplýsinga‑yfirborðs.
.-background-primary	Bakgrunnur aðal‑yfirborðs.
.-background-primary-inverse	Bakgrunnur öfuga aðal‑yfirborðs.
.-background-secondary	Bakgrunnur aukahluta‑yfirborðs.
.-background-success	Bakgrunnur árangurs‑yfirborðs.
.-background-transparent	Gegnsær bakgrunnur.
.-background-warning	Bakgrunnur viðvörunar‑yfirborðs.
.-border-color-brand	Brand litaður rammarstrikslitur.
.-border-color-danger	Villustrikslitur rammans.
.-border-color-info	Upplýsingastrikslitur rammans.
.-border-color-primary	Grunnstrikslitur rammans.
.-border-color-success	Árangurstrikslitur rammans.
.-border-color-warning	Viðvarandi strikslitur rammans.
.-border-radius-circle	Fullt hringlaga (50%) geislaform.
.-border-radius-large	Stór horngeisli.
.-border-radius-medium	Miðlungs horngeisli.
.-border-radius-pill	Pill (fullur) geisli.
.-border-radius-small	Lítill horngeisli.
.-border-width-large	Stór þéttur rammi í grunnstrikslitnum.
.-border-width-medium	Miðlungs þéttur rammi í grunnstrikslitnum.
.-border-width-small	Lítill þéttur rammi í grunnstrikslitnum.
.-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	Hæsta rishæðarskuggi.
.-shadow-resting	Hvíldar rishæðarskuggi.
.-shadow-topmost	Yfirsta rishæðarskuggi.

Notuð tákn

Token	Tegund	Gildi
--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>#	—