Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
medium's z-index scale
// Copyright 2014 A Medium Corporation
// z-index.less
//'s z-index scale. Z-index values should always be defined in z-index.less. This
// allows us to at a glance determine relative layers of our application and prevents bugs
// arrising from arbitrary z-index values. Do not edit the z-index scale! Only add application
// scoped z-index values.
// Z-Index Scale (private vars)
// --------------------------------------------------
@zIndex-1: 100;
@zIndex-2: 200;
@zIndex-3: 300;
@zIndex-4: 400;
@zIndex-5: 500;
@zIndex-6: 600;
@zIndex-7: 700;
@zIndex-8: 800;
@zIndex-9: 900;
@zIndex-10: 1000;
// Z-Index Applications
// --------------------------------------------------
@zIndex-1--screenForeground: @zIndex-1;
@zIndex-1--followUpVisibility: @zIndex-1;
@zIndex-1--prlWelcome: @zIndex-1;
@zIndex-1--appImageDropdown: @zIndex-1;
@zIndex-1--surfaceUnder: @zIndex-1;
@zIndex-1--blockGroup: @zIndex-1;
@zIndex-2--surfaceOver: @zIndex-2;
@zIndex-2--imagePickerControl: @zIndex-2;
@zIndex-2--collectionCardButton: @zIndex-2;
@zIndex-2--blockGroupButtonGroup: @zIndex-2;
@zIndex-2--blockGroupFocused: @zIndex-2;
@zIndex-2--blockGroupOverlay: @zIndex-2;
@zIndex-3--caption: @zIndex-3;
@zIndex-3--blockInsertControl: @zIndex-3;
@zIndex-5--figureOverlay: @zIndex-5;
@zIndex-5--highlightMenu: @zIndex-5;
@zIndex-5--metabar: @zIndex-5;
@zIndex-5--profileAvatar: @zIndex-5;
@zIndex-5--noteRecommendations: @zIndex-5;
@zIndex-5--collectionLogo: @zIndex-5;
@zIndex-6--matterLogo: @zIndex-6;
@zIndex-6--editorSidebar: @zIndex-6;
@zIndex-6--navOverlay: @zIndex-6;
@zIndex-7--nav: @zIndex-7;
@zIndex-8--transitioningContainer: @zIndex-8;
@zIndex-8--panel: @zIndex-8;
@zIndex-8--butterBar: @zIndex-8;
@zIndex-8--loadingBar: @zIndex-8;
@zIndex-8--zoomOverlay: @zIndex-8;
@zIndex-9--zoomOverlayTarget: @zIndex-9;
@zIndex-9--navOverlayTouch: @zIndex-9;
@zIndex-9--overlay: @zIndex-9;
@zIndex-9--dialog: @zIndex-9;
@zIndex-9--tooltip: @zIndex-9;
@zIndex-10--dev: @zIndex-10;
// Z-Index Mobile-Notes
// --------------------------------------------------
@zIndex-5--mobileNotesOverlay: @zIndex-5;
@zIndex-6--mobileNotesHighlight: @zIndex-6;
@zIndex-7--mobileNotesContainer: @zIndex-7;
@zIndex-8--mobileNotesDismiss: @zIndex-8;

This is a very interesting trick! Just wondering if it cover all scenarios though.

Thanks for sharing!

DeCotii commented Sep 8, 2014

Nicely done dudes.

d2s commented Dec 2, 2014

This is awesome, thanks much for the inspiration…!

Why are you writing @zindex-1--screenforeground instead of @zindex-screenforeground ?

@jonathanpath I'd guess it's a nod to BEM, where double dashes are modifiers. In this case @zIndex-1--screenForeground is likely to be interpreted as z-index at level 1, when used for screen foreground elements. That's how I see it at least. The use of number 1 is probably to add some context, so that someone reviewing the code knows approximately at what that z-index is.


adamjw3 commented Jun 16, 2016

This is cool but how do you handle negative z-index values?

Yunkou commented Aug 9, 2016

This is awesome

Good idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment