static/scss/bootstrap-4.0.0-alpha.6/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 // 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   // When fading in the modal, animate it to slide down
  30   &.fade .modal-dialog {
  31     @include transition($modal-transition);
  32     transform: translate(0, -25%);
  33   }
  34   &.show .modal-dialog { transform: translate(0, 0); }
  35 }
  36 .modal-open .modal {
  37   overflow-x: hidden;
  38   overflow-y: auto;
  39 }
  40
  41 // Shell div to position the modal with bottom padding
  42 .modal-dialog {
  43   position: relative;
  44   width: auto;
  45   margin: $modal-dialog-margin;
  46 }
  47
  48 // Actual modal
  49 .modal-content {
  50   position: relative;
  51   display: flex;
  52   flex-direction: column;
  53   background-color: $modal-content-bg;
  54   background-clip: padding-box;
  55   border: $modal-content-border-width solid $modal-content-border-color;
  56   @include border-radius($border-radius-lg);
  57   @include box-shadow($modal-content-xs-box-shadow);
  58   // Remove focus outline from opened modal
  59   outline: 0;
  60 }
  61
  62 // Modal background
  63 .modal-backdrop {
  64   position: fixed;
  65   top: 0;
  66   right: 0;
  67   bottom: 0;
  68   left: 0;
  69   z-index: $zindex-modal-backdrop;
  70   background-color: $modal-backdrop-bg;
  71
  72   // Fade for backdrop
  73   &.fade { opacity: 0; }
  74   &.show { opacity: $modal-backdrop-opacity; }
  75 }
  76
  77 // Modal header
  78 // Top section of the modal w/ title and dismiss
  79 .modal-header {
  80   display: flex;
  81   align-items: center; // vertically center it
  82   justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  83   padding: $modal-header-padding;
  84   border-bottom: $modal-header-border-width solid $modal-header-border-color;
  85 }
  86
  87 // Title text within header
  88 .modal-title {
  89   margin-bottom: 0;
  90   line-height: $modal-title-line-height;
  91 }
  92
  93 // Modal body
  94 // Where all modal content resides (sibling of .modal-header and .modal-footer)
  95 .modal-body {
  96   position: relative;
  97   // Enable `flex-grow: 1` so that the body take up as much space as possible
  98   // when should there be a fixed height on `.modal-dialog`.
  99   flex: 1 1 auto;
 100   padding: $modal-inner-padding;
 101 }
 102
 103 // Footer (for actions)
 104 .modal-footer {
 105   display: flex;
 106   align-items: center; // vertically center
 107   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
 108   padding: $modal-inner-padding;
 109   border-top: $modal-footer-border-width solid $modal-footer-border-color;
 110
 111   // Easily place margin between footer elements
 112   > :not(:first-child) { margin-left: .25rem; }
 113   > :not(:last-child) { margin-right: .25rem; }
 114 }
 115
 116 // Measure scrollbar width for padding body during modal show/hide
 117 .modal-scrollbar-measure {
 118   position: absolute;
 119   top: -9999px;
 120   width: 50px;
 121   height: 50px;
 122   overflow: scroll;
 123 }
 124
 125 // Scale up the modal
 126 @include media-breakpoint-up(sm) {
 127   // Automatically set modal's width for larger viewports
 128   .modal-dialog {
 129     max-width: $modal-md;
 130     margin: $modal-dialog-sm-up-margin-y auto;
 131   }
 132
 133   .modal-content {
 134     @include box-shadow($modal-content-sm-up-box-shadow);
 135   }
 136
 137   .modal-sm { max-width: $modal-sm; }
 138 }
 139
 140 @include media-breakpoint-up(lg) {
 141   .modal-lg { max-width: $modal-lg; }
 142 }