scss/bootstrap/_modal.scss

0001 // .modal-open      - body class for killing the scroll
0002 // .modal           - container to scroll within
0003 // .modal-dialog    - positioning shell for the actual modal
0004 // .modal-content   - actual modal w/ bg and corners and stuff
0005
0006
0007 .modal-open {
0008   // Kill the scroll on the body
0009   overflow: hidden;
0010
0011   .modal {
0012     overflow-x: hidden;
0013     overflow-y: auto;
0014   }
0015 }
0016
0017 // Container that the modal scrolls within
0018 .modal {
0019   position: fixed;
0020   top: 0;
0021   left: 0;
0022   z-index: $zindex-modal;
0023   display: none;
0024   width: 100%;
0025   height: 100%;
0026   overflow: hidden;
0027   // Prevent Chrome on Windows from adding a focus outline. For details, see
0028   // https://github.com/twbs/bootstrap/pull/10951.
0029   outline: 0;
0030   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
0031   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
0032   // See also https://github.com/twbs/bootstrap/issues/17695
0033 }
0034
0035 // Shell div to position the modal with bottom padding
0036 .modal-dialog {
0037   position: relative;
0038   width: auto;
0039   margin: $modal-dialog-margin;
0040   // allow clicks to pass through for custom click handling to close modal
0041   pointer-events: none;
0042
0043   // When fading in the modal, animate it to slide down
0044   .modal.fade & {
0045     @include transition($modal-transition);
0046     transform: $modal-fade-transform;
0047   }
0048   .modal.show & {
0049     transform: $modal-show-transform;
0050   }
0051
0052   // When trying to close, animate focus to scale
0053   .modal.modal-static & {
0054     transform: $modal-scale-transform;
0055   }
0056 }
0057
0058 .modal-dialog-scrollable {
0059   height: subtract(100%, $modal-dialog-margin * 2);
0060
0061   .modal-content {
0062     max-height: 100%;
0063     overflow: hidden;
0064   }
0065
0066   .modal-body {
0067     overflow-y: auto;
0068   }
0069 }
0070
0071 .modal-dialog-centered {
0072   display: flex;
0073   align-items: center;
0074   min-height: subtract(100%, $modal-dialog-margin * 2);
0075 }
0076
0077 // Actual modal
0078 .modal-content {
0079   position: relative;
0080   display: flex;
0081   flex-direction: column;
0082   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
0083   // counteract the pointer-events: none; in the .modal-dialog
0084   color: $modal-content-color;
0085   pointer-events: auto;
0086   background-color: $modal-content-bg;
0087   background-clip: padding-box;
0088   border: $modal-content-border-width solid $modal-content-border-color;
0089   @include border-radius($modal-content-border-radius);
0090   @include box-shadow($modal-content-box-shadow-xs);
0091   // Remove focus outline from opened modal
0092   outline: 0;
0093 }
0094
0095 // Modal background
0096 .modal-backdrop {
0097   position: fixed;
0098   top: 0;
0099   left: 0;
0100   z-index: $zindex-modal-backdrop;
0101   width: 100vw;
0102   height: 100vh;
0103   background-color: $modal-backdrop-bg;
0104
0105   // Fade for backdrop
0106   &.fade { opacity: 0; }
0107   &.show { opacity: $modal-backdrop-opacity; }
0108 }
0109
0110 // Modal header
0111 // Top section of the modal w/ title and dismiss
0112 .modal-header {
0113   display: flex;
0114   flex-shrink: 0;
0115   align-items: center;
0116   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
0117   padding: $modal-header-padding;
0118   border-bottom: $modal-header-border-width solid $modal-header-border-color;
0119   @include border-top-radius($modal-content-inner-border-radius);
0120
0121   .btn-close {
0122     padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
0123     margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
0124   }
0125 }
0126
0127 // Title text within header
0128 .modal-title {
0129   margin-bottom: 0;
0130   line-height: $modal-title-line-height;
0131 }
0132
0133 // Modal body
0134 // Where all modal content resides (sibling of .modal-header and .modal-footer)
0135 .modal-body {
0136   position: relative;
0137   // Enable `flex-grow: 1` so that the body take up as much space as possible
0138   // when there should be a fixed height on `.modal-dialog`.
0139   flex: 1 1 auto;
0140   padding: $modal-inner-padding;
0141 }
0142
0143 // Footer (for actions)
0144 .modal-footer {
0145   display: flex;
0146   flex-wrap: wrap;
0147   flex-shrink: 0;
0148   align-items: center; // vertically center
0149   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
0150   padding: $modal-inner-padding - $modal-footer-margin-between / 2;
0151   border-top: $modal-footer-border-width solid $modal-footer-border-color;
0152   @include border-bottom-radius($modal-content-inner-border-radius);
0153
0154   // Place margin between footer elements
0155   // This solution is far from ideal because of the universal selector usage,
0156   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
0157   > * {
0158     margin: $modal-footer-margin-between / 2;
0159   }
0160 }
0161
0162 // Measure scrollbar width for padding body during modal show/hide
0163 .modal-scrollbar-measure {
0164   position: absolute;
0165   top: -9999px;
0166   width: 50px;
0167   height: 50px;
0168   overflow: scroll;
0169 }
0170
0171 // Scale up the modal
0172 @include media-breakpoint-up(sm) {
0173   // Automatically set modal's width for larger viewports
0174   .modal-dialog {
0175     max-width: $modal-md;
0176     margin: $modal-dialog-margin-y-sm-up auto;
0177   }
0178
0179   .modal-dialog-scrollable {
0180     height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
0181   }
0182
0183   .modal-dialog-centered {
0184     min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
0185   }
0186
0187   .modal-content {
0188     @include box-shadow($modal-content-box-shadow-sm-up);
0189   }
0190
0191   .modal-sm { max-width: $modal-sm; }
0192 }
0193
0194 @include media-breakpoint-up(lg) {
0195   .modal-lg,
0196   .modal-xl {
0197     max-width: $modal-lg;
0198   }
0199 }
0200
0201 @include media-breakpoint-up(xl) {
0202   .modal-xl { max-width: $modal-xl; }
0203 }
0204
0205 @each $breakpoint in map-keys($grid-breakpoints) {
0206   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
0207   $postfix: if($infix != "", $infix + "-down", "");
0208
0209   @include media-breakpoint-down($breakpoint) {
0210     .modal-fullscreen#{$postfix} {
0211       width: 100vw;
0212       max-width: none;
0213       height: 100%;
0214       margin: 0;
0215
0216       .modal-content {
0217         height: 100%;
0218         border: 0;
0219         @include border-radius(0);
0220       }
0221
0222       .modal-header {
0223         @include border-radius(0);
0224       }
0225
0226       .modal-body {
0227         overflow-y: auto;
0228       }
0229
0230       .modal-footer {
0231         @include border-radius(0);
0232       }
0233     }
0234   }
0235 }