Z-Index
A series of utility classes that adjust the z-index property of a selector.
Install
npm install seed-zi --save
Dependencies
Usage
| Class | Z-index |
|---|---|
.u-zi-inherit |
inherit |
.u-zi-initial |
initial |
.u-zi-unset |
unset |
.u-zi-hidden |
-1 |
.u-zi-0 |
0 |
.u-zi-1 |
1 |
.u-zi-2 |
2 |
.u-zi-3 |
3 |
.u-zi-5 |
5 |
.u-zi-10 |
10 |
.u-zi-100 |
100 |
.u-zi-200 |
200 |
.u-zi-1000 |
1000 |
.u-zi-max |
9999999 |
Example
I have a z-index of 1
I have a z-index of 10!
<div class="u-pos-relative u-zi-1">
I have a z-index of 1
</div>
<div class="u-pos-relative u-zi-10">
I have a z-index of 10!
</div>Configurations
Below are the default Sass configuration variables for seed-zi. The variables can be found in the pack’s _config.scss file.
seed-zi/_config.scss$seed-zi-namespace: "u-zi" !default;
// Default zi z-index
$seed-zi-index: (
inherit: inherit,
initial: initial,
unset: unset,
hidden: -1,
0: 0,
1: 1,
2: 2,
3: 3,
5: 5,
10: 10,
100: 100,
200: 200,
1000: 1000,
max: 9999999
) !default;