Overview
Start Vue Pro sets custom opacity classes in
src/assets/sass/core/components/helpers/_opacity.scss and through a SASS variable
$opacity-values defined in src/assets/sass/core/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
<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
<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.
<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.
<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>
2024©
Keenthemes
