app-levels

Solve your z-index: 999 problems: JavaScript zIndex defaults.

Usage no npm install needed!

<script type="module">
  import appLevels from 'https://cdn.skypack.dev/app-levels';
</script>

Solve your z-index: 999 problems: A set of zIndex defaults.

With npm do:

$ npm install app-levels

or

$ yarn add app-levels

In Javascript

import { LEVEL_NAV } from 'app-levels'

<div style={{ zIndex: LEVEL_NAV}}></div>

In SASS

import '../node_modules/app-levels/index.sass'

.my-popup {
  z-index: $LEVEL_POPUP
}

LEVEL_SUPPORT_OVERLAY: 60
LEVEL_ALERT: 50
LEVEL_POPUP: 40
LEVEL_NAV_MOBILE: 30
LEVEL_NAV: 20
LEVEL_OVERLAYS: 10
LEVEL_BASE: 0
LEVEL_BACKGROUND: -10

MIT