Skip to content

Instantly share code, notes, and snippets.

@fat
Last active October 31, 2022 09:14
Show Gist options
  • Save fat/1f6da6b3bd0311a1f8a0 to your computer and use it in GitHub Desktop.
Save fat/1f6da6b3bd0311a1f8a0 to your computer and use it in GitHub Desktop.
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;
@DeCotii
Copy link

DeCotii commented Sep 8, 2014

Nicely done dudes.

@d2s
Copy link

d2s commented Dec 2, 2014

This is awesome, thanks much for the inspiration…!

@jonathanpath
Copy link

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

@marcusstenbeck
Copy link

@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
Copy link

👍

@adamjw3
Copy link

adamjw3 commented Jun 16, 2016

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

@Yunkou
Copy link

Yunkou commented Aug 9, 2016

This is awesome

@sharkrice
Copy link

Good idea.

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