1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | .modal-open {
|
8 |
|
9 | overflow: hidden;
|
10 |
|
11 | .modal {
|
12 | overflow-x: hidden;
|
13 | overflow-y: auto;
|
14 | }
|
15 | }
|
16 |
|
17 |
|
18 | .modal {
|
19 | position: fixed;
|
20 | top: 0;
|
21 | left: 0;
|
22 | z-index: $zindex-modal;
|
23 | display: none;
|
24 | width: 100%;
|
25 | height: 100%;
|
26 | overflow: hidden;
|
27 |
|
28 |
|
29 | outline: 0;
|
30 |
|
31 |
|
32 |
|
33 | }
|
34 |
|
35 |
|
36 | .modal-dialog {
|
37 | position: relative;
|
38 | width: auto;
|
39 | margin: $modal-dialog-margin;
|
40 |
|
41 | pointer-events: none;
|
42 |
|
43 |
|
44 | .modal.fade & {
|
45 | @include transition($modal-transition);
|
46 | transform: $modal-fade-transform;
|
47 | }
|
48 | .modal.show & {
|
49 | transform: $modal-show-transform;
|
50 | }
|
51 |
|
52 |
|
53 | .modal.modal-static & {
|
54 | transform: $modal-scale-transform;
|
55 | }
|
56 | }
|
57 |
|
58 | .modal-dialog-scrollable {
|
59 | display: flex;
|
60 | max-height: subtract(100%, $modal-dialog-margin * 2);
|
61 |
|
62 | .modal-content {
|
63 | max-height: subtract(100vh, $modal-dialog-margin * 2);
|
64 | overflow: hidden;
|
65 | }
|
66 |
|
67 | .modal-header,
|
68 | .modal-footer {
|
69 | flex-shrink: 0;
|
70 | }
|
71 |
|
72 | .modal-body {
|
73 | overflow-y: auto;
|
74 | }
|
75 | }
|
76 |
|
77 | .modal-dialog-centered {
|
78 | display: flex;
|
79 | align-items: center;
|
80 | min-height: subtract(100%, $modal-dialog-margin * 2);
|
81 |
|
82 |
|
83 | &::before {
|
84 | display: block;
|
85 | height: subtract(100vh, $modal-dialog-margin * 2);
|
86 | height: min-content;
|
87 | content: "";
|
88 | }
|
89 |
|
90 |
|
91 | &.modal-dialog-scrollable {
|
92 | flex-direction: column;
|
93 | justify-content: center;
|
94 | height: 100%;
|
95 |
|
96 | .modal-content {
|
97 | max-height: none;
|
98 | }
|
99 |
|
100 | &::before {
|
101 | content: none;
|
102 | }
|
103 | }
|
104 | }
|
105 |
|
106 |
|
107 | .modal-content {
|
108 | position: relative;
|
109 | display: flex;
|
110 | flex-direction: column;
|
111 | width: 100%;
|
112 |
|
113 | color: $modal-content-color;
|
114 | pointer-events: auto;
|
115 | background-color: $modal-content-bg;
|
116 | background-clip: padding-box;
|
117 | border: $modal-content-border-width solid $modal-content-border-color;
|
118 | @include border-radius($modal-content-border-radius);
|
119 | @include box-shadow($modal-content-box-shadow-xs);
|
120 |
|
121 | outline: 0;
|
122 | }
|
123 |
|
124 |
|
125 | .modal-backdrop {
|
126 | position: fixed;
|
127 | top: 0;
|
128 | left: 0;
|
129 | z-index: $zindex-modal-backdrop;
|
130 | width: 100vw;
|
131 | height: 100vh;
|
132 | background-color: $modal-backdrop-bg;
|
133 |
|
134 |
|
135 | &.fade { opacity: 0; }
|
136 | &.show { opacity: $modal-backdrop-opacity; }
|
137 | }
|
138 |
|
139 |
|
140 |
|
141 | .modal-header {
|
142 | display: flex;
|
143 | align-items: flex-start;
|
144 | justify-content: space-between;
|
145 | padding: $modal-header-padding;
|
146 | border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
147 | @include border-top-radius($modal-content-inner-border-radius);
|
148 |
|
149 | .close {
|
150 | padding: $modal-header-padding;
|
151 |
|
152 | margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
|
153 | }
|
154 | }
|
155 |
|
156 |
|
157 | .modal-title {
|
158 | margin-bottom: 0;
|
159 | line-height: $modal-title-line-height;
|
160 | }
|
161 |
|
162 |
|
163 |
|
164 | .modal-body {
|
165 | position: relative;
|
166 |
|
167 |
|
168 | flex: 1 1 auto;
|
169 | padding: $modal-inner-padding;
|
170 | }
|
171 |
|
172 |
|
173 | .modal-footer {
|
174 | display: flex;
|
175 | flex-wrap: wrap;
|
176 | align-items: center;
|
177 | justify-content: flex-end;
|
178 | padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
179 | border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
180 | @include border-bottom-radius($modal-content-inner-border-radius);
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 | > * {
|
187 | margin: $modal-footer-margin-between / 2;
|
188 | }
|
189 | }
|
190 |
|
191 |
|
192 | .modal-scrollbar-measure {
|
193 | position: absolute;
|
194 | top: -9999px;
|
195 | width: 50px;
|
196 | height: 50px;
|
197 | overflow: scroll;
|
198 | }
|
199 |
|
200 |
|
201 | @include media-breakpoint-up(sm) {
|
202 |
|
203 | .modal-dialog {
|
204 | max-width: $modal-md;
|
205 | margin: $modal-dialog-margin-y-sm-up auto;
|
206 | }
|
207 |
|
208 | .modal-dialog-scrollable {
|
209 | max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
210 |
|
211 | .modal-content {
|
212 | max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
213 | }
|
214 | }
|
215 |
|
216 | .modal-dialog-centered {
|
217 | min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
218 |
|
219 | &::before {
|
220 | height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
|
221 | height: min-content;
|
222 | }
|
223 | }
|
224 |
|
225 | .modal-content {
|
226 | @include box-shadow($modal-content-box-shadow-sm-up);
|
227 | }
|
228 |
|
229 | .modal-sm { max-width: $modal-sm; }
|
230 | }
|
231 |
|
232 | @include media-breakpoint-up(lg) {
|
233 | .modal-lg,
|
234 | .modal-xl {
|
235 | max-width: $modal-lg;
|
236 | }
|
237 | }
|
238 |
|
239 | @include media-breakpoint-up(xl) {
|
240 | .modal-xl { max-width: $modal-xl; }
|
241 | }
|