1// MODALS 2// ------ 3 4// Recalculate z-index where appropriate 5.modal-open { 6 .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } 7 .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } 8 .popover { z-index: @zindexPopover + @zindexModal; } 9 .tooltip { z-index: @zindexTooltip + @zindexModal; } 10} 11 12// Background 13.modal-backdrop { 14 position: fixed; 15 top: 0; 16 right: 0; 17 bottom: 0; 18 left: 0; 19 z-index: @zindexModalBackdrop; 20 background-color: @black; 21 // Fade for backdrop 22 &.fade { opacity: 0; } 23} 24 25.modal-backdrop, 26.modal-backdrop.fade.in { 27 .opacity(80); 28} 29 30// Base modal 31.modal { 32 position: fixed; 33 top: 50%; 34 left: 50%; 35 z-index: @zindexModal; 36 overflow: auto; 37 width: 560px; 38 margin: -250px 0 0 -280px; 39 background-color: @white; 40 border: 1px solid #999; 41 border: 1px solid rgba(0,0,0,.3); 42 *border: 1px solid #999; /* IE6-7 */ 43 .border-radius(6px); 44 .box-shadow(0 3px 7px rgba(0,0,0,0.3)); 45 .background-clip(padding-box); 46 &.fade { 47 .transition(e('opacity .3s linear, top .3s ease-out')); 48 top: -25%; 49 } 50 &.fade.in { top: 50%; } 51} 52.modal-header { 53 padding: 9px 15px; 54 border-bottom: 1px solid #eee; 55 // Close icon 56 .close { margin-top: 2px; } 57} 58 59// Body (where all modal content resides) 60.modal-body { 61 overflow-y: auto; 62 max-height: 400px; 63 padding: 15px; 64} 65// Remove bottom margin if need be 66.modal-form { 67 margin-bottom: 0; 68} 69 70// Footer (for actions) 71.modal-footer { 72 padding: 14px 15px 15px; 73 margin-bottom: 0; 74 text-align: right; // right align buttons 75 background-color: #f5f5f5; 76 border-top: 1px solid #ddd; 77 .border-radius(0 0 6px 6px); 78 .box-shadow(inset 0 1px 0 @white); 79 .clearfix(); // clear it in case folks use .pull-* classes on buttons 80 81 // Properly space out buttons 82 .btn + .btn { 83 margin-left: 5px; 84 margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 85 } 86 // but override that for button groups 87 .btn-group .btn + .btn { 88 margin-left: -1px; 89 } 90} 91