States

Macaw allows you to set :active, :hover and :focus states for all your elements. All visual styles can be set per state except dimension and position properties. States can also be set per breakpoint.

State Buttons

Element states can be applied by using the state buttons located just under element name, id and variable fields. They are visible when you have a single element selected.

Available States

Default The default state represents how the element will be styled normally. The default state will result in no CSS psuedo-class being used in the published CSS.

Hover The hover state represents how the element will be styled while the mouse is over the element. The hover state will use the :hover psuedo-class in the published CSS.

Active The active state represents how the element will be styled when activated by the user. When a user mouses down on a button for example. The active state will use the :active psuedo-class in the published CSS.

Focus The focus state represents how the element will be styled while the element has focus. The focus state will use the :focus psuedo-class in the published CSS.

State Buttons (Continued)

Each state button is displayed differently depending on if the state is the currently selected state and if it does or does not contain styles.

In the above image the "Default" state is dark grey with blue text to indicate it is the currently active state and any style changes will be saved on it. The "Focus" state has white text to indicate that the current element has focus styles. And the "Hover" and "Active" states have grey text which means the current element does not have styles for them.

Setting State Styles

To set state specific styles on an element by doing the following:

1. Select the element you wish to style.

2. Select the appropriate state (default, hover, active or focus).

3. Style away.

NOTE: While an element is selected Macaw will stay on the currently selected state. As soon as the element is deselected it will switch by to the "default" state.

Clearing State Styles

Styles for a specific state can be cleared by right clicking on a state's button and clicking "Clear Styles".