medium's z-index scale

gistfile1.less

// 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;

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

Thanks for sharing!

Nicely done dudes.

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.

👍

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

This is awesome

Good idea.