Built in Text color

Change the element's border color on various triggers

Overview

Change the background color of element when these triggers has been performed: User performs hover over element, element gets .active or .show class, or element appears in the viewport and gets .inview class. You can also easily change the text color opacity by changing its alpha channel

Triggers

To animate the text color when <trigger> is performed on a single element, use data-tor-fx="<trigger>:text(<variant>) where <trigger> is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets :hover state

And <variant> is one of the theme colors.

text(primary)
text(secondary)
text(success)
text(danger)
text(warning)
text(info)
text(light)
text(dark)
text(white)
text(transparent)
<div class="bg-transparent border" data-tor="hover:text(primary)">text(primary)</div>
<div class="bg-transparent border" data-tor="hover:text(secondary)">text(secondary)</div>
<div class="bg-transparent border" data-tor="hover:text(success)">text(success)</div>
<div class="bg-transparent border" data-tor="hover:text(danger)">text(danger)</div>
<div class="bg-transparent border" data-tor="hover:text(warning)">text(warning)</div>
<div class="bg-transparent border" data-tor="hover:text(info)">text(info)</div>
<div class="bg-transparent border" data-tor="hover:text(light)">text(light)</div>
<div class="bg-transparent border" data-tor="hover:text(dark)">text(dark)</div>
<div class="bg-transparent border" data-tor="hover:text(white)">text(white)</div>
<div class="bg-transparent border" data-tor="hover:text(transparent)">text(transparent)</div>
text(primary)
text(secondary)
text(success)
text(danger)
text(warning)
text(info)
text(light)
text(dark)
text(white)
text(transparent)
<div class="bg-transparent border" data-tor="active:text(primary)">text(primary)</div>
<div class="bg-transparent border" data-tor="active:text(secondary)">text(secondary)</div>
<div class="bg-transparent border" data-tor="active:text(success)">text(success)</div>
<div class="bg-transparent border" data-tor="active:text(danger)">text(danger)</div>
<div class="bg-transparent border" data-tor="active:text(warning)">text(warning)</div>
<div class="bg-transparent border" data-tor="active:text(info)">text(info)</div>
<div class="bg-transparent border" data-tor="active:text(light)">text(light)</div>
<div class="bg-transparent border" data-tor="active:text(dark)">text(dark)</div>
<div class="bg-transparent border" data-tor="active:text(white)">text(white)</div>
<div class="bg-transparent border" data-tor="active:text(transparent)">text(transparent)</div>
text(primary)
text(secondary)
text(success)
text(danger)
text(warning)
text(info)
text(light)
text(dark)
text(white)
text(transparent)
<div class="bg-transparent border" data-tor="inview:text(primary)">text(primary)</div>
<div class="bg-transparent border" data-tor="inview:text(secondary)">text(secondary)</div>
<div class="bg-transparent border" data-tor="inview:text(success)">text(success)</div>
<div class="bg-transparent border" data-tor="inview:text(danger)">text(danger)</div>
<div class="bg-transparent border" data-tor="inview:text(warning)">text(warning)</div>
<div class="bg-transparent border" data-tor="inview:text(info)">text(info)</div>
<div class="bg-transparent border" data-tor="inview:text(light)">text(light)</div>
<div class="bg-transparent border" data-tor="inview:text(dark)">text(dark)</div>
<div class="bg-transparent border" data-tor="inview:text(white)">text(white)</div>
<div class="bg-transparent border" data-tor="inview:text(transparent)">text(transparent)</div>

Parent triggers

To animate the text color of a single or multiple child elements when <trigger> is performed on a parent element, add data-tor-fx-trigger="<inview|active|show|hover> to indicate that this is a parent element with the desired trigger - if this parent trigger is performed, child elements will be affected (will change)

