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

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

$modal-background        ?= white
$modal-border-radius     ?= 13px

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

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

$modal-header-font-size  ?= 1.3rem
$modal-header-padding    ?= 20px 16px 7px
$modal-header-text-align ?= center
$modal-body-text-align   ?= center
$modal-body-color        ?= black
$modal-body-padding      ?= 0 16px 21px
$modal-slim-body-padding ?= 0 16px 16px 16px
$modal-scroll-size       ?= 240px
$modal-buttons-padding   ?= 0

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
  border-top 1px solid $form-darker-color
  button
    flex 1 1 auto
    font-size 110%
    margin 0
    padding 1rem
    border-radius 0
    &:last-child
      font-weight bold
    &:hover, &:active
      color white !important
      background rgba(0, 0, 0, .3) !important
  &.row
    button + button
      border-left 1px solid $form-darker-color
  &.column
    button + button
      border-top 1px solid $form-darker-color