i-rubik/src/style/components/modal.styl

A Vue.js 2.0+ UI Components Framework

.modal
  display block
  position fixed
  top 35%
  right 0
  left 0
  width 800px
  max-width 90%
  margin auto
  z-index 1001
  max-height 55%
  opacity 1
  @extend .z-depth-3
  
  &-enter-active,
  &-leave-active
    transition $primary-transition
    
  &-enter,
  &-leave-active
    transform scale(1.1)
    opacity 0
    
    
  &-bottom,
  &-top
    top initial !important
    bottom 0
    border-radius 0
    box-shadow 0 -4px 15px 0 rgba(0, 0, 0, 0.2), 0 -6px 50px 0 rgba(0, 0, 0, 0.19)
    width 100%
    margin 0
    max-width none
    
    &.modal-enter,
    &.modal-leave-active
      transform translateY(100%)
      opacity 1
      
  &-top
    top 0
    bottom initial !important
    
    &.modal-enter,
    &.modal-leave-active
      transform translateY(-100%)
      opacity 1
    
.modal-layer
  display block
  position fixed
  width 100%
  height 100%
  background-color rgba(0,0,0, 0.5)
  transition $primary-transition
  top 0
  left 0
  opacity 0
  filter blur(10%)
  z-index -1
  
  &-open
    opacity 1
    z-index 1000