CSS: context-view
.instui-context-view — An elevated callout with a caret, positionable on any side; works as a native [popover].
Source: context-view.css
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/context-view.css";Examples
html
<div class="instui-context-view -placement-bottom" id="cv-popover">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>Modifiers
| Modifier | Description |
|---|---|
.-color-inverse | Dark (inverse) colour scheme. |
.-placement-bottom | Sit below the anchor. |
.-placement-end | Sit at the end (inline-end) of the anchor. |
.-placement-start | Sit at the start (inline-start) of the anchor. |
.-placement-top | Sit above the anchor. |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::after | Renders the caret's inner fill triangle. |
::before | Renders the caret's outer border triangle. |
States
| State | Description |
|---|---|
:state(open) | — |
Conditions
| Type | Query | Description |
|---|---|---|
| supports | (position-area: block-end) | — |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-background-elevated-surface-base | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-color-background-inverse | <color> | light-dark(#334450, #F2F4F5)LightDark |
--instui-color-text-base | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-color-text-inverse | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-component-context-view-arrow-background-color | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-context-view-arrow-background-color-inverse | <color> | light-dark(#334450, #F2F4F5)LightDark |
--instui-component-context-view-arrow-border-color | <color> | light-dark(#E8EAEC, #2D3D49)LightDark |
--instui-component-context-view-arrow-border-color-inverse | <color> | #00000000 |
--instui-component-context-view-arrow-border-width | <length> | 0.0625rem |
--instui-component-context-view-arrow-size | <length> | 0.5rem |
--instui-component-context-view-border-radius | <length> | 0.75rem |
--instui-elevation-above | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-spacing-space-lg | <length> | 1rem |
--instui-spacing-space-md | <length> | 0.75rem |
Browser support
- Uses CSS anchor positioning (
position-anchor,position-area,position-try-fallbacks) and the native[popover]API behind an@supportsguard; needs a recent Chromium or Safari, and falls back to a UA-centred popover elsewhere.