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