Than add data-tor-fx="<trigger>:text(<variant>) attribute to child elements where <trigger> is:

  • inview(p): - when .inview class is applied on Parent trigger element, because it's visible in the viewport
  • active(p): - when .active class is applied on Parent trigger element
  • show(p): - when .show class is applied on Parent trigger element
  • hover(p): - when hover state is applied on Parent trigger element

And <variant> is one of the theme colors.

text(primary)
text(secondary)
text(success)
text(danger)
text(warning)
text(info)
text(light)
text(dark)
text(white)
text(transparent)
<div class="bg-transparent border" data-tor="hover(p):text(primary)">text(primary)</div>
<div class="bg-transparent border" data-tor="hover(p):text(secondary)">text(secondary)</div>
<div class="bg-transparent border" data-tor="hover(p):text(success)">text(success)</div>
<div class="bg-transparent border" data-tor="hover(p):text(danger)">text(danger)</div>
<div class="bg-transparent border" data-tor="hover(p):text(warning)">text(warning)</div>
<div class="bg-transparent border" data-tor="hover(p):text(info)">text(info)</div>
<div class="bg-transparent border" data-tor="hover(p):text(light)">text(light)</div>
<div class="bg-transparent border" data-tor="hover(p):text(dark)">text(dark)</div>
<div class="bg-transparent border" data-tor="hover(p):text(white)">text(white)</div>
<div class="bg-transparent border" data-tor="hover(p):text(transparent)">text(transparent)</div>
text(primary)
text(secondary)
text(success)
text(danger)
text(warning)
text(info)
text(light)
text(dark)
text(white)
text(transparent)
<div class="bg-transparent border" data-tor="active(p):text(primary)">text(primary)</div>
<div class="bg-transparent border" data-tor="active(p):text(secondary)">text(secondary)</div>
<div class="bg-transparent border" data-tor="active(p):text(success)">text(success)</div>
<div class="bg-transparent border" data-tor="active(p):text(danger)">text(danger)</div>
<div class="bg-transparent border" data-tor="active(p):text(warning)">text(warning)</div>
<div class="bg-transparent border" data-tor="active(p):text(info)">text(info)</div>
<div class="bg-transparent border" data-tor="active(p):text(light)">text(light)</div>
<div class="bg-transparent border" data-tor="active(p):text(dark)">text(dark)</div>
<div class="bg-transparent border" data-tor="active(p):text(white)">text(white)</div>
<div class="bg-transparent border" data-tor="active(p):text(transparent)">text(transparent)</div>
text(primary)
text(secondary)
text(success)
text(danger)
text(warning)
text(info)
text(light)
text(dark)
text(white)
text(transparent)
<div class="bg-transparent border" data-tor="inview(p):text(primary)">text(primary)</div>
<div class="bg-transparent border" data-tor="inview(p):text(secondary)">text(secondary)</div>
<div class="bg-transparent border" data-tor="inview(p):text(success)">text(success)</div>
<div class="bg-transparent border" data-tor="inview(p):text(danger)">text(danger)</div>
<div class="bg-transparent border" data-tor="inview(p):text(warning)">text(warning)</div>
<div class="bg-transparent border" data-tor="inview(p):text(info)">text(info)</div>
<div class="bg-transparent border" data-tor="inview(p):text(light)">text(light)</div>
<div class="bg-transparent border" data-tor="inview(p):text(dark)">text(dark)</div>
<div class="bg-transparent border" data-tor="inview(p):text(white)">text(white)</div>
<div class="bg-transparent border" data-tor="inview(p):text(transparent)">text(transparent)</div>

Customizations

Text opacity

Change the text color opacity, using data-tor="<trigger>:text-opacity(<value>)". This will change the alpha channel of the text color using CSS hsla() function. It must be combined with text-* classes.

Triggers

Use data-tor="<inview|active|show|hover>:text-opacity(<value>)" to change the text opacity of a single element.

