Built in Border 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 shading of element based on these triggers or even background color opacity by changing its alpha channel

Triggers

To animate the border color when <trigger> is performed on a single element, use data-tor-fx="<trigger>:border.(<color>) 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 {color} is one of the theme colors.

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

Parent triggers

To animate the border 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>:border.(<color>) attribute to child elements where <trigger> is:

  • inview-T: - when .inview class is applied on parent Trigger element, because it's visible in the viewport
  • active-T: - when .active class is applied on parent Trigger element
  • show-T: - when .show class is applied on parent Trigger element
  • hover-T: - when hover state is applied on parent Trigger element

And {color} is one of the theme colors.

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

Customizations

Border opacity

Change the border opacity, using data-tor-fx="<trigger>:border-opacity(<amount>)". This will change the alpha channel of the border color using CSS hsla() function.

Triggers

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

border-opacity(0)
border-opacity(5)
border-opacity(10)
border-opacity(20)
border-opacity(30)
border-opacity(40)
border-opacity(50)
border-opacity(60)
border-opacity(70)
border-opacity(80)
border-opacity(90)
border-opacity(100)
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(0)">border-opacity(0)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(5)">border-opacity(5)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(10)">border-opacity(10)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(20)">border-opacity(20)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(30)">border-opacity(30)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(40)">border-opacity(40)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(50)">border-opacity(50)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(60)">border-opacity(60)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(70)">border-opacity(70)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(80)">border-opacity(80)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(90)">border-opacity(90)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover:border-opacity(100)">border-opacity(100)</div>
border-opacity(0)
border-opacity(5)
border-opacity(10)
border-opacity(20)
border-opacity(30)
border-opacity(40)
border-opacity(50)
border-opacity(60)
border-opacity(70)
border-opacity(80)
border-opacity(90)
border-opacity(100)
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(0)">border-opacity(0)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(5)">border-opacity(5)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(10)">border-opacity(10)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(20)">border-opacity(20)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(30)">border-opacity(30)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(40)">border-opacity(40)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(50)">border-opacity(50)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(60)">border-opacity(60)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(70)">border-opacity(70)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(80)">border-opacity(80)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(90)">border-opacity(90)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active:border-opacity(100)">border-opacity(100)</div>
border-opacity(0)
border-opacity(5)
border-opacity(10)
border-opacity(20)
border-opacity(30)
border-opacity(40)
border-opacity(50)
border-opacity(60)
border-opacity(70)
border-opacity(80)
border-opacity(90)
border-opacity(100)
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(0)">border-opacity(0)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(5)">border-opacity(5)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(10)">border-opacity(10)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(20)">border-opacity(20)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(30)">border-opacity(30)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(40)">border-opacity(40)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(50)">border-opacity(50)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(60)">border-opacity(60)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(70)">border-opacity(70)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(80)">border-opacity(80)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(90)">border-opacity(90)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview:border-opacity(100)">border-opacity(100)</div>
Parent triggers

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

border-opacity(0)
border-opacity(5)
border-opacity(10)
border-opacity(20)
border-opacity(30)
border-opacity(40)
border-opacity(50)
border-opacity(60)
border-opacity(70)
border-opacity(80)
border-opacity(90)
border-opacity(100)
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(0)">border-opacity(0)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(5)">border-opacity(5)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(10)">border-opacity(10)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(20)">border-opacity(20)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(30)">border-opacity(30)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(40)">border-opacity(40)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(50)">border-opacity(50)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(60)">border-opacity(60)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(70)">border-opacity(70)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(80)">border-opacity(80)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(90)">border-opacity(90)</div>
<div class="border border-primary bg-transparent" data-tor-fx="hover-T:border-opacity(100)">border-opacity(100)</div>
border-opacity(0)
border-opacity(5)
border-opacity(10)
border-opacity(20)
border-opacity(30)
border-opacity(40)
border-opacity(50)
border-opacity(60)
border-opacity(70)
border-opacity(80)
border-opacity(90)
border-opacity(100)
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(0)">border-opacity(0)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(5)">border-opacity(5)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(10)">border-opacity(10)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(20)">border-opacity(20)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(30)">border-opacity(30)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(40)">border-opacity(40)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(50)">border-opacity(50)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(60)">border-opacity(60)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(70)">border-opacity(70)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(80)">border-opacity(80)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(90)">border-opacity(90)</div>
<div class="border border-primary bg-transparent" data-tor-fx="active-T:border-opacity(100)">border-opacity(100)</div>
border-opacity(0)
border-opacity(5)
border-opacity(10)
border-opacity(20)
border-opacity(30)
border-opacity(40)
border-opacity(50)
border-opacity(60)
border-opacity(70)
border-opacity(80)
border-opacity(90)
border-opacity(100)
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(0)">border-opacity(0)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(5)">border-opacity(5)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(10)">border-opacity(10)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(20)">border-opacity(20)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(30)">border-opacity(30)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(40)">border-opacity(40)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(50)">border-opacity(50)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(60)">border-opacity(60)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(70)">border-opacity(70)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(80)">border-opacity(80)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(90)">border-opacity(90)</div>
<div class="border border-primary bg-transparent" data-tor-fx="inview-T:border-opacity(100)">border-opacity(100)</div>