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