quasar-framework/src/components/modal/modal.mat.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

body.with-modal
  overflow hidden !important

minimized-modal()
  max-width 80vw
  max-height 80vh

maximized-modal()
  width 100%
  height 100%
  max-width 100%
  max-height 100%

.modal-content
  position relative
  background $modal-background
  box-shadow $shadow-24
  overflow-y auto
  min-width 280px
  max-height 80vh
  -webkit-backface-visibility hidden

.modal
  z-index $z-modal
  &.minimized, &.with-backdrop
    background $dimmed-background
  &.minimized .modal-content
    minimized-modal()
  &.maximized .modal-content
    maximized-modal()

.q-modal-enter, .q-modal-leave-active
  opacity 0

@media (min-width $breakpoint-md-min)
  .modal:not(.maximized)
    background $dimmed-background
    &.q-modal-enter .modal-content
      transform scale(1.2)
    &.q-modal-leave-active .modal-content
      transform scale(.8)
  .modal.maximized
    &.q-modal-enter, &.q-modal-leave-active
      .modal-content
        transform translateY(30%)

@media (max-width $breakpoint-sm-max)
  .modal:not(.minimized)
    .modal-content
      maximized-modal()
    &.q-modal-enter, &.q-modal-leave-active
      .modal-content
        transform translateY(30%)
  .modal.minimized
    &.q-modal-enter .modal-content
      transform scale(1.2)
    &.q-modal-leave-active .modal-content
      transform scale(.8)

.modal, .modal-content
  transition all .2s ease-in-out

.modal-header
  text-align $modal-header-text-align
  padding $modal-header-padding
  font-size $modal-header-font-size
  font-weight 500

.modal-body
  padding $modal-body-padding
  color $modal-body-color

.small-modal-scroll, .modal-scroll, .big-modal-scroll
  overflow auto
  -webkit-overflow-scrolling touch
  will-change scroll-position
.small-modal-scroll
  max-height (.65 * $modal-scroll-size)
.modal-scroll
  max-height $modal-scroll-size
.big-modal-scroll
  max-height (2 * $modal-scroll-size)

.modal-buttons
  padding $modal-buttons-padding
  justify-content flex-end
  color $primary
  &.row
    .q-btn + .q-btn
      margin-left 8px
  &.column
    align-items flex-end
    .q-btn + .q-btn
      margin-top 8px

.q-modal-bottom-enter, .q-modal-bottom-leave-active
  opacity 0
  .modal-content
    transform translateY(30%)

.q-modal-top-enter, .q-modal-top-leave-active
  opacity 0
  .modal-content
    transform translateY(-30%)

.q-modal-right-enter, .q-modal-right-leave-active
  opacity 0
  .modal-content
    transform translateX(30%)

.q-modal-left-enter, .q-modal-left-leave-active
  opacity 0
  .modal-content
    transform translateX(-30%)