1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
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 |
|
19 |
|
20 | outline: 0;
|
21 |
|
22 |
|
23 |
|
24 | }
|
25 |
|
26 |
|
27 | .modal-dialog {
|
28 | position: relative;
|
29 | width: auto;
|
30 | margin: $modal-dialog-margin;
|
31 |
|
32 | pointer-events: none;
|
33 |
|
34 |
|
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 |
|
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 |
|
69 | .modal-content {
|
70 | position: relative;
|
71 | display: flex;
|
72 | flex-direction: column;
|
73 | width: 100%;
|
74 |
|
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 |
|
83 | outline: 0;
|
84 | }
|
85 |
|
86 |
|
87 | .modal-backdrop {
|
88 | position: fixed;
|
89 | top: 0;
|
90 | left: 0;
|
91 | z-index: $zindex-modal-backdrop;
|
92 | width: 100vw;
|
93 | height: 100vh;
|
94 | background-color: $modal-backdrop-bg;
|
95 |
|
96 |
|
97 | &.fade { opacity: 0; }
|
98 | &.show { opacity: $modal-backdrop-opacity; }
|
99 | }
|
100 |
|
101 |
|
102 |
|
103 | .modal-header {
|
104 | display: flex;
|
105 | flex-shrink: 0;
|
106 | align-items: center;
|
107 | justify-content: space-between;
|
108 | padding: $modal-header-padding;
|
109 | border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
110 | @include border-top-radius($modal-content-inner-border-radius);
|
111 |
|
112 | .btn-close {
|
113 | padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
|
114 | margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
|
115 | }
|
116 | }
|
117 |
|
118 |
|
119 | .modal-title {
|
120 | margin-bottom: 0;
|
121 | line-height: $modal-title-line-height;
|
122 | }
|
123 |
|
124 |
|
125 |
|
126 | .modal-body {
|
127 | position: relative;
|
128 |
|
129 |
|
130 | flex: 1 1 auto;
|
131 | padding: $modal-inner-padding;
|
132 | }
|
133 |
|
134 |
|
135 | .modal-footer {
|
136 | display: flex;
|
137 | flex-wrap: wrap;
|
138 | flex-shrink: 0;
|
139 | align-items: center;
|
140 | justify-content: flex-end;
|
141 | padding: $modal-inner-padding - $modal-footer-margin-between / 2;
|
142 | border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
143 | @include border-bottom-radius($modal-content-inner-border-radius);
|
144 |
|
145 |
|
146 |
|
147 |
|
148 | > * {
|
149 | margin: $modal-footer-margin-between / 2;
|
150 | }
|
151 | }
|
152 |
|
153 |
|
154 | @include media-breakpoint-up(sm) {
|
155 |
|
156 | .modal-dialog {
|
157 | max-width: $modal-md;
|
158 | margin: $modal-dialog-margin-y-sm-up auto;
|
159 | }
|
160 |
|
161 | .modal-dialog-scrollable {
|
162 | height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
163 | }
|
164 |
|
165 | .modal-dialog-centered {
|
166 | min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
|
167 | }
|
168 |
|
169 | .modal-content {
|
170 | @include box-shadow($modal-content-box-shadow-sm-up);
|
171 | }
|
172 |
|
173 | .modal-sm { max-width: $modal-sm; }
|
174 | }
|
175 |
|
176 | @include media-breakpoint-up(lg) {
|
177 | .modal-lg,
|
178 | .modal-xl {
|
179 | max-width: $modal-lg;
|
180 | }
|
181 | }
|
182 |
|
183 | @include media-breakpoint-up(xl) {
|
184 | .modal-xl { max-width: $modal-xl; }
|
185 | }
|
186 |
|
187 |
|
188 | @each $breakpoint in map-keys($grid-breakpoints) {
|
189 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
190 | $postfix: if($infix != "", $infix + "-down", "");
|
191 |
|
192 | @include media-breakpoint-down($breakpoint) {
|
193 | .modal-fullscreen#{$postfix} {
|
194 | width: 100vw;
|
195 | max-width: none;
|
196 | height: 100%;
|
197 | margin: 0;
|
198 |
|
199 | .modal-content {
|
200 | height: 100%;
|
201 | border: 0;
|
202 | @include border-radius(0);
|
203 | }
|
204 |
|
205 | .modal-header {
|
206 | @include border-radius(0);
|
207 | }
|
208 |
|
209 | .modal-body {
|
210 | overflow-y: auto;
|
211 | }
|
212 |
|
213 | .modal-footer {
|
214 | @include border-radius(0);
|
215 | }
|
216 | }
|
217 | }
|
218 | }
|
219 |
|