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 53.modal-dialog-scrollable { 54 display: flex; // IE10/11 55 max-height: calc(100% - #{$modal-dialog-margin * 2}); 56 57 .modal-content { 58 max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11 59 overflow: hidden; 60 } 61 62 .modal-header, 63 .modal-footer { 64 flex-shrink: 0; 65 } 66 67 .modal-body { 68 overflow-y: auto; 69 } 70} 71 72.modal-dialog-centered { 73 display: flex; 74 align-items: center; 75 min-height: calc(100% - #{$modal-dialog-margin * 2}); 76 77 // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11) 78 &::before { 79 display: block; // IE10 80 height: calc(100vh - #{$modal-dialog-margin * 2}); 81 content: ""; 82 } 83 84 // Ensure `.modal-body` shows scrollbar (IE10/11) 85 &.modal-dialog-scrollable { 86 flex-direction: column; 87 justify-content: center; 88 height: 100%; 89 90 .modal-content { 91 max-height: none; 92 } 93 94 &::before { 95 content: none; 96 } 97 } 98} 99 100// Actual modal 101.modal-content { 102 position: relative; 103 display: flex; 104 flex-direction: column; 105 width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` 106 // counteract the pointer-events: none; in the .modal-dialog 107 color: $modal-content-color; 108 pointer-events: auto; 109 background-color: $modal-content-bg; 110 background-clip: padding-box; 111 border: $modal-content-border-width solid $modal-content-border-color; 112 @include border-radius($modal-content-border-radius); 113 @include box-shadow($modal-content-box-shadow-xs); 114 // Remove focus outline from opened modal 115 outline: 0; 116} 117 118// Modal background 119.modal-backdrop { 120 position: fixed; 121 top: 0; 122 left: 0; 123 z-index: $zindex-modal-backdrop; 124 width: 100vw; 125 height: 100vh; 126 background-color: $modal-backdrop-bg; 127 128 // Fade for backdrop 129 &.fade { opacity: 0; } 130 &.show { opacity: $modal-backdrop-opacity; } 131} 132 133// Modal header 134// Top section of the modal w/ title and dismiss 135.modal-header { 136 display: flex; 137 align-items: flex-start; // so the close btn always stays on the upper right corner 138 justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends 139 padding: $modal-header-padding; 140 border-bottom: $modal-header-border-width solid $modal-header-border-color; 141 @include border-top-radius($modal-content-border-radius); 142 143 .close { 144 padding: $modal-header-padding; 145 // auto on the left force icon to the right even when there is no .modal-title 146 margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; 147 } 148} 149 150// Title text within header 151.modal-title { 152 margin-bottom: 0; 153 line-height: $modal-title-line-height; 154} 155 156// Modal body 157// Where all modal content resides (sibling of .modal-header and .modal-footer) 158.modal-body { 159 position: relative; 160 // Enable `flex-grow: 1` so that the body take up as much space as possible 161 // when should there be a fixed height on `.modal-dialog`. 162 flex: 1 1 auto; 163 padding: $modal-inner-padding; 164} 165 166// Footer (for actions) 167.modal-footer { 168 display: flex; 169 align-items: center; // vertically center 170 justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items 171 padding: $modal-inner-padding; 172 border-top: $modal-footer-border-width solid $modal-footer-border-color; 173 @include border-bottom-radius($modal-content-border-radius); 174 175 // Easily place margin between footer elements 176 > :not(:first-child) { margin-left: .25rem; } 177 > :not(:last-child) { margin-right: .25rem; } 178} 179 180// Measure scrollbar width for padding body during modal show/hide 181.modal-scrollbar-measure { 182 position: absolute; 183 top: -9999px; 184 width: 50px; 185 height: 50px; 186 overflow: scroll; 187} 188 189// Scale up the modal 190@include media-breakpoint-up(sm) { 191 // Automatically set modal's width for larger viewports 192 .modal-dialog { 193 max-width: $modal-md; 194 margin: $modal-dialog-margin-y-sm-up auto; 195 } 196 197 .modal-dialog-scrollable { 198 max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); 199 200 .modal-content { 201 max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); 202 } 203 } 204 205 .modal-dialog-centered { 206 min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); 207 208 &::before { 209 height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); 210 } 211 } 212 213 .modal-content { 214 @include box-shadow($modal-content-box-shadow-sm-up); 215 } 216 217 .modal-sm { max-width: $modal-sm; } 218} 219 220@include media-breakpoint-up(lg) { 221 .modal-lg, 222 .modal-xl { 223 max-width: $modal-lg; 224 } 225} 226 227@include media-breakpoint-up(xl) { 228 .modal-xl { max-width: $modal-xl; } 229} 230