tools/side_chain_tool/web/node_modules/bootstrap/scss/_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   right: 0;
  22   bottom: 0;
  23   left: 0;
  24   z-index: $zindex-modal;
  25   display: none;
  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: 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   // 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   right: 0;
  88   bottom: 0;
  89   left: 0;
  90   z-index: $zindex-modal-backdrop;
  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) (-$modal-header-padding) (-$modal-header-padding) 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
 139   // Easily place margin between footer elements
 140   > :not(:first-child) { margin-left: .25rem; }
 141   > :not(:last-child) { margin-right: .25rem; }
 142 }
 143
 144 // Measure scrollbar width for padding body during modal show/hide
 145 .modal-scrollbar-measure {
 146   position: absolute;
 147   top: -9999px;
 148   width: 50px;
 149   height: 50px;
 150   overflow: scroll;
 151 }
 152
 153 // Scale up the modal
 154 @include media-breakpoint-up(sm) {
 155   // Automatically set modal's width for larger viewports
 156   .modal-dialog {
 157     max-width: $modal-md;
 158     margin: $modal-dialog-margin-y-sm-up auto;
 159   }
 160
 161   .modal-dialog-centered {
 162     min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
 163
 164     &::before {
 165       height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2));
 166     }
 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
 178 @include media-breakpoint-up(lg) {
 179   .modal-lg { max-width: $modal-lg; }
 180 }