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: fixed; 66 top: 0; 67 right: 0; 68 bottom: 0; 69 left: 0; 70 z-index: @zindex-modal-background; 71 background-color: @modal-backdrop-bg; 72 // Fade for backdrop 73 &.fade { .opacity(0); } 74 &.in { .opacity(@modal-backdrop-opacity); } 75} 76 77// Modal header 78// Top section of the modal w/ title and dismiss 79.modal-header { 80 padding: @modal-title-padding; 81 border-bottom: 1px solid @modal-header-border-color; 82 min-height: (@modal-title-padding + @modal-title-line-height); 83} 84// Close icon 85.modal-header .close { 86 margin-top: -2px; 87} 88 89// Title text within header 90.modal-title { 91 margin: 0; 92 line-height: @modal-title-line-height; 93} 94 95// Modal body 96// Where all modal content resides (sibling of .modal-header and .modal-footer) 97.modal-body { 98 position: relative; 99 padding: @modal-inner-padding; 100} 101 102// Footer (for actions) 103.modal-footer { 104 padding: @modal-inner-padding; 105 text-align: right; // right align buttons 106 border-top: 1px solid @modal-footer-border-color; 107 &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons 108 109 // Properly space out buttons 110 .btn + .btn { 111 margin-left: 5px; 112 margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 113 } 114 // but override that for button groups 115 .btn-group .btn + .btn { 116 margin-left: -1px; 117 } 118 // and override it for block buttons as well 119 .btn-block + .btn-block { 120 margin-left: 0; 121 } 122} 123 124// Measure scrollbar width for padding body during modal show/hide 125.modal-scrollbar-measure { 126 position: absolute; 127 top: -9999px; 128 width: 50px; 129 height: 50px; 130 overflow: scroll; 131} 132 133// Scale up the modal 134@media (min-width: @screen-sm-min) { 135 // Automatically set modal's width for larger viewports 136 .modal-dialog { 137 width: @modal-md; 138 margin: 30px auto; 139 } 140 .modal-content { 141 .box-shadow(0 5px 15px rgba(0,0,0,.5)); 142 } 143 144 // Modal sizes 145 .modal-sm { width: @modal-sm; } 146} 147 148@media (min-width: @screen-md-min) { 149 .modal-lg { width: @modal-lg; } 150} 151