Opacity
A series of utility classes that adjust the opacity property of a selector.
Install
npm install seed-opacity --save
Dependencies
Usage
seed-opacity provides a range of opacitys ranging from 0-100%.
| Class | Opacity (value) |
|---|---|
.u-op-0 |
0 |
.u-op-1 |
0.1 |
.u-op-2 |
0.2 |
.u-op-3 |
0.3 |
.u-op-4 |
0.4 |
.u-op-5 |
0.5 |
.u-op-6 |
0.6 |
.u-op-7 |
0.7 |
.u-op-8 |
0.8 |
.u-op-9 |
0.9 |
.u-op-10 |
1 |
Example
I'm pretty visible
I'm sorta visible
I'm like… barely visible
<div class="u-op-8">I'm pretty visible</div>
<div class="u-op-5">I'm sorta visible</div>
<div class="u-op-1">I'm like… barely visible</div>Configurations
Below are the default Sass configuration variables for seed-opacity. The variables can be found in the pack’s _config.scss file.
seed-opacity/_config.scss// Namespaces
$seed-opacity-namespace: "u-op" !default;
// Opacity
$seed-opacity: (
0: 0,
1: 0.1,
2: 0.2,
3: 0.3,
4: 0.4,
5: 0.5,
6: 0.6,
7: 0.7,
8: 0.8,
9: 0.9,
10: 1
) !default;