1// .modal-open - body class for killing the scroll 2// .modal - container to scroll within 3// .modal-dialog - positioning shell for the actual modal 4// .modal-content - actual modal w/ bg and corners and stuff 5 6 7.modal-open { 8 // Kill the scroll on the body 9 overflow: hidden; 10 11 .modal { 12 overflow-x: hidden; 13 overflow-y: auto; 14 } 15} 16 17// Container that the modal scrolls within 18.modal { 19 position: fixed; 20 top: 0; 21 left: 0; 22 z-index: $zindex-modal; 23 display: none; 24 width: 100%; 25 height: 100%; 26 overflow: hidden; 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 // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a 31 // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 32 // See also https://github.com/twbs/bootstrap/issues/17695 33} 34 35// Shell div to position the modal with bottom padding 36.modal-dialog { 37 position: relative; 38 width: auto; 39 margin: $modal-dialog-margin; 40 // allow clicks to pass through for custom click handling to close modal 41 pointer-events: none; 42 43 // When fading in the modal, animate it to slide down 44 .modal.fade & { 45 @include transition($modal-transition); 46 transform: $modal-fade-transform; 47 } 48 .modal.show & { 49 transform: $modal-show-transform; 50 } 51 52 // When trying to close, animate focus to scale 53 .modal.modal-static & { 54 transform: $modal-scale-transform; 55 } 56} 57 58.modal-dialog-scrollable { 59 display: flex; // IE10/11 60 max-height: subtract(100%, $modal-dialog-margin * 2); 61 62 .modal-content { 63 max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11 64 overflow: hidden; 65 } 66 67 .modal-header, 68 .modal-footer { 69 flex-shrink: 0; 70 } 71 72 .modal-body { 73 overflow-y: auto; 74 } 75} 76 77.modal-dialog-centered { 78 display: flex; 79 align-items: center; 80 min-height: subtract(100%, $modal-dialog-margin * 2); 81 82 // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11) 83 &::before { 84 display: block; // IE10 85 height: subtract(100vh, $modal-dialog-margin * 2); 86 height: min-content; // Reset height to 0 except on IE 87 content: ""; 88 } 89 90 // Ensure `.modal-body` shows scrollbar (IE10/11) 91 &.modal-dialog-scrollable { 92 flex-direction: column; 93 justify-content: center; 94 height: 100%; 95 96 .modal-content { 97 max-height: none; 98 } 99 100 &::before { 101 content: none; 102 } 103 } 104} 105 106// Actual modal 107.modal-content { 108 position: relative; 109 display: flex; 110 flex-direction: column; 111 width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` 112 // counteract the pointer-events: none; in the .modal-dialog 113 color: $modal-content-color; 114 pointer-events: auto; 115 background-color: $modal-content-bg; 116 background-clip: padding-box; 117 border: $modal-content-border-width solid $modal-content-border-color; 118 @include border-radius($modal-content-border-radius); 119 @include box-shadow($modal-content-box-shadow-xs); 120 // Remove focus outline from opened modal 121 outline: 0; 122} 123 124// Modal background 125.modal-backdrop { 126 position: fixed; 127 top: 0; 128 left: 0; 129 z-index: $zindex-modal-backdrop; 130 width: 100vw; 131 height: 100vh; 132 background-color: $modal-backdrop-bg; 133 134 // Fade for backdrop 135 &.fade { opacity: 0; } 136 &.show { opacity: $modal-backdrop-opacity; } 137} 138 139// Modal header 140// Top section of the modal w/ title and dismiss 141.modal-header { 142 display: flex; 143 align-items: flex-start; // so the close btn always stays on the upper right corner 144 justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends 145 padding: $modal-header-padding; 146 border-bottom: $modal-header-border-width solid $modal-header-border-color; 147 @include border-top-radius($modal-content-inner-border-radius); 148 149 .close { 150 padding: $modal-header-padding; 151 // auto on the left force icon to the right even when there is no .modal-title 152 margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; 153 } 154} 155 156// Title text within header 157.modal-title { 158 margin-bottom: 0; 159 line-height: $modal-title-line-height; 160} 161 162// Modal body 163// Where all modal content resides (sibling of .modal-header and .modal-footer) 164.modal-body { 165 position: relative; 166 // Enable `flex-grow: 1` so that the body take up as much space as possible 167 // when there should be a fixed height on `.modal-dialog`. 168 flex: 1 1 auto; 169 padding: $modal-inner-padding; 170} 171 172// Footer (for actions) 173.modal-footer { 174 display: flex; 175 flex-wrap: wrap; 176 align-items: center; // vertically center 177 justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items 178 padding: $modal-inner-padding - $modal-footer-margin-between / 2; 179 border-top: $modal-footer-border-width solid $modal-footer-border-color; 180 @include border-bottom-radius($modal-content-inner-border-radius); 181 182 // Place margin between footer elements 183 // This solution is far from ideal because of the universal selector usage, 184 // but is needed to fix https://github.com/twbs/bootstrap/issues/24800 185 // stylelint-disable-next-line selector-max-universal 186 > * { 187 margin: $modal-footer-margin-between / 2; 188 } 189} 190 191// Measure scrollbar width for padding body during modal show/hide 192.modal-scrollbar-measure { 193 position: absolute; 194 top: -9999px; 195 width: 50px; 196 height: 50px; 197 overflow: scroll; 198} 199 200// Scale up the modal 201@include media-breakpoint-up(sm) { 202 // Automatically set modal's width for larger viewports 203 .modal-dialog { 204 max-width: $modal-md; 205 margin: $modal-dialog-margin-y-sm-up auto; 206 } 207 208 .modal-dialog-scrollable { 209 max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); 210 211 .modal-content { 212 max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2); 213 } 214 } 215 216 .modal-dialog-centered { 217 min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); 218 219 &::before { 220 height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2); 221 height: min-content; 222 } 223 } 224 225 .modal-content { 226 @include box-shadow($modal-content-box-shadow-sm-up); 227 } 228 229 .modal-sm { max-width: $modal-sm; } 230} 231 232@include media-breakpoint-up(lg) { 233 .modal-lg, 234 .modal-xl { 235 max-width: $modal-lg; 236 } 237} 238 239@include media-breakpoint-up(xl) { 240 .modal-xl { max-width: $modal-xl; } 241} 242