0x1998 - MANAGER
Edit File: modals.less
// MODALS // ------ // Recalculate z-index where appropriate .modal-open { .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } .popover { z-index: @zindexPopover + @zindexModal; } .tooltip { z-index: @zindexTooltip + @zindexModal; } } // Background .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: @zindexModalBackdrop; background-color: @black; // Fade for backdrop &.fade { opacity: 0; } } .modal-backdrop, .modal-backdrop.fade.in { .opacity(80); } // Base modal div.modal { position: fixed; top: 50%; left: 50%; z-index: @zindexModal; overflow: auto; width: 80%; margin: -250px 0 0 -40%; background-color: @white; border: 1px solid #999; border: 1px solid rgba(0,0,0,.3); *border: 1px solid #999; /* IE6-7 */ .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); .background-clip(padding-box); &.fade { .transition(e('opacity .3s linear, top .3s ease-out')); top: -25%; } &.fade.in { top: 50%; } } .modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; // Close icon .close { float: right; margin-top: 2px; } } // Body (where all modal content resides) .modal-body { overflow-y: auto; max-height: 400px; padding: 15px; } // Remove bottom margin if need be .modal-form { margin-bottom: 0; } // Footer (for actions) .modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: right; // right align buttons background-color: #f5f5f5; border-top: 1px solid #ddd; .border-radius(0 0 6px 6px); .box-shadow(inset 0 1px 0 @white); .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; } } /* Prevent scrolling on the parent window of a modal */ body.modal-open { overflow: hidden; -ms-overflow-style: none; } /* Buttons bar in modal iframe */ .modal-buttons { padding: 15px 0px; } .modal-buttons button { font-size: 1.2em; line-height: 1.6em; }