mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
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)
|
||
|
}
|
||
|
|
||
|
*/
|