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