portal-FE-common/src/styles/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 // Kill the scroll on the body
   8 .modal-open {
   9   overflow: hidden;
  10 }
  11
  12 // Container that the modal scrolls within
  13 .modal {
  14   position: fixed;
  15   top: 0;
  16   right: 0;
  17   bottom: 0;
  18   left: 0;
  19   z-index: $zindex-modal;
  20   display: none;
  21   overflow: hidden;
  22   // Prevent Chrome on Windows from adding a focus outline. For details, see
  23   // https://github.com/twbs/bootstrap/pull/10951.
  24   outline: 0;
  25   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  26   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  27   // See also https://github.com/twbs/bootstrap/issues/17695
  28
  29   .modal-open & {
  30     overflow-x: hidden;
  31     overflow-y: auto;
  32   }
  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: translate(0, -25%);
  47   }
  48   .modal.show & {
  49     transform: translate(0, 0);
  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
  59 // Actual modal
  60 .modal-content {
  61   position: relative;
  62   display: flex;
  63   flex-direction: column;
  64   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  65   // counteract the pointer-events: none; in the .modal-dialog
  66   pointer-events: auto;
  67   background-color: $modal-content-bg;
  68   background-clip: padding-box;
  69   border: $modal-content-border-width solid $modal-content-border-color;
  70   @include border-radius($border-radius-lg);
  71   @include box-shadow($modal-content-box-shadow-xs);
  72   // Remove focus outline from opened modal
  73   outline: 0;
  74 }
  75
  76 // Modal background
  77 .modal-backdrop {
  78   position: fixed;
  79   top: 0;
  80   right: 0;
  81   bottom: 0;
  82   left: 0;
  83   z-index: $zindex-modal-backdrop;
  84   background-color: $modal-backdrop-bg;
  85
  86   // Fade for backdrop
  87   &.fade { opacity: 0; }
  88   &.show { opacity: $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   align-items: flex-start; // so the close btn always stays on the upper right corner
  96   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  97   padding: $modal-header-padding;
  98   border-bottom: $modal-header-border-width solid $modal-header-border-color;
  99   @include border-top-radius($border-radius-lg);
 100
 101   .close {
 102     padding: $modal-header-padding;
 103     // auto on the left force icon to the right even when there is no .modal-title
 104     margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) 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 should there 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   align-items: center; // vertically center
 128   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
 129   padding: $modal-inner-padding;
 130   border-top: $modal-footer-border-width solid $modal-footer-border-color;
 131
 132   // Easily place margin between footer elements
 133   > :not(:first-child) { margin-left: .25rem; }
 134   > :not(:last-child) { margin-right: .25rem; }
 135 }
 136
 137 // Measure scrollbar width for padding body during modal show/hide
 138 .modal-scrollbar-measure {
 139   position: absolute;
 140   top: -9999px;
 141   width: 50px;
 142   height: 50px;
 143   overflow: scroll;
 144 }
 145
 146 // Scale up the modal
 147 @include media-breakpoint-up(sm) {
 148   // Automatically set modal's width for larger viewports
 149   .modal-dialog {
 150     max-width: $modal-md;
 151     margin: $modal-dialog-margin-y-sm-up auto;
 152   }
 153
 154   .modal-dialog-centered {
 155     min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
 156   }
 157
 158   .modal-content {
 159     @include box-shadow($modal-content-box-shadow-sm-up);
 160   }
 161
 162   .modal-sm { max-width: $modal-sm; }
 163
 164 }
 165
 166 @include media-breakpoint-up(lg) {
 167   .modal-lg { max-width: $modal-lg; }
 168 }