Variants
You can give the element different appearance depending on their state.
e.g. Make button change background color from Blue to Red when hovered over.
Create variant
To create variant click on triangles button on the right, and select type. Newly created variant will look the same, as element style. To change its behavior you need to record appearance, which will be used on match.
Record/Edit behavior
To record how an element should appear when matched to variant condition press Add to recording button and change appearance.
After you set desired appearance for variant click on Stop recording button to save.
Preview variant appearance
To see how element will appear when matched variant condition press on View variant button.
Click Turn off variant to stop preview.
Delete variant
To delete variant hover over it in appearance menu, click ⋮ button, and then click Remove.
Variant matching conditions
Focused
Matches when an element has focus on it.
Represesnts :focus CSS pseudo-class.
Not focused
Matches when an element is out of focus.
Hovered
Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.
Represesnts :hover CSS pseudo-class.
Not hovered
Matches when a user doesn't designates an item with a pointing device.
Pressed
Matches when a user activates an item with a pointing device, for example holding mouse left button down.
Represesnts :active CSS pseudo-class.
Not pressed
Matches when a user doesn't activates an item with a pointing device.
Focus within
Matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the Focused or has a descendant that is matched by Focused.
Represesnts :focus-within CSS pseudo-class.
Not Focus within
Matches an element if the element or any of its descendants are not focused.
Focus visible
Matches an element with the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element.
Represesnts :focus-visible CSS pseudo-class.
Not Focus visible
Matches an element with no :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should not be made evident on the element.
Add custom variant
You can create a variant for the element with custom condition using Dynamic expressions. This variant will be applied only for this element
Add custom page variant
You can create a variant for all elements on page with custom condition using Dynamic expressions. This variant will be applied for every elements on the page
Add custom project variant
You can create a variant for all elements in project with custom condition using Dynamic expressions. This variant will be applied for every elements in project
Last updated