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 | align-items: center;
|
---|
65 | min-height: subtract(100%, $modal-dialog-margin * 2);
|
---|
66 | }
|
---|
67 |
|
---|
68 | // Actual modal
|
---|
69 | .modal-content {
|
---|
70 | position: relative;
|
---|
71 | display: flex;
|
---|
72 | flex-direction: column;
|
---|
73 | width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
---|
74 | // counteract the pointer-events: none; in the .modal-dialog
|
---|
75 | color: $modal-content-color;
|
---|
76 | pointer-events: auto;
|
---|
77 | background-color: $modal-content-bg;
|
---|
78 | background-clip: padding-box;
|
---|
79 | border: $modal-content-border-width solid $modal-content-border-color;
|
---|
80 | @include border-radius($modal-content-border-radius);
|
---|
81 | @include box-shadow($modal-content-box-shadow-xs);
|
---|
82 | // Remove focus outline from opened modal
|
---|
83 | outline: 0;
|
---|
84 | }
|
---|
85 |
|
---|
86 | // Modal background
|
---|
87 | .modal-backdrop {
|
---|
88 | @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $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 | flex-shrink: 0;
|
---|
96 | align-items: center;
|
---|
97 | justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
---|
98 | padding: $modal-header-padding;
|
---|
99 | border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
---|
100 | @include border-top-radius($modal-content-inner-border-radius);
|
---|
101 |
|
---|
102 | .btn-close {
|
---|
103 | padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
|
---|
104 | margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) 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 there should 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 | flex-wrap: wrap;
|
---|
128 | flex-shrink: 0;
|
---|
129 | align-items: center; // vertically center
|
---|
130 | justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
---|
131 | padding: $modal-inner-padding - $modal-footer-margin-between * .5;
|
---|
132 | border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
---|
133 | @include border-bottom-radius($modal-content-inner-border-radius);
|
---|
134 |
|
---|
135 | // Place margin between footer elements
|
---|
136 | // This solution is far from ideal because of the universal selector usage,
|
---|
137 | // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
---|
138 | > * {
|
---|
139 | margin: $modal-footer-margin-between * .5;
|
---|
140 | }
|
---|
141 | }
|
---|
142 |
|
---|
143 | // Scale up the modal
|
---|
144 | @include media-breakpoint-up(sm) {
|
---|
145 | // Automatically set modal's width for larger viewports
|
---|
146 | .modal-dialog {
|
---|
147 | max-width: $modal-md;
|
---|
148 | margin: $modal-dialog-margin-y-sm-up auto;
|
---|
149 | }
|
---|
150 |
|
---|
151 | .modal-dialog-scrollable {
|
---|
152 | height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
---|
153 | }
|
---|
154 |
|
---|
155 | .modal-dialog-centered {
|
---|
156 | min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
---|
157 | }
|
---|
158 |
|
---|
159 | .modal-content {
|
---|
160 | @include box-shadow($modal-content-box-shadow-sm-up);
|
---|
161 | }
|
---|
162 |
|
---|
163 | .modal-sm { max-width: $modal-sm; }
|
---|
164 | }
|
---|
165 |
|
---|
166 | @include media-breakpoint-up(lg) {
|
---|
167 | .modal-lg,
|
---|
168 | .modal-xl {
|
---|
169 | max-width: $modal-lg;
|
---|
170 | }
|
---|
171 | }
|
---|
172 |
|
---|
173 | @include media-breakpoint-up(xl) {
|
---|
174 | .modal-xl { max-width: $modal-xl; }
|
---|
175 | }
|
---|
176 |
|
---|
177 | // scss-docs-start modal-fullscreen-loop
|
---|
178 | @each $breakpoint in map-keys($grid-breakpoints) {
|
---|
179 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
---|
180 | $postfix: if($infix != "", $infix + "-down", "");
|
---|
181 |
|
---|
182 | @include media-breakpoint-down($breakpoint) {
|
---|
183 | .modal-fullscreen#{$postfix} {
|
---|
184 | width: 100vw;
|
---|
185 | max-width: none;
|
---|
186 | height: 100%;
|
---|
187 | margin: 0;
|
---|
188 |
|
---|
189 | .modal-content {
|
---|
190 | height: 100%;
|
---|
191 | border: 0;
|
---|
192 | @include border-radius(0);
|
---|
193 | }
|
---|
194 |
|
---|
195 | .modal-header {
|
---|
196 | @include border-radius(0);
|
---|
197 | }
|
---|
198 |
|
---|
199 | .modal-body {
|
---|
200 | overflow-y: auto;
|
---|
201 | }
|
---|
202 |
|
---|
203 | .modal-footer {
|
---|
204 | @include border-radius(0);
|
---|
205 | }
|
---|
206 | }
|
---|
207 | }
|
---|
208 | }
|
---|
209 | // scss-docs-end modal-fullscreen-loop
|
---|