Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (101 sloc) 3.15 KB
$stratum: 10000
// These could actually be 1000, 2000, 3000 and 4000 since the `fixed` position of an element 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-backdrop: 11000
$substratum-elements: 12000
$substratum-dialog: 13000
$substratum-content: 14000
$substratum-close: 15000
$close-height: 36px
$close-width: 36px
$close-font-size: 34px
.up-modal
position: fixed
top: 0
left: 0
bottom: 0
right: 0
z-index: $stratum
overflow-x: hidden
.up-modal-backdrop
z-index: $substratum-backdrop
background-color: rgba(90, 90, 90, 0.4)
position: absolute
top: 0
right: 0
bottom: 0
left: 0
.up-modal-viewport
position: absolute
top: 0
left: 0
bottom: 0
right: 0
z-index: $substratum-elements
overflow-x: hidden
// The viewport always has a scrollbar, except when we're animating (see below)
overflow-y: scroll
// 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
// Implement the margin around the dialog box with a padding of the viewport.
// This way we can give .up-modal-dialog a max-width of 100%, (1) preventing people
// from setting withs larger than the viewport, and (2) sizing approproately
// if the modal contents are very wide and cannot wrap (e.g. code blocks).
padding: 30px 10px
.up-modal.up-modal-animating
// During opening/closing animations we let the .up-modal container take over
// the scrollbars that would usually be owned by .up-modal-viewport.
// If .up-modal-viewport had a scrollbar while animating with
// "zoom-in" it would look strange that the scrollbar is scaled.
&
overflow-y: scroll
.up-modal-viewport
overflow-y: hidden
.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
// 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
.up-modal[up-flavor='drawer']
.up-modal-viewport
text-align: left
padding: 0
&[up-position='right'] .up-modal-viewport
text-align: right
.up-modal-dialog
max-width: 350px
.up-modal-content
min-height: 100vh
box-sizing: border-box // since we're setting min-height on an element with padding