Skip to content

Instantly share code, notes, and snippets.

@pyronaur
Last active April 19, 2017 17:36
Show Gist options
  • Save pyronaur/53231ae32ccdff53bd50f09f61c0c230 to your computer and use it in GitHub Desktop.
Save pyronaur/53231ae32ccdff53bd50f09f61c0c230 to your computer and use it in GitHub Desktop.
z-index layers in stylus
/**
*
* You can read more about this gist here:
* http://justnorris.com/manage-css-z-index/
*
*/
@require "layers.styl"
@require "z_index_layer.styl"
@require "usage.styl"
@require "z_index_debug.styl"
z_layers = {
// Generic
background: -1,
loading-cover: 5000,
progress: 5500,
// #header
Header: 800,
Footer: 50,
// #Wrapper
Wrapper: 30,
// Menu
Menu: 3000,
}
.Wrapper {
layer(Wrapper)
}
.Thing-5 {
layer(Wrapper, -10) // place .Thing-5 10 levels below .Wrapper
}
if( length(unused_z_layers) > 0 )
p( '-----' )
warn("Unused layers found")
p(unused_z_layers)
p( '-----' )
// Note, that `z_layer` variable must exist already, so this file has to be included after `layers.styl`
unused_z_layers = clone(z_layers)
layer(group, adjust = 0)
// Find unused z-layers
if group in unused_z_layers
used = remove(unused_z_layers, group)
z-index: z_layers[group] + adjust
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment