-
-
Save fat/1f6da6b3bd0311a1f8a0 to your computer and use it in GitHub Desktop.
medium's z-index scale
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nicely done dudes.