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

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

$modal-background        ?= white
$modal-border-radius     ?= $generic-border-radius

$modal-width             ?= 80vw
$modal-max-width         ?= 1000px

$modal-height            ?= 80vh
$modal-max-height        ?= 1000px

$modal-header-font-size  ?= 1.6rem
$modal-header-padding    ?= 24px 24px 20px 24px
$modal-header-text-align ?= left
$modal-body-text-align   ?= left
$modal-body-color        ?= rgba(0, 0, 0, .5)
$modal-body-padding      ?= 0 24px 24px 24px
$modal-slim-body-padding ?= 0 24px
$modal-scroll-size       ?= 240px
$modal-buttons-padding   ?= 8px 8px 12px 24px

body.with-modal
  overflow hidden !important

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

maximized-modal()
  width 100vw
  height 100vh
  max-width 100vw
  max-height 100vh
  border-radius 0

.modal-content
  position relative
  background $modal-background
  border-radius $modal-border-radius
  box-shadow $shadow-4
  overflow-y auto
  min-width 280px
  max-height 80vh

  .layout
    width 100%
    height 100%

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

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

@media screen and (min-width $layout-medium-min)
  .modal:not(.maximized)
    background $dimmed-background
    &.quasar-modal-enter .modal-content
      transform scale(1.2)
    &.quasar-modal-leave-active .modal-content
      transform scale(.8)
  .modal.maximized
    &.quasar-modal-enter, &.quasar-modal-leave-active
      .modal-content
        transform translateX(101%)

@media screen and (max-width $layout-small-max)
  .modal:not(.minimized)
    .modal-content
      maximized-modal()
    &.quasar-modal-enter, &.quasar-modal-leave-active
      .modal-content
        transform translateX(101%)
  .modal.minimized
    &.quasar-modal-enter .modal-content
      transform scale(1.2)
    &.quasar-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
.modal-slim-body
  padding $modal-slim-body-padding
.modal-body, .modal-slim-body
  text-align $modal-body-text-align
  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
  &.column
    align-items flex-end