codekingpro/portable-devtools

1// .modal-open      - body class for killing the scroll2// .modal           - container to scroll within3// .modal-dialog    - positioning shell for the actual modal4// .modal-content   - actual modal w/ bg and corners and stuff5 6 7.modal-open {8  // Kill the scroll on the body9  overflow: hidden;10 11  .modal {12    overflow-x: hidden;13    overflow-y: auto;14  }15}16 17// Container that the modal scrolls within18.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, see28  // https://github.com/twbs/bootstrap/pull/10951.29  outline: 0;30  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a31  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=15834232  // See also https://github.com/twbs/bootstrap/issues/1769533}34 35// Shell div to position the modal with bottom padding36.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 modal41  pointer-events: none;42 43  // When fading in the modal, animate it to slide down44  .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 scale53  .modal.modal-static & {54    transform: $modal-scale-transform;55  }56}57 58.modal-dialog-scrollable {59  display: flex; // IE10/1160  max-height: subtract(100%, $modal-dialog-margin * 2);61 62  .modal-content {63    max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/1164    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; // IE1085    height: subtract(100vh, $modal-dialog-margin * 2);86    height: min-content; // Reset height to 0 except on IE87    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 modal107.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-dialog113  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 modal121  outline: 0;122}123 124// Modal background125.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 backdrop135  &.fade { opacity: 0; }136  &.show { opacity: $modal-backdrop-opacity; }137}138 139// Modal header140// Top section of the modal w/ title and dismiss141.modal-header {142  display: flex;143  align-items: flex-start; // so the close btn always stays on the upper right corner144  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends145  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-title152    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;153  }154}155 156// Title text within header157.modal-title {158  margin-bottom: 0;159  line-height: $modal-title-line-height;160}161 162// Modal body163// 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 possible167  // 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 center177  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items178  padding: $modal-inner-padding - $modal-footer-margin-between * .5;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 elements183  // This solution is far from ideal because of the universal selector usage,184  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800185  > * {186    margin: $modal-footer-margin-between * .5;187  }188}189 190// Measure scrollbar width for padding body during modal show/hide191.modal-scrollbar-measure {192  position: absolute;193  top: -9999px;194  width: 50px;195  height: 50px;196  overflow: scroll;197}198 199// Scale up the modal200@include media-breakpoint-up(sm) {201  // Automatically set modal's width for larger viewports202  .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}241