text-opacity(0%)
text-opacity(5%)
text-opacity(10%)
text-opacity(20%)
text-opacity(30%)
text-opacity(40%)
text-opacity(50%)
text-opacity(60%)
text-opacity(70%)
text-opacity(80%)
text-opacity(90%)
text-opacity(100%)
<div class="text-body" data-tor="hover:text-opacity(0%)">text-opacity(0%)</div>
<div class="text-body" data-tor="hover:text-opacity(5%)">text-opacity(5%)</div>
<div class="text-body" data-tor="hover:text-opacity(10%)">text-opacity(10%)</div>
<div class="text-body" data-tor="hover:text-opacity(20%)">text-opacity(20%)</div>
<div class="text-body" data-tor="hover:text-opacity(30%)">text-opacity(30%)</div>
<div class="text-body" data-tor="hover:text-opacity(40%)">text-opacity(40%)</div>
<div class="text-body" data-tor="hover:text-opacity(50%)">text-opacity(50%)</div>
<div class="text-body" data-tor="hover:text-opacity(60%)">text-opacity(60%)</div>
<div class="text-body" data-tor="hover:text-opacity(70%)">text-opacity(70%)</div>
<div class="text-body" data-tor="hover:text-opacity(80%)">text-opacity(80%)</div>
<div class="text-body" data-tor="hover:text-opacity(90%)">text-opacity(90%)</div>
<div class="text-body" data-tor="hover:text-opacity(100%)">text-opacity(100%)</div>
text-opacity(0%)
text-opacity(5%)
text-opacity(10%)
text-opacity(20%)
text-opacity(30%)
text-opacity(40%)
text-opacity(50%)
text-opacity(60%)
text-opacity(70%)
text-opacity(80%)
text-opacity(90%)
text-opacity(100%)
<div class="text-body" data-tor="active:text-opacity(0%)">text-opacity(0%)</div>
<div class="text-body" data-tor="active:text-opacity(5%)">text-opacity(5%)</div>
<div class="text-body" data-tor="active:text-opacity(10%)">text-opacity(10%)</div>
<div class="text-body" data-tor="active:text-opacity(20%)">text-opacity(20%)</div>
<div class="text-body" data-tor="active:text-opacity(30%)">text-opacity(30%)</div>
<div class="text-body" data-tor="active:text-opacity(40%)">text-opacity(40%)</div>
<div class="text-body" data-tor="active:text-opacity(50%)">text-opacity(50%)</div>
<div class="text-body" data-tor="active:text-opacity(60%)">text-opacity(60%)</div>
<div class="text-body" data-tor="active:text-opacity(70%)">text-opacity(70%)</div>
<div class="text-body" data-tor="active:text-opacity(80%)">text-opacity(80%)</div>
<div class="text-body" data-tor="active:text-opacity(90%)">text-opacity(90%)</div>
<div class="text-body" data-tor="active:text-opacity(100%)">text-opacity(100%)</div>
text-opacity(0%)
text-opacity(5%)
text-opacity(10%)
text-opacity(20%)
text-opacity(30%)
text-opacity(40%)
text-opacity(50%)
text-opacity(60%)
text-opacity(70%)
text-opacity(80%)
text-opacity(90%)
text-opacity(100%)
<div class="text-body" data-tor="inview:text-opacity(0%)">text-opacity(0%)</div>
<div class="text-body" data-tor="inview:text-opacity(5%)">text-opacity(5%)</div>
<div class="text-body" data-tor="inview:text-opacity(10%)">text-opacity(10%)</div>
<div class="text-body" data-tor="inview:text-opacity(20%)">text-opacity(20%)</div>
<div class="text-body" data-tor="inview:text-opacity(30%)">text-opacity(30%)</div>
<div class="text-body" data-tor="inview:text-opacity(40%)">text-opacity(40%)</div>
<div class="text-body" data-tor="inview:text-opacity(50%)">text-opacity(50%)</div>
<div class="text-body" data-tor="inview:text-opacity(60%)">text-opacity(60%)</div>
<div class="text-body" data-tor="inview:text-opacity(70%)">text-opacity(70%)</div>
<div class="text-body" data-tor="inview:text-opacity(80%)">text-opacity(80%)</div>
<div class="text-body" data-tor="inview:text-opacity(90%)">text-opacity(90%)</div>
<div class="text-body" data-tor="inview:text-opacity(100%)">text-opacity(100%)</div>
Parent triggers

