pixel-editor/_ext/sass/_zindex.scss
2019-03-26 23:20:54 +00:00

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)
}
*/