resources/tools/dash/app/pal/static/sass/bootstrap/_modal.scss

   1 // stylelint-disable function-disallowed-list
   2
   3 // .modal-open      - body class for killing the scroll
   4 // .modal           - container to scroll within
   5 // .modal-dialog    - positioning shell for the actual modal
   6 // .modal-content   - actual modal w/ bg and corners and stuff
   7
   8
   9 // Container that the modal scrolls within
  10 .modal {
  11   // scss-docs-start modal-css-vars
  12   --#{$prefix}modal-zindex: #{$zindex-modal};
  13   --#{$prefix}modal-width: #{$modal-md};
  14   --#{$prefix}modal-padding: #{$modal-inner-padding};
  15   --#{$prefix}modal-margin: #{$modal-dialog-margin};
  16   --#{$prefix}modal-color: #{$modal-content-color};
  17   --#{$prefix}modal-bg: #{$modal-content-bg};
  18   --#{$prefix}modal-border-color: #{$modal-content-border-color};
  19   --#{$prefix}modal-border-width: #{$modal-content-border-width};
  20   --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  21   --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  22   --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  23   --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  24   --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  25   --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  26   --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  27   --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  28   --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  29   --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  30   --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  31   --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  32   --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  33   // scss-docs-end modal-css-vars
  34
  35   position: fixed;
  36   top: 0;
  37   left: 0;
  38   z-index: var(--#{$prefix}modal-zindex);
  39   display: none;
  40   width: 100%;
  41   height: 100%;
  42   overflow-x: hidden;
  43   overflow-y: auto;
  44   // Prevent Chrome on Windows from adding a focus outline. For details, see
  45   // https://github.com/twbs/bootstrap/pull/10951.
  46   outline: 0;
  47   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  48   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  49   // See also https://github.com/twbs/bootstrap/issues/17695
  50 }
  51
  52 // Shell div to position the modal with bottom padding
  53 .modal-dialog {
  54   position: relative;
  55   width: auto;
  56   margin: var(--#{$prefix}modal-margin);
  57   // allow clicks to pass through for custom click handling to close modal
  58   pointer-events: none;
  59
  60   // When fading in the modal, animate it to slide down
  61   .modal.fade & {
  62     @include transition($modal-transition);
  63     transform: $modal-fade-transform;
  64   }
  65   .modal.show & {
  66     transform: $modal-show-transform;
  67   }
  68
  69   // When trying to close, animate focus to scale
  70   .modal.modal-static & {
  71     transform: $modal-scale-transform;
  72   }
  73 }
  74
  75 .modal-dialog-scrollable {
  76   height: calc(100% - var(--#{$prefix}modal-margin) * 2);
  77
  78   .modal-content {
  79     max-height: 100%;
  80     overflow: hidden;
  81   }
  82
  83   .modal-body {
  84     overflow-y: auto;
  85   }
  86 }
  87
  88 .modal-dialog-centered {
  89   display: flex;
  90   align-items: center;
  91   min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
  92 }
  93
  94 // Actual modal
  95 .modal-content {
  96   position: relative;
  97   display: flex;
  98   flex-direction: column;
  99   width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
 100   // counteract the pointer-events: none; in the .modal-dialog
 101   color: var(--#{$prefix}modal-color);
 102   pointer-events: auto;
 103   background-color: var(--#{$prefix}modal-bg);
 104   background-clip: padding-box;
 105   border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
 106   @include border-radius(var(--#{$prefix}modal-border-radius));
 107   @include box-shadow(var(--#{$prefix}modal-box-shadow));
 108   // Remove focus outline from opened modal
 109   outline: 0;
 110 }
 111
 112 // Modal background
 113 .modal-backdrop {
 114   // scss-docs-start modal-backdrop-css-vars
 115   --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
 116   --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
 117   --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
 118   // scss-docs-end modal-backdrop-css-vars
 119
 120   @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
 121 }
 122
 123 // Modal header
 124 // Top section of the modal w/ title and dismiss
 125 .modal-header {
 126   display: flex;
 127   flex-shrink: 0;
 128   align-items: center;
 129   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
 130   padding: var(--#{$prefix}modal-header-padding);
 131   border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
 132   @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
 133
 134   .btn-close {
 135     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
 136     margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
 137   }
 138 }
 139
 140 // Title text within header
 141 .modal-title {
 142   margin-bottom: 0;
 143   line-height: var(--#{$prefix}modal-title-line-height);
 144 }
 145
 146 // Modal body
 147 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 148 .modal-body {
 149   position: relative;
 150   // Enable `flex-grow: 1` so that the body take up as much space as possible
 151   // when there should be a fixed height on `.modal-dialog`.
 152   flex: 1 1 auto;
 153   padding: var(--#{$prefix}modal-padding);
 154 }
 155
 156 // Footer (for actions)
 157 .modal-footer {
 158   display: flex;
 159   flex-shrink: 0;
 160   flex-wrap: wrap;
 161   align-items: center; // vertically center
 162   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
 163   padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
 164   background-color: var(--#{$prefix}modal-footer-bg);
 165   border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
 166   @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 167
 168   // Place margin between footer elements
 169   // This solution is far from ideal because of the universal selector usage,
 170   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
 171   > * {
 172     margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
 173   }
 174 }
 175
 176 // Scale up the modal
 177 @include media-breakpoint-up(sm) {
 178   .modal {
 179     --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
 180     --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
 181   }
 182
 183   // Automatically set modal's width for larger viewports
 184   .modal-dialog {
 185     max-width: var(--#{$prefix}modal-width);
 186     margin-right: auto;
 187     margin-left: auto;
 188   }
 189
 190   .modal-sm {
 191     --#{$prefix}modal-width: #{$modal-sm};
 192   }
 193 }
 194
 195 @include media-breakpoint-up(lg) {
 196   .modal-lg,
 197   .modal-xl {
 198     --#{$prefix}modal-width: #{$modal-lg};
 199   }
 200 }
 201
 202 @include media-breakpoint-up(xl) {
 203   .modal-xl {
 204     --#{$prefix}modal-width: #{$modal-xl};
 205   }
 206 }
 207
 208 // scss-docs-start modal-fullscreen-loop
 209 @each $breakpoint in map-keys($grid-breakpoints) {
 210   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 211   $postfix: if($infix != "", $infix + "-down", "");
 212
 213   @include media-breakpoint-down($breakpoint) {
 214     .modal-fullscreen#{$postfix} {
 215       width: 100vw;
 216       max-width: none;
 217       height: 100%;
 218       margin: 0;
 219
 220       .modal-content {
 221         height: 100%;
 222         border: 0;
 223         @include border-radius(0);
 224       }
 225
 226       .modal-header,
 227       .modal-footer {
 228         @include border-radius(0);
 229       }
 230
 231       .modal-body {
 232         overflow-y: auto;
 233       }
 234     }
 235   }
 236 }
 237 // scss-docs-end modal-fullscreen-loop