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
// Medium.com'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;
@rafaelrinaldi

This comment has been minimized.

Show comment Hide comment
@rafaelrinaldi

rafaelrinaldi Sep 3, 2014

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

Thanks for sharing!

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

Thanks for sharing!

@DeCotii

This comment has been minimized.

Show comment Hide comment
@DeCotii

DeCotii Sep 8, 2014

Nicely done dudes.

DeCotii commented Sep 8, 2014

Nicely done dudes.

@d2s

This comment has been minimized.

Show comment Hide comment
@d2s

d2s Dec 2, 2014

This is awesome, thanks much for the inspiration…!

d2s commented Dec 2, 2014

This is awesome, thanks much for the inspiration…!

@jonathanpath

This comment has been minimized.

Show comment Hide comment
@jonathanpath

jonathanpath Apr 24, 2015

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

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

@marcusstenbeck

This comment has been minimized.

Show comment Hide comment
@marcusstenbeck

marcusstenbeck Apr 29, 2015

@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.

@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.

@artivilla

This comment has been minimized.

Show comment Hide comment
@artivilla

artivilla Dec 5, 2015

👍

👍

@adamjw3

This comment has been minimized.

Show comment Hide comment
@adamjw3

adamjw3 Jun 16, 2016

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

adamjw3 commented Jun 16, 2016

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

@Yunkou

This comment has been minimized.

Show comment Hide comment
@Yunkou

Yunkou Aug 9, 2016

This is awesome

Yunkou commented Aug 9, 2016

This is awesome

@sharkrice

This comment has been minimized.

Show comment Hide comment
@sharkrice

sharkrice Mar 28, 2017

Good idea.

Good idea.

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