Stile

CSS-Variablen

Gestalte jedes Pixel mit 35 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Action sheet

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

Variable	Standard	Typ	Beschreibung
`--hub-action-sheet-z-index`	`1055`	number	Stacking layer of the whole overlay
`--hub-action-sheet-backdrop-bg`	`rgba(0, 0, 0, 0.45)`	color	Backdrop behind the sheet
`--hub-action-sheet-bg`	`var(--hub-sys-surface-page, #fff)`	color	Sheet background color
`--hub-action-sheet-color`	`var(--hub-sys-text-primary, #212529)`	color	Sheet text color
`--hub-action-sheet-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Rule between groups and above the cancel action
`--hub-action-sheet-border-radius`	`var(--hub-ref-radius-lg, 0.5rem)`	length	Sheet corner radius
`--hub-action-sheet-shadow`	`0 -0.5rem 1.5rem rgba(0, 0, 0, 0.18)`	shadow	Sheet shadow
`--hub-action-sheet-max-width`	`34rem`	length	Width cap of the sheet on wide screens
`--hub-action-sheet-padding`	`var(--hub-ref-space-2, 0.5rem)`	length	Padding inside the sheet
`--hub-action-sheet-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Space between the sheet blocks
`--hub-action-sheet-inset`	`var(--hub-ref-space-2, 0.5rem)`	length	Margin between the sheet and the viewport edges
`--hub-action-sheet-duration`	`240ms`	transition	Entry, exit and snap-back duration
`--hub-action-sheet-header-color`	`var(--hub-sys-text-primary, #212529)`	color	Header text color
`--hub-action-sheet-sub-header-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Sub-header text color
`--hub-action-sheet-group-title-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Group title color
`--hub-action-sheet-action-color`	`var(--hub-sys-text-primary, #212529)`	color	Action text color
`--hub-action-sheet-action-bg`	`transparent`	color	Action background color
`--hub-action-sheet-action-hover-bg`	`var(--hub-sys-color-surface-subtle, #f8f9fa)`	color	Action background on hover
`--hub-action-sheet-action-min-height`	`3rem`	length	Minimum height of an action — the touch target
`--hub-action-sheet-action-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Horizontal padding of an action
`--hub-action-sheet-action-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Space between an action icon and its label
`--hub-action-sheet-action-font-size`	`1rem`	length	Action font size
`--hub-action-sheet-action-radius`	`var(--hub-ref-radius-md, 0.375rem)`	length	Action corner radius
`--hub-action-sheet-action-disabled-opacity`	`0.5`	number	Opacity of a disabled action
`--hub-action-sheet-destructive-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Text color of the destructive action
`--hub-action-sheet-accent`	`var(--hub-sys-color-primary, #0d6efd)`	color	Semantic accent for the sheet — re-based per variant (default = primary)
`--hub-action-sheet-accent-emphasis`	`color-mix(in oklch, var(--hub-action-sheet-accent) 80%, var(--hub-sys-color-ink, #212529))`	color	Accent role: emphasis, derived locally from the accent slot
`--hub-action-sheet-accent-subtle`	`color-mix(in oklch, var(--hub-action-sheet-accent) 12%, var(--hub-action-sheet-bg))`	color	Accent role: subtle, derived locally from the accent slot
`--hub-action-sheet-selected-color`	`var(--hub-action-sheet-accent)`	color	Text color of the selected action
`--hub-action-sheet-selected-bg`	`var(--hub-action-sheet-accent-subtle)`	color	Background of the selected action
`--hub-action-sheet-handle-width`	`2.25rem`	length	Width of the drag handle
`--hub-action-sheet-handle-height`	`0.25rem`	length	Height of the drag handle
`--hub-action-sheet-handle-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Color of the drag handle
`--hub-action-sheet-focus-ring-width`	`var(--hub-sys-focus-ring-width, 0.25rem)`	length	Width of the keyboard focus ring
`--hub-action-sheet-focus-ring-color`	`var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25))`	color	Color of the keyboard focus ring