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: auto; 19 overflow-y: scroll; 20 position: fixed; 21 top: 0; 22 right: 0; 23 bottom: 0; 24 left: 0; 25 z-index: @zindex-modal; 26 -webkit-overflow-scrolling: touch; 27 28 // Prevent Chrome on Windows from adding a focus outline. For details, see 29 // https://github.com/twbs/bootstrap/pull/10951. 30 outline: 0; 31 32 // When fading in the modal, animate it to slide down 33 &.fade .modal-dialog { 34 .translate(0, -25%); 35 .transition-transform(~"0.3s ease-out"); 36 } 37 &.in .modal-dialog { .translate(0, 0)} 38} 39 40// Shell div to position the modal with bottom padding 41.modal-dialog { 42 position: relative; 43 width: auto; 44 margin: 10px; 45} 46 47// Actual modal 48.modal-content { 49 position: relative; 50 background-color: @modal-content-bg; 51 border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) 52 border: 1px solid @modal-content-border-color; 53 border-radius: @border-radius-large; 54 .box-shadow(0 3px 9px rgba(0,0,0,.5)); 55 background-clip: padding-box; 56 // Remove focus outline from opened modal 57 outline: none; 58} 59 60// Modal background 61.modal-backdrop { 62 position: fixed; 63 top: 0; 64 right: 0; 65 bottom: 0; 66 left: 0; 67 z-index: @zindex-modal-background; 68 background-color: @modal-backdrop-bg; 69 // Fade for backdrop 70 &.fade { .opacity(0); } 71 &.in { .opacity(@modal-backdrop-opacity); } 72} 73 74// Modal header 75// Top section of the modal w/ title and dismiss 76.modal-header { 77 padding: @modal-title-padding; 78 border-bottom: 1px solid @modal-header-border-color; 79 min-height: (@modal-title-padding + @modal-title-line-height); 80} 81// Close icon 82.modal-header .close { 83 margin-top: -2px; 84} 85 86// Title text within header 87.modal-title { 88 margin: 0; 89 line-height: @modal-title-line-height; 90} 91 92// Modal body 93// Where all modal content resides (sibling of .modal-header and .modal-footer) 94.modal-body { 95 position: relative; 96 padding: @modal-inner-padding; 97} 98 99// Footer (for actions) 100.modal-footer { 101 margin-top: 15px; 102 padding: (@modal-inner-padding - 1) @modal-inner-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// Scale up the modal 123@media (min-width: @screen-sm-min) { 124 // Automatically set modal's width for larger viewports 125 .modal-dialog { 126 width: @modal-md; 127 margin: 30px auto; 128 } 129 .modal-content { 130 .box-shadow(0 5px 15px rgba(0,0,0,.5)); 131 } 132 133 // Modal sizes 134 .modal-sm { width: @modal-sm; } 135} 136 137@media (min-width: @screen-md-min) { 138 .modal-lg { width: @modal-lg; } 139} 140