Contents

$stratum-backdrop:   10000
$stratum-elements:   11000

// These could actually be 1000, 2000, 3000 and 4000 since the `fixed` position of some elements defines
// a stacking context for all contained z-indexes.
//
// However, let's keep the option open that these elements will one day not have its stacking context.
//
// Also let's not do 1, 2, 3 and 4 so other elements have a chance to move themselves between the layers.
$substratum-dialog:  12000
$substratum-content: 13000
$substratum-close:   14000

$close-height: 36px
$close-width: 36px
$close-font-size: 34px

.up-modal

.up-modal-backdrop
  z-index: $stratum-backdrop
  background-color: rgba(90, 90, 90, 0.4)
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0

.up-modal-viewport
  z-index: $stratum-elements
  position: fixed
  top: 0
  left: 0
  bottom: 0
  right: 0
  overflow-x: hidden
  overflow-y: hidden
  // We prefer centering the dialog as an `inline-block`
  // to giving it a horizontal margin of `auto`. This way
  // the width of `.up-modal-dialog` is controlled by the
  // contents of `.up-modal-content`.
  text-align: center

  .up-modal.up-modal-ready &
    overflow-y: scroll

.up-modal-dialog
  z-index: $substratum-dialog
  // Make sure .up-modal-close is relative to the dialog
  position: relative
  // In case someone sets padding on the dialog box,
  // the width and height attributes set by up.modal
  // should be honored exactly.
  box-sizing: border-box
  margin: 30px 10px

  // In case someone sets a huge width on the dialog.
  max-width: 100%

  // Make it grow with the width of .up-modal-content
  display: inline-block
  text-align: left

.up-modal-content
  z-index: $substratum-content
  padding: 20px
  background-color: #fff
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3)

.up-modal-close
  z-index: $substratum-close
  position: absolute
  right: 0
  top: 0
  width: $close-width
  text-align: center
  line-height: $close-height
  height: $close-height
  font-size: $close-font-size
  color: #666
  cursor: pointer

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
unpoly-rails-0.24.1	lib/assets/stylesheets/unpoly/modal.css.sass
unpoly-rails-0.24.0	lib/assets/stylesheets/unpoly/modal.css.sass