Overview
Good sets custom opacity classes in src/sass/components/helpers/_opacity.scss
and through a SASS variable
$opacity-values
defined in src/sass/components/_variables.scss
to provide additional opacity utility classes to cover its own design system.
Opacity
Use the .opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }
class to set an element's opacity style.
.opacity-0
.opacity-5
.opacity-10
.opacity-15
.opacity-20
.opacity-25
.opacity-50
.opacity-75
.opacity-100
copy < div class = " opacity-0" > </ div>
< div class = " opacity-5" > </ div>
< div class = " opacity-10" > </ div>
< div class = " opacity-15" > </ div>
< div class = " opacity-20" > </ div>
< div class = " opacity-25" > </ div>
< div class = " opacity-50" > </ div>
< div class = " opacity-75" > </ div>
< div class = " opacity-100" > </ div>
Opacity Hover Effects
Use .opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }-hover
to display an element's opacity on hover.
.opacity-0-hover
.opacity-5-hover
.opacity-10-hover
.opacity-15-hover
.opacity-20-hover
.opacity-25-hover
.opacity-50-hover
.opacity-75-hover
.opacity-100-hover
copy < div class = " opacity-0-hover" > </ div>
< div class = " opacity-5-hover" > </ div>
< div class = " opacity-10-hover" > </ div>
< div class = " opacity-15-hover" > </ div>
< div class = " opacity-20-hover" > </ div>
< div class = " opacity-25-hover" > </ div>
< div class = " opacity-50-hover" > </ div>
< div class = " opacity-75-hover" > </ div>
< div class = " opacity-100-hover" > </ div>
Opacity Active State
Use .opacity-active-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }
to set an element's opacity on active states. Click on the demo below to trigger the active state.
.opacity-active-0
.opacity-active-5
.opacity-active-10
.opacity-active-15
.opacity-active-20
.opacity-active-25
.opacity-active-50
.opacity-active-75
.opacity-active-100
copy < div class = " opacity-active-0" > </ div>
< div class = " opacity-active-5" > </ div>
< div class = " opacity-active-10" > </ div>
< div class = " opacity-active-15" > </ div>
< div class = " opacity-active-20" > </ div>
< div class = " opacity-active-25" > </ div>
< div class = " opacity-active-50" > </ div>
< div class = " opacity-active-75" > </ div>
< div class = " opacity-active-100" > </ div>
Opacity Combined Active & Hover State
Use .opacity-state-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }
to set an element's opacity on both active and hover states. Click on the demo below to trigger the active state.
.opacity-state-0
.opacity-state-5
.opacity-state-10
.opacity-state-15
.opacity-state-20
.opacity-state-25
.opacity-state-50
.opacity-state-75
.opacity-state-100
copy < div class = " opacity-state-0" > </ div>
< div class = " opacity-state-5" > </ div>
< div class = " opacity-state-10" > </ div>
< div class = " opacity-state-15" > </ div>
< div class = " opacity-state-20" > </ div>
< div class = " opacity-state-25" > </ div>
< div class = " opacity-state-50" > </ div>
< div class = " opacity-state-75" > </ div>
< div class = " opacity-state-100" > </ div>