Pro

Background color

Change the background color on interaction

Overview

It is possible to change the background color without writing any CSS code by using data-fx="{action}:bg-{color}". It is also possible to change the shade and alpha chanel (opacity) of the background color on particular {action} using data-fx="{action}:bg-{darken|lighten}" and data-fx="{action}:bg-a-{value}" for alpha values.

Color change

Change the background color on {action} by adding data-fx="{action}:bg-{color}" where {color} is one of the theme colors. You can also change the background to any CSS-format color by adding data-fx="{action}:bg[{css-color}]".

On hover

To change the background color of element on its hover, add data-fx="h:bg-{color}" data attribute.

bg-primary to h:bg-secondary
bg-maroon to h:bg-olive
bg-teal to h:bg[navy]
<div class="bg-primary" data-fx="h:bg-secondary">bg-primary to h:bg-secondary</div>
<div class="bg-maroon" data-fx="h:bg-olive">bg-maroon to h:bg-olive</div>
<div class="bg-teal" data-fx="h:bg[navy]">bg-teal to h:bg[navy]</div>

On active

Change the background color when the element gets .active class using data-fx="a:bg-{color}"

bg-primary to a:bg-secondary
bg-maroon to a:bg-olive
bg-teal to a:bg[navy]
<div class="bg-primary" data-fx="a:bg-secondary">bg-primary to a:bg-secondary</div>
<div class="bg-maroon" data-fx="a:bg-olive">bg-maroon to a:bg-olive</div>
<div class="bg-teal" data-fx="a:bg[navy]">bg-teal to a:bg[navy]</div>

On trigger hover

Change a background color of single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:bg-{color}" data attribute to the elements you want to change the background color when trigger is hovered.

Hover this trigger
bg-primary to th:bg-secondary
bg-maroon to th:bg-olive
bg-teal to th:bg[navy]
<div data-trigger="hover">
  <div class="bg-primary" data-fx="th:bg-secondary">bg-primary to th:bg-secondary</div>
  <div class="bg-maroon" data-fx="th:bg-olive">bg-maroon to th:bg-olive</div>
  <div class="bg-teal" data-fx="th:bg[navy]">bg-teal to th:bg[navy]</div>
</div>

On trigger active

Change a background color of single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="active" attribute to it, then add data-fx="ta:bg-{color}" data attribute to the elements you want to change the background color when trigger is activated.

Click this trigger to toggle its .active class
bg-primary to ta:bg-secondary
bg-maroon to ta:bg-olive
bg-teal to ta:bg[navy]
<div data-trigger="active">
  <div class="bg-primary" data-fx="ta:bg-secondary">bg-primary to ta:bg-secondary</div>
  <div class="bg-maroon" data-fx="ta:bg-olive">bg-maroon to ta:bg-olive</div>
  <div class="bg-teal" data-fx="ta:bg[navy]">bg-teal to ta:bg[navy]</div>
</div>

Shade change

On hover

Change the darkness or lightness of background color by adding data-fx="h:bg-{darken|lighten}".

bg-primary to h:bg-lighten-3
bg-teal to h:bg-darken-3
<div class="bg-primary" data-fx="h:bg-lighten-3">bg-primary to h:bg-lighten-3</div>
<div class="bg-teal" data-fx="h:bg-darken-3">bg-teal to h:bg-darken-3</div>

On active

Change the darkness or lightness of background color when the element gets .active class using data-fx="a:bg-{darken|lighten}".

bg-primary to a:bg-lighten-3
bg-teal to a:bg-darken-3
<div class="bg-primary" data-fx="a:bg-lighten-3">bg-primary to a:bg-lighten-3</div>
<div class="bg-teal" data-fx="a:bg-darken-3">bg-teal to a:bg-darken-3</div>

On trigger hover

Change the darkness or lightness of background color of single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:bg-{darken|lighten}" data attribute to the elements you want to change the background color shade when trigger is hovered.

Hover this trigger
bg-primary to th:bg-lighten-3
bg-teal to th:bg-darken-3
<div data-trigger="hover">
  <div class="bg-primary" data-fx="th:bg-lighten-3">bg-primary to th:bg-lighten-3</div>
  <div class="bg-teal" data-fx="th:bg-darken-3">bg-teal to th:bg-darken-3</div>
</div>

On trigger active

Change a background color of single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="active" attribute to it, then add data-fx="ta:bg-{darken|lighten}" data attribute to the elements you want to change the background color when trigger is activated.

Click this trigger to toggle its .active class
bg-primary to ta:bg-lighten-3
bg-teal to ta:bg-darken-3
<div data-trigger="active">
  <div class="bg-primary" data-fx="ta:bg-lighten-3">bg-primary to ta:bg-lighten-3</div>
  <div class="bg-teal" data-fx="ta:bg-darken-3">bg-teal to ta:bg-darken-3</div>
</div>

Alpha change

On hover

bg-primary to h:bg-a-50
bg-teal bg-a-50 to h:bg-a-100
<div class="bg-primary" data-fx="h:bg-a-50">bg-primary to h:bg-a-50</div>
<div class="bg-teal bg-a-50" data-fx="h:bg-a-100">bg-teal bg-a-50 to h:bg-a-100</div>

On active

bg-primary to a:bg-a-50
bg-teal bg-a-50 to a:bg-a-100
<div class="bg-primary" data-fx="a:bg-a-50">bg-primary to a:bg-a-50</div>
<div class="bg-teal bg-a-50" data-fx="a:bg-a-100">bg-teal bg-a-50 to a:bg-a-100</div>

On trigger hover

Hover this trigger
bg-primary to th:bg-a-50
bg-teal bg-a-50 to th:bg-a-100
<div data-trigger="hover">
  <div class="bg-primary" data-fx="th:bg-a-50">bg-primary to th:bg-a-50</div>
  <div class="bg-teal bg-a-50" data-fx="th:bg-a-100">bg-teal bg-a-50 to th:bg-a-100</div>
</div>

On trigger active

Click this trigger to toggle its .active class
bg-primary to ta:bg-a-50
bg-teal bg-a-50 to ta:bg-a-100
<div data-trigger="active">
  <div class="bg-primary" data-fx="ta:bg-a-50">bg-primary to ta:bg-a-50</div>
  <div class="bg-teal bg-a-50" data-fx="ta:bg-a-100">bg-teal bg-a-50 to ta:bg-a-100</div>
</div>