git.roojs.org Git - roojs1/blob - scss/bootstrap/_modal.scss

   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   > * {
 186     margin: $modal-footer-margin-between / 2;
 187   }
 188 }
 189
 190 // Measure scrollbar width for padding body during modal show/hide
 191 .modal-scrollbar-measure {
 192   position: absolute;
 193   top: -9999px;
 194   width: 50px;
 195   height: 50px;
 196   overflow: scroll;
 197 }
 198
 199 // Scale up the modal
 200 @include media-breakpoint-up(sm) {
 201   // Automatically set modal's width for larger viewports
 202   .modal-dialog {
 203     max-width: $modal-md;
 204     margin: $modal-dialog-margin-y-sm-up auto;
 205   }
 206
 207   .modal-dialog-scrollable {
 208     max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
 209
 210     .modal-content {
 211       max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
 212     }
 213   }
 214
 215   .modal-dialog-centered {
 216     min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
 217
 218     &::before {
 219       height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
 220       height: min-content;
 221     }
 222   }
 223
 224   .modal-content {
 225     @include box-shadow($modal-content-box-shadow-sm-up);
 226   }
 227
 228   .modal-sm { max-width: $modal-sm; }
 229 }
 230
 231 @include media-breakpoint-up(lg) {
 232   .modal-lg,
 233   .modal-xl {
 234     max-width: $modal-lg;
 235   }
 236 }
 237
 238 @include media-breakpoint-up(xl) {
 239   .modal-xl { max-width: $modal-xl; }
 240 }