[Summary view] [Print] [Text view]

   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    align-items: center;
  65    min-height: subtract(100%, $modal-dialog-margin * 2);
  66  }
  67  
  68  // Actual modal
  69  .modal-content {
  70    position: relative;
  71    display: flex;
  72    flex-direction: column;
  73    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  74    // counteract the pointer-events: none; in the .modal-dialog
  75    color: $modal-content-color;
  76    pointer-events: auto;
  77    background-color: $modal-content-bg;
  78    background-clip: padding-box;
  79    border: $modal-content-border-width solid $modal-content-border-color;
  80    @include border-radius($modal-content-border-radius);
  81    @include box-shadow($modal-content-box-shadow-xs);
  82    // Remove focus outline from opened modal
  83    outline: 0;
  84  }
  85  
  86  // Modal background
  87  .modal-backdrop {
  88    @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
  89  }
  90  
  91  // Modal header
  92  // Top section of the modal w/ title and dismiss
  93  .modal-header {
  94    display: flex;
  95    flex-shrink: 0;
  96    align-items: center;
  97    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  98    padding: $modal-header-padding;
  99    border-bottom: $modal-header-border-width solid $modal-header-border-color;
 100    @include border-top-radius($modal-content-inner-border-radius);
 101  
 102    .btn-close {
 103      padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
 104      margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
 105    }
 106  }
 107  
 108  // Title text within header
 109  .modal-title {
 110    margin-bottom: 0;
 111    line-height: $modal-title-line-height;
 112  }
 113  
 114  // Modal body
 115  // Where all modal content resides (sibling of .modal-header and .modal-footer)
 116  .modal-body {
 117    position: relative;
 118    // Enable `flex-grow: 1` so that the body take up as much space as possible
 119    // when there should be a fixed height on `.modal-dialog`.
 120    flex: 1 1 auto;
 121    padding: $modal-inner-padding;
 122  }
 123  
 124  // Footer (for actions)
 125  .modal-footer {
 126    display: flex;
 127    flex-wrap: wrap;
 128    flex-shrink: 0;
 129    align-items: center; // vertically center
 130    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
 131    padding: $modal-inner-padding - $modal-footer-margin-between * .5;
 132    border-top: $modal-footer-border-width solid $modal-footer-border-color;
 133    @include border-bottom-radius($modal-content-inner-border-radius);
 134  
 135    // Place margin between footer elements
 136    // This solution is far from ideal because of the universal selector usage,
 137    // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
 138    > * {
 139      margin: $modal-footer-margin-between * .5;
 140    }
 141  }
 142  
 143  // Scale up the modal
 144  @include media-breakpoint-up(sm) {
 145    // Automatically set modal's width for larger viewports
 146    .modal-dialog {
 147      max-width: $modal-md;
 148      margin: $modal-dialog-margin-y-sm-up auto;
 149    }
 150  
 151    .modal-dialog-scrollable {
 152      height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
 153    }
 154  
 155    .modal-dialog-centered {
 156      min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
 157    }
 158  
 159    .modal-content {
 160      @include box-shadow($modal-content-box-shadow-sm-up);
 161    }
 162  
 163    .modal-sm { max-width: $modal-sm; }
 164  }
 165  
 166  @include media-breakpoint-up(lg) {
 167    .modal-lg,
 168    .modal-xl {
 169      max-width: $modal-lg;
 170    }
 171  }
 172  
 173  @include media-breakpoint-up(xl) {
 174    .modal-xl { max-width: $modal-xl; }
 175  }
 176  
 177  // scss-docs-start modal-fullscreen-loop
 178  @each $breakpoint in map-keys($grid-breakpoints) {
 179    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 180    $postfix: if($infix != "", $infix + "-down", "");
 181  
 182    @include media-breakpoint-down($breakpoint) {
 183      .modal-fullscreen#{$postfix} {
 184        width: 100vw;
 185        max-width: none;
 186        height: 100%;
 187        margin: 0;
 188  
 189        .modal-content {
 190          height: 100%;
 191          border: 0;
 192          @include border-radius(0);
 193        }
 194  
 195        .modal-header {
 196          @include border-radius(0);
 197        }
 198  
 199        .modal-body {
 200          overflow-y: auto;
 201        }
 202  
 203        .modal-footer {
 204          @include border-radius(0);
 205        }
 206      }
 207    }
 208  }
 209  // scss-docs-end modal-fullscreen-loop