Skip to content

Instantly share code, notes, and snippets.

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

Copy link

commented Sep 3, 2014

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

Thanks for sharing!

@DeCotii

This comment has been minimized.

Copy link

commented Sep 8, 2014

Nicely done dudes.

@d2s

This comment has been minimized.

Copy link

commented Dec 2, 2014

This is awesome, thanks much for the inspiration…!

@jonathanpath

This comment has been minimized.

Copy link

commented Apr 24, 2015

Why are you writing @zIndex-1--screenForeground instead of @zIndex-screenForeground ?

@marcusstenbeck

This comment has been minimized.

Copy link

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

@artivilla

This comment has been minimized.

Copy link

commented Dec 5, 2015

👍

@adamjw3

This comment has been minimized.

Copy link

commented Jun 16, 2016

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

@Yunkou

This comment has been minimized.

Copy link

commented Aug 9, 2016

This is awesome

@sharkrice

This comment has been minimized.

Copy link

commented Mar 28, 2017

Good idea.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.