Created
October 13, 2015 12:10
-
-
Save mimshwright/17c0edadfdb2a37d847a to your computer and use it in GitHub Desktop.
Global z-indexes stored by order in a list.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Store all the Z-Indexes that matter in your life. | |
| // Add an id to the list. Items will be ordered based on the order in the list. | |
| // To reorder the z-indexes, just reorder the list | |
| // Use @include z-index(id); to set the z-index of your element. | |
| $z-indexed-elements: ( | |
| always-on-top-of-everything-button | |
| hamburger-nav | |
| important-button---but-not-that-important | |
| unnecessary-animation | |
| header | |
| shy-div | |
| background | |
| ); | |
| // Distance between each z-index | |
| $z-step: 100; | |
| // Lowest z-index | |
| $z-base: 100; | |
| @mixin z-index($id) { | |
| $throw: false; | |
| $l: length($z-indexed-elements); | |
| @if $id { | |
| $index: index($z-indexed-elements, $id); | |
| @if $index { | |
| z-index: ($l - $index) * $z-step + $z-base; | |
| } @else {$throw: true;} | |
| } @else {$throw: true;} | |
| @if $throw { | |
| @error "$id must be defined and match an id in $z-indexed-elements." | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment