diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss')
| -rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss | 168 |
1 files changed, 112 insertions, 56 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss index 0e80951..931092c 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_modals.scss @@ -1,83 +1,139 @@ -// MODALS -// ------ +// +// Modals +// -------------------------------------------------- -// Recalculate z-index where appropriate +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body .modal-open { - .dropdown-menu { z-index: $zindexDropdown + $zindexModal; } - .dropdown.open { *z-index: $zindexDropdown + $zindexModal; } - .popover { z-index: $zindexPopover + $zindexModal; } - .tooltip { z-index: $zindexTooltip + $zindexModal; } + overflow: hidden; } -// Background -.modal-backdrop { +// Container that the modal scrolls within +.modal { + display: none; + overflow: auto; + overflow-y: scroll; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - z-index: $zindexModalBackdrop; - background-color: $black; - // Fade for backdrop - &.fade { opacity: 0; } + z-index: $zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + @include translate(0, -25%); + @include transition-transform(0.3s ease-out); + } + &.in .modal-dialog { @include translate(0, 0)} } -.modal-backdrop, .modal-backdrop.fade.in { - @include opacity(0.8); +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; } -// Base modal -.modal { +// Actual modal +.modal-content { + position: relative; + background-color: $modal-content-bg; + border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid $modal-content-border-color; + border-radius: $border-radius-large; + @include box-shadow(0 3px 9px rgba(0,0,0,.5)); + background-clip: padding-box; + // Remove focus outline from opened modal + outline: none; +} + +// Modal background +.modal-backdrop { position: fixed; - top: 50%; - left: 50%; - z-index: $zindexModal; - max-height: 500px; - overflow: auto; - width: 560px; - margin: -250px 0 0 -280px; - background-color: $white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - @include border-radius(6px); - @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); - @include background-clip(padding-box); - &.fade { - $transition: opacity .3s linear, top .3s ease-out; - @include transition($transition); - top: -25%; - } - &.fade.in { top: 50%; } + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal-background; + background-color: $modal-backdrop-bg; + // Fade for backdrop + &.fade { @include opacity(0); } + &.in { @include opacity($modal-backdrop-opacity); } } + +// Modal header +// Top section of the modal w/ title and dismiss .modal-header { - padding: 9px 15px; - border-bottom: 1px solid #eee; - // Close icon - .close { margin-top: 2px; } + padding: $modal-title-padding; + border-bottom: 1px solid $modal-header-border-color; + min-height: ($modal-title-padding + $modal-title-line-height); +} +// Close icon +.modal-header .close { + margin-top: -2px; } -// Body (where all modal content resides) -.modal-body { - padding: 15px; +// Title text within header +.modal-title { + margin: 0; + line-height: $modal-title-line-height; } -// Remove bottom margin if need be -.modal-body .modal-form { - margin-bottom: 0; + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: $modal-inner-padding; } // Footer (for actions) .modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - @include border-radius(0 0 6px 6px); - @include box-shadow(inset 0 1px 0 $white); - @include clearfix(); - .btn { - float: right; + margin-top: 15px; + padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding; + text-align: right; // right align buttons + border-top: 1px solid $modal-footer-border-color; + @include clearfix(); // clear it in case folks use .pull-* classes on buttons + + // Properly space out buttons + .btn + .btn { margin-left: 5px; margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Scale up the modal +@media (min-width: $screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: $modal-md; + margin: 30px auto; + } + .modal-content { + @include box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: $modal-sm; } +} + +@media (min-width: $screen-md-min) { + .modal-lg { width: $modal-lg; } } |