Hover styles

Add .hover-bg-<theme-color> to add a background color on hover. Add .hover-fg-<theme-color> to add a foreground color on hover. Hover over the links below to test them.

{% apply view_source %}
.hover-bg-primary .hover-fg-light
.hover-bg-dark .hover-fg-light
.hover-bg-success.hover-fg-light
{% end %} {% apply view_source %}
.hover-bg-secondary .hover-fg-dark
.hover-bg-warning .hover-fg-dark
.hover-bg-warning .hover-fg-danger
{% end %}

Focus styles

Add .focus-bg-<theme-color> to add a background color on focus. Add .focus-fg-<theme-color> to add a foreground color on focus. Click the links below to test them.

{% apply view_source %}
.focus-bg-primary .focus-fg-light
.focus-bg-dark .focus-fg-light
.focus-bg-success.focus-fg-light
{% end %} {% apply view_source %}
.focus-bg-secondary .focus-fg-dark
.focus-bg-warning .focus-fg-dark
.focus-bg-warning .focus-fg-danger
{% end %}

Active styles

Add .active-bg-<theme-color> to add a background color on active. Add .active-fg-<theme-color> to add a foreground color on active. Click the links below to test them.

{% apply view_source %}
.active-bg-primary .active-fg-light
.active-bg-dark .active-fg-light
.active-bg-success.active-fg-light
{% end %} {% apply view_source %}
.active-bg-secondary .active-fg-dark
.active-bg-warning .active-fg-dark
.active-bg-warning .active-fg-danger
{% end %}