67 lines
798 B
SCSS
67 lines
798 B
SCSS
// this function is used whenever you need to define a z-index
|
|
@function -z($key, $mod: 0) {
|
|
|
|
$index: -index($layers, $key) * 10;
|
|
|
|
@if $mod {
|
|
@return $index + $mod;
|
|
}
|
|
|
|
@return $index;
|
|
}
|
|
|
|
// dependency for the other function
|
|
@function -index($list, $value) {
|
|
@for $i from 1 through length($list) {
|
|
@if nth($list, $i) == $value {
|
|
@return $i;
|
|
}
|
|
}
|
|
|
|
@return null;
|
|
}
|
|
|
|
|
|
/*
|
|
|
|
define your layers from bottom to top:
|
|
|
|
$layers: (
|
|
background,
|
|
content,
|
|
dropdown,
|
|
subnav,
|
|
mobile-nav,
|
|
header,
|
|
overlay,
|
|
modal,
|
|
modal-background,
|
|
modal-content
|
|
);
|
|
|
|
|
|
|
|
//////////use:
|
|
|
|
.test {
|
|
z-index: -z(content);
|
|
}
|
|
|
|
|
|
|
|
|
|
//////////go one layer above content
|
|
|
|
.test-2 {
|
|
z-index: -z(content, 1);
|
|
}
|
|
|
|
|
|
|
|
///////////go one layer below content
|
|
|
|
.test-2 {
|
|
z-index: -z(content, -1)
|
|
}
|
|
|
|
*/ |