CSS: toggle-details
.instui-toggle-details — A styled native <details> disclosure with a rotating chevron.
Built on the native <details> element, so the browser drives open and close plus keyboard support; the CSS only hides the default marker and supplies the rotating chevron.
Source: toggle-details.css
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/toggle-details.css";Examples
html
<details class="instui-toggle-details" open>
<summary>What ships in this package?</summary>
Class-based component styles, built from the Instructure tokens, plus a prose layer.
</details>What ships in this package?
Class-based component styles, built from the Instructure tokens, plus a prose layer.Structure
text
.instui-toggle-details
summaryflowchart TD
n0[".instui-toggle-details"]:::cssdoc-root
n1("summary"):::cssdoc-part
n0 --> n1
classDef cssdoc-root stroke-width:1px;
classDef cssdoc-part stroke-width:1px;
classDef cssdoc-slot stroke-width:1px;
classDef cssdoc-component stroke-width:1px;
Modifiers
| Modifier | Description |
|---|---|
.-chevron-end | Place the chevron after the summary. |
.-size-large | Large. Long-form alias of -size-lg. |
.-size-lg | Large. |
.-size-sm | Small. |
.-size-small | Small. Long-form alias of -size-sm. |
.-variant-filled | Filled (surface) variant. |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::before | Draws the summary's disclosure chevron, a masked glyph that rotates to point down when the disclosure is open. |
States
| State | Description |
|---|---|
:state(open) | — |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-background-interactive-action-secondary-base | <color> | light-dark(#D5E2F6, #345B84)LightDark |
--instui-component-toggle-details-content-padding-large | <length> | 1.375rem |
--instui-component-toggle-details-content-padding-medium | <length> | 1.125rem |
--instui-component-toggle-details-content-padding-small | <length> | 1.125rem |
--instui-component-toggle-details-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-toggle-details-font-size-large | <length> | 1.25rem |
--instui-component-toggle-details-font-size-medium | <length> | 1rem |
--instui-component-toggle-details-font-size-small | <length> | 0.875rem |
--instui-component-toggle-details-font-weight | <integer> | 400 |
--instui-component-toggle-details-icon-margin | <length> | 0.375rem |
--instui-component-toggle-details-line-height | <percentage> | 150% |
--instui-component-toggle-details-text-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-toggle-details-toggle-border-radius | <length> | 0.75rem |
--instui-component-toggle-details-toggle-padding | <length> | 0.375rem |
--instui-icon-chevron-right | <image> | url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E') |
Related
- toggle-group — The bordered, grouped form of the same disclosure.