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