Use data-tor="<inview(p)|active(p)|show(p)|hover(p)>:text-opacity(<value>)" to change the text opacity of an element (elements) when a certain triggers has been performed on a parent element.

text-opacity(0%)
text-opacity(5%)
text-opacity(10%)
text-opacity(20%)
text-opacity(30%)
text-opacity(40%)
text-opacity(50%)
text-opacity(60%)
text-opacity(70%)
text-opacity(80%)
text-opacity(90%)
text-opacity(100%)
<div class="text-body" data-tor="hover(p):text-opacity(0%)">text-opacity(0%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(5%)">text-opacity(5%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(10%)">text-opacity(10%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(20%)">text-opacity(20%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(30%)">text-opacity(30%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(40%)">text-opacity(40%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(50%)">text-opacity(50%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(60%)">text-opacity(60%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(70%)">text-opacity(70%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(80%)">text-opacity(80%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(90%)">text-opacity(90%)</div>
<div class="text-body" data-tor="hover(p):text-opacity(100%)">text-opacity(100%)</div>
text-opacity(0%)
text-opacity(5%)
text-opacity(10%)
text-opacity(20%)
text-opacity(30%)
text-opacity(40%)
text-opacity(50%)
text-opacity(60%)
text-opacity(70%)
text-opacity(80%)
text-opacity(90%)
text-opacity(100%)
<div class="text-body" data-tor="active(p):text-opacity(0%)">text-opacity(0%)</div>
<div class="text-body" data-tor="active(p):text-opacity(5%)">text-opacity(5%)</div>
<div class="text-body" data-tor="active(p):text-opacity(10%)">text-opacity(10%)</div>
<div class="text-body" data-tor="active(p):text-opacity(20%)">text-opacity(20%)</div>
<div class="text-body" data-tor="active(p):text-opacity(30%)">text-opacity(30%)</div>
<div class="text-body" data-tor="active(p):text-opacity(40%)">text-opacity(40%)</div>
<div class="text-body" data-tor="active(p):text-opacity(50%)">text-opacity(50%)</div>
<div class="text-body" data-tor="active(p):text-opacity(60%)">text-opacity(60%)</div>
<div class="text-body" data-tor="active(p):text-opacity(70%)">text-opacity(70%)</div>
<div class="text-body" data-tor="active(p):text-opacity(80%)">text-opacity(80%)</div>
<div class="text-body" data-tor="active(p):text-opacity(90%)">text-opacity(90%)</div>
<div class="text-body" data-tor="active(p):text-opacity(100%)">text-opacity(100%)</div>
text-opacity(0%)
text-opacity(5%)
text-opacity(10%)
text-opacity(20%)
text-opacity(30%)
text-opacity(40%)
text-opacity(50%)
text-opacity(60%)
text-opacity(70%)
text-opacity(80%)
text-opacity(90%)
text-opacity(100%)
<div class="text-body" data-tor="inview(p):text-opacity(0%)">text-opacity(0%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(5%)">text-opacity(5%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(10%)">text-opacity(10%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(20%)">text-opacity(20%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(30%)">text-opacity(30%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(40%)">text-opacity(40%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(50%)">text-opacity(50%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(60%)">text-opacity(60%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(70%)">text-opacity(70%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(80%)">text-opacity(80%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(90%)">text-opacity(90%)</div>
<div class="text-body" data-tor="inview(p):text-opacity(100%)">text-opacity(100%)</div>