1// 2// Modals 3// -------------------------------------------------- 4 5// .modal-open - body class for killing the scroll 6// .modal - container to scroll within 7// .modal-dialog - positioning shell for the actual modal 8// .modal-content - actual modal w/ bg and corners and shit 9 10// Kill the scroll on the body 11.modal-open { 12 overflow: hidden; 13} 14 15// Container that the modal scrolls within 16.modal { 17 display: none; 18 overflow: hidden; 19 position: fixed; 20 top: 0; 21 right: 0; 22 bottom: 0; 23 left: 0; 24 z-index: @zindex-modal; 25 -webkit-overflow-scrolling: touch; 26 27 // Prevent Chrome on Windows from adding a focus outline. For details, see 28 // https://github.com/twbs/bootstrap/pull/10951. 29 outline: 0; 30 31 // When fading in the modal, animate it to slide down 32 &.fade .modal-dialog { 33 .translate(0, -25%); 34 .transition-transform(~"0.3s ease-out"); 35 } 36 &.in .modal-dialog { .translate(0, 0) } 37} 38.modal-open .modal { 39 overflow-x: hidden; 40 overflow-y: auto; 41} 42 43// Shell div to position the modal with bottom padding 44.modal-dialog { 45 position: relative; 46 width: auto; 47 margin: 10px; 48} 49 50// Actual modal 51.modal-content { 52 position: relative; 53 background-color: @modal-content-bg; 54 border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) 55 border: 1px solid @modal-content-border-color; 56 border-radius: @border-radius-large; 57 .box-shadow(0 3px 9px rgba(0,0,0,.5)); 58 background-clip: padding-box; 59 // Remove focus outline from opened modal 60 outline: 0; 61} 62 63// Modal background 64.modal-backdrop { 65 position: absolute; 66 top: 0; 67 right: 0; 68 left: 0; 69 background-color: @modal-backdrop-bg; 70 // Fade for backdrop 71 &.fade { .opacity(0); } 72 &.in { .opacity(@modal-backdrop-opacity); } 73} 74 75// Modal header 76// Top section of the modal w/ title and dismiss 77.modal-header { 78 padding: @modal-title-padding; 79 border-bottom: 1px solid @modal-header-border-color; 80 min-height: (@modal-title-padding + @modal-title-line-height); 81} 82// Close icon 83.modal-header .close { 84 margin-top: -2px; 85} 86 87// Title text within header 88.modal-title { 89 margin: 0; 90 line-height: @modal-title-line-height; 91} 92 93// Modal body 94// Where all modal content resides (sibling of .modal-header and .modal-footer) 95.modal-body { 96 position: relative; 97 padding: @modal-inner-padding; 98} 99 100// Footer (for actions) 101.modal-footer { 102 padding: @modal-inner-padding; 103 text-align: right; // right align buttons 104 border-top: 1px solid @modal-footer-border-color; 105 &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons 106 107 // Properly space out buttons 108 .btn + .btn { 109 margin-left: 5px; 110 margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 111 } 112 // but override that for button groups 113 .btn-group .btn + .btn { 114 margin-left: -1px; 115 } 116 // and override it for block buttons as well 117 .btn-block + .btn-block { 118 margin-left: 0; 119 } 120} 121 122// Measure scrollbar width for padding body during modal show/hide 123.modal-scrollbar-measure { 124 position: absolute; 125 top: -9999px; 126 width: 50px; 127 height: 50px; 128 overflow: scroll; 129} 130 131// Scale up the modal 132@media (min-width: @screen-sm-min) { 133 // Automatically set modal's width for larger viewports 134 .modal-dialog { 135 width: @modal-md; 136 margin: 30px auto; 137 } 138 .modal-content { 139 .box-shadow(0 5px 15px rgba(0,0,0,.5)); 140 } 141 142 // Modal sizes 143 .modal-sm { width: @modal-sm; } 144} 145 146@media (min-width: @screen-md-min) { 147 .modal-lg { width: @modal-lg; } 148} 149