1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | .modal {
|
11 |
|
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};
|
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 |
|
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 |
|
45 |
|
46 | outline: 0;
|
47 |
|
48 |
|
49 |
|
50 | }
|
51 |
|
52 |
|
53 | .modal-dialog {
|
54 | position: relative;
|
55 | width: auto;
|
56 | margin: var(--#{$prefix}modal-margin);
|
57 |
|
58 | pointer-events: none;
|
59 |
|
60 |
|
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 |
|
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 |
|
95 | .modal-content {
|
96 | position: relative;
|
97 | display: flex;
|
98 | flex-direction: column;
|
99 | width: 100%;
|
100 |
|
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 |
|
109 | outline: 0;
|
110 | }
|
111 |
|
112 |
|
113 | .modal-backdrop {
|
114 |
|
115 | --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
|
116 | --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
|
117 | --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
|
118 |
|
119 |
|
120 | @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
|
121 | }
|
122 |
|
123 |
|
124 |
|
125 | .modal-header {
|
126 | display: flex;
|
127 | flex-shrink: 0;
|
128 | align-items: center;
|
129 | justify-content: space-between;
|
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(var(--#{$prefix}modal-header-padding-y) * -.5) calc(var(--#{$prefix}modal-header-padding-x) * -.5) calc(var(--#{$prefix}modal-header-padding-y) * -.5) auto;
|
137 | }
|
138 | }
|
139 |
|
140 |
|
141 | .modal-title {
|
142 | margin-bottom: 0;
|
143 | line-height: var(--#{$prefix}modal-title-line-height);
|
144 | }
|
145 |
|
146 |
|
147 |
|
148 | .modal-body {
|
149 | position: relative;
|
150 |
|
151 |
|
152 | flex: 1 1 auto;
|
153 | padding: var(--#{$prefix}modal-padding);
|
154 | }
|
155 |
|
156 |
|
157 | .modal-footer {
|
158 | display: flex;
|
159 | flex-shrink: 0;
|
160 | flex-wrap: wrap;
|
161 | align-items: center;
|
162 | justify-content: flex-end;
|
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 |
|
169 |
|
170 |
|
171 | > * {
|
172 | margin: calc(var(--#{$prefix}modal-footer-gap) * .5);
|
173 | }
|
174 | }
|
175 |
|
176 |
|
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 |
|
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 |
|
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 |
|