node_modules/bulma/sass/components/modal.sass

   1 $modal-z: 40 !default
   2
   3 $modal-background-background-color: rgba($scheme-invert, 0.86) !default
   4
   5 $modal-content-width: 640px !default
   6 $modal-content-margin-mobile: 20px !default
   7 $modal-content-spacing-mobile: 160px !default
   8 $modal-content-spacing-tablet: 40px !default
   9
  10 $modal-close-dimensions: 40px !default
  11 $modal-close-right: 20px !default
  12 $modal-close-top: 20px !default
  13
  14 $modal-card-spacing: 40px !default
  15
  16 $modal-card-head-background-color: $background !default
  17 $modal-card-head-border-bottom: 1px solid $border !default
  18 $modal-card-head-padding: 20px !default
  19 $modal-card-head-radius: $radius-large !default
  20
  21 $modal-card-title-color: $text-strong !default
  22 $modal-card-title-line-height: 1 !default
  23 $modal-card-title-size: $size-4 !default
  24
  25 $modal-card-foot-radius: $radius-large !default
  26 $modal-card-foot-border-top: 1px solid $border !default
  27
  28 $modal-card-body-background-color: $scheme-main !default
  29 $modal-card-body-padding: 20px !default
  30
  31 .modal
  32   @extend %overlay
  33   align-items: center
  34   display: none
  35   flex-direction: column
  36   justify-content: center
  37   overflow: hidden
  38   position: fixed
  39   z-index: $modal-z
  40   // Modifiers
  41   &.is-active
  42     display: flex
  43
  44 .modal-background
  45   @extend %overlay
  46   background-color: $modal-background-background-color
  47
  48 .modal-content,
  49 .modal-card
  50   margin: 0 $modal-content-margin-mobile
  51   max-height: calc(100vh - #{$modal-content-spacing-mobile})
  52   overflow: auto
  53   position: relative
  54   width: 100%
  55   // Responsiveness
  56   +tablet
  57     margin: 0 auto
  58     max-height: calc(100vh - #{$modal-content-spacing-tablet})
  59     width: $modal-content-width
  60
  61 .modal-close
  62   @extend %delete
  63   background: none
  64   height: $modal-close-dimensions
  65   position: fixed
  66   right: $modal-close-right
  67   top: $modal-close-top
  68   width: $modal-close-dimensions
  69
  70 .modal-card
  71   display: flex
  72   flex-direction: column
  73   max-height: calc(100vh - #{$modal-card-spacing})
  74   overflow: hidden
  75   -ms-overflow-y: visible
  76
  77 .modal-card-head,
  78 .modal-card-foot
  79   align-items: center
  80   background-color: $modal-card-head-background-color
  81   display: flex
  82   flex-shrink: 0
  83   justify-content: flex-start
  84   padding: $modal-card-head-padding
  85   position: relative
  86
  87 .modal-card-head
  88   border-bottom: $modal-card-head-border-bottom
  89   border-top-left-radius: $modal-card-head-radius
  90   border-top-right-radius: $modal-card-head-radius
  91
  92 .modal-card-title
  93   color: $modal-card-title-color
  94   flex-grow: 1
  95   flex-shrink: 0
  96   font-size: $modal-card-title-size
  97   line-height: $modal-card-title-line-height
  98
  99 .modal-card-foot
 100   border-bottom-left-radius: $modal-card-foot-radius
 101   border-bottom-right-radius: $modal-card-foot-radius
 102   border-top: $modal-card-foot-border-top
 103   .button
 104     &:not(:last-child)
 105       margin-right: 0.5em
 106
 107 .modal-card-body
 108   +overflow-touch
 109   background-color: $modal-card-body-background-color
 110   flex-grow: 1
 111   flex-shrink: 1
 112   overflow: auto
 113   padding: $modal-card-body-padding