diff --git a/bootstrap-3.0.0/less/modals.less b/bootstrap-3.0.0/less/modals.less new file mode 100644 index 0000000000000000000000000000000000000000..7bc6c314fe99ec5bb42b5709faa404cad30f22f8 --- /dev/null +++ b/bootstrap-3.0.0/less/modals.less @@ -0,0 +1,141 @@ +// +// Modals +// -------------------------------------------------- + +// .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 { + overflow: hidden; + + + // Account for hiding of scrollbar + body&, + .navbar-fixed-top, + .navbar-fixed-bottom { + margin-right: 15px + } +} + +// 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: @zindex-modal-background; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + .translate(0, -25%); + .transition-transform(~"0.3s ease-out"); + } + &.in .modal-dialog { .translate(0, 0)} +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + margin-left: auto; + margin-right: auto; + width: auto; + padding: 10px; + z-index: (@zindex-modal-background + 10); +} + +// 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; + .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: 0; + right: 0; + bottom: 0; + left: 0; + z-index: (@zindex-modal-background - 10); + background-color: @modal-backdrop-bg; + // Fade for backdrop + &.fade { .opacity(0); } + &.in { .opacity(.5); } +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + 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; +} + +// Title text within header +.modal-title { + margin: 0; + line-height: @modal-title-line-height; +} + +// 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 { + 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; + .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 screen and (min-width: @screen-tablet) { + + .modal-dialog { + left: 50%; + right: auto; + width: 600px; + padding-top: 30px; + padding-bottom: 30px; + } + .modal-content { + .box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + +}