Opacities

Atomic classes for managing a element's opacity properties.

Classes

🔗

Class	CSS	Hover	Focus
`.o0`	`opacity: 0;`	Y
`.o5`	`opacity: 0.05;`	Y
`.o10`	`opacity: 0.1;`
`.o20`	`opacity: 0.2;`
`.o30`	`opacity: 0.3;`
`.o40`	`opacity: 0.4;`
`.o50`	`opacity: 0.5;`	Y
`.o60`	`opacity: 0.6;`
`.o70`	`opacity: 0.7;`
`.o80`	`opacity: 0.8;`	Y
`.o90`	`opacity: 0.9;`
`.o100`	`opacity: 1;`	Y	Y

Examples

🔗

<div class="o0">0% opacity</div>
<div class="o5">5% opacity</div>
<div class="o10">10% opacity</div>
<div class="o20">20% opacity</div>
<div class="o30">30% opacity</div>
<div class="o40">40% opacity</div>
<div class="o50">50% opacity</div>
<div class="o60">60% opacity</div>
<div class="o70">70% opacity</div>
<div class="o80">80% opacity</div>
<div class="o90">90% opacity</div>
<div class="o100">100% opacity</div>

.o0

.o5

.o10

.o20

.o30

.o40

.o50

.o60

.o70

.o80

.o90

.o100

Customization

Override opacity variables:

$opacities: (0, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
$opacities-hover: (0, 5, 50, 80, 100);
$opacities-focus: (100);