CSS: view

.instui-view — Le primitif View : une boîte neutre avec des modificateurs clé‑valeur pour l'arrière‑plan, la bordure, le rayon, l'ombre, l'affichage, la position, le débordement et le curseur. Chacun de ces modificateurs est aussi disponible globalement (nu, ou chaîné à n'importe quel autre composant) — voir les utilitaires background/border/shadow/display/position/overflow/cursor.

Source: view.css

Utilisation

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

Exemples

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

Modificateurs

Modificateur	Description
.-background-alert	Couleur de fond de la surface d'alerte.
.-background-brand	Couleur de fond de la surface de la marque.
.-background-danger	Couleur de fond de la surface de danger.
.-background-info	Couleur de fond de la surface d'information.
.-background-primary	Couleur de fond de la surface principale.
.-background-primary-inverse	Couleur de fond de la surface principale inverse.
.-background-secondary	Couleur de fond de la surface secondaire.
.-background-success	Couleur de fond de la surface de succès.
.-background-transparent	Fond transparent.
.-background-warning	Couleur de fond de la surface d'avertissement.
.-border-color-brand	Couleur de bordure de trait de la marque.
.-border-color-danger	Couleur de bordure de trait d'erreur.
.-border-color-info	Couleur de bordure de trait d'information.
.-border-color-primary	Couleur de bordure de trait de base.
.-border-color-success	Couleur de bordure de trait de succès.
.-border-color-warning	Couleur de bordure de trait d'avertissement.
.-border-radius-circle	Rayon entièrement circulaire (50%).
.-border-radius-large	Grand rayon d'angle.
.-border-radius-medium	Rayon d'angle moyen.
.-border-radius-pill	Rayon en pilule (complet).
.-border-radius-small	Petit rayon d'angle.
.-border-width-large	Bordure pleine large en couleur de trait de base.
.-border-width-medium	Bordure pleine moyenne en couleur de trait de base.
.-border-width-small	Bordure pleine petite en couleur de trait de base.
.-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	Ombre d'élévation supérieure.
.-shadow-resting	Ombre d'élévation au repos.
.-shadow-topmost	Ombre d'élévation la plus élevée.

Tokens consommés

Token	Type	Valeur
--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>#	—