vuetify/src/stylus/components/_overlay.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'

.overlay
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
  // The overlay has a dynamically set
  // z-index, we want the transition
  // timing to affect its changing
  // https://github.com/vuetifyjs/vuetify/issues/2146
  transition: .5s $transition.swing
  // This is the standard index
  z-index: 5

  &--absolute
    position: absolute

  &:before
    background-color: rgba(33, 33, 33, 1)
    bottom: 0
    content: ''
    height: 100%
    left: 0
    opacity: 0
    position: absolute
    right: 0
    top: 0
    transition: inherit
    // Delay the transition to avoid a
    // rendering bug that is visible
    // within Edge and Firefox
    // https://github.com/vuetifyjs/vuetify/issues/2146
    transition-delay: 150ms
    width: 100%

  &--active
    pointer-events: auto
    touch-action: none

    &:before
      opacity: .46