|
1 /*! |
|
2 * Bootstrap Modal |
|
3 * |
|
4 * Copyright Jordan Schroter |
|
5 * Licensed under the Apache License v2.0 |
|
6 * http://www.apache.org/licenses/LICENSE-2.0 |
|
7 * |
|
8 * Boostrap 3 patch for for bootstrap-modal. Include BEFORE bootstrap-modal.css! |
|
9 */ |
|
10 |
|
11 /*body.modal-open, |
|
12 .modal-open .navbar-fixed-top, |
|
13 .modal-open .navbar-fixed-bottom { |
|
14 margin-right: 0; |
|
15 } |
|
16 |
|
17 .modal { |
|
18 left: 50%; |
|
19 bottom: auto; |
|
20 right: auto; |
|
21 padding: 0; |
|
22 width: 500px; |
|
23 margin-left: -250px; |
|
24 background-color: #ffffff; |
|
25 border: 1px solid #999999; |
|
26 border: 1px solid rgba(0, 0, 0, 0.2); |
|
27 border-radius: 6px; |
|
28 -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); |
|
29 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); |
|
30 background-clip: padding-box; |
|
31 }*/ |
|
32 |
|
33 .modal.container { |
|
34 max-width: none; |
|
35 } |
|
36 |
|
37 |
|
38 /*! |
|
39 * Bootstrap Modal |
|
40 * |
|
41 * Copyright Jordan Schroter |
|
42 * Licensed under the Apache License v2.0 |
|
43 * http://www.apache.org/licenses/LICENSE-2.0 |
|
44 * |
|
45 */ |
|
46 |
|
47 .modal-open { |
|
48 overflow: hidden; |
|
49 } |
|
50 |
|
51 |
|
52 /* add a scroll bar to stop page from jerking around */ |
|
53 .modal-open.page-overflow .page-container, |
|
54 .modal-open.page-overflow .page-container .navbar-fixed-top, |
|
55 .modal-open.page-overflow .page-container .navbar-fixed-bottom, |
|
56 .modal-open.page-overflow .modal-scrollable { |
|
57 overflow-y: hidden; |
|
58 } |
|
59 |
|
60 @media (max-width: 979px) { |
|
61 .modal-open.page-overflow .page-container .navbar-fixed-top, |
|
62 .modal-open.page-overflow .page-container .navbar-fixed-bottom { |
|
63 overflow-y: visible; |
|
64 } |
|
65 } |
|
66 |
|
67 |
|
68 .modal-scrollable { |
|
69 position: fixed; |
|
70 top: 0; |
|
71 bottom: 0; |
|
72 left: 0; |
|
73 right: 0; |
|
74 overflow: auto; |
|
75 } |
|
76 |
|
77 .modal { |
|
78 outline: none; |
|
79 position: absolute; |
|
80 margin-top: 0; |
|
81 top: 50%; |
|
82 overflow: visible; /* allow content to popup out (i.e tooltips) */ |
|
83 } |
|
84 |
|
85 .modal.fade { |
|
86 top: -100%; |
|
87 -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; |
|
88 -moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; |
|
89 -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; |
|
90 transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out; |
|
91 } |
|
92 |
|
93 .modal.fade.in { |
|
94 top: 50%; |
|
95 } |
|
96 |
|
97 .modal.in .modal-dialog { |
|
98 -webkit-transform: none; |
|
99 -moz-transform: none; |
|
100 -ms-transform: none; |
|
101 -o-transform: none; |
|
102 transform: none; |
|
103 } |
|
104 |
|
105 .modal-body { |
|
106 max-height: none; |
|
107 overflow: visible; |
|
108 } |
|
109 |
|
110 .modal.modal-absolute { |
|
111 position: absolute; |
|
112 z-index: 950; |
|
113 } |
|
114 |
|
115 .modal .loading-mask { |
|
116 position: absolute; |
|
117 top: 0; |
|
118 bottom: 0; |
|
119 left: 0; |
|
120 right: 0; |
|
121 background: #fff; |
|
122 border-radius: 6px; |
|
123 } |
|
124 |
|
125 .modal-backdrop.modal-absolute{ |
|
126 position: absolute; |
|
127 z-index: 940; |
|
128 } |
|
129 |
|
130 .modal-backdrop, |
|
131 .modal-backdrop.fade.in{ |
|
132 opacity: 0.7; |
|
133 filter: alpha(opacity=70); |
|
134 background: #555; |
|
135 } |
|
136 |
|
137 .modal.container { |
|
138 width: 940px; |
|
139 margin-left: -470px; |
|
140 } |
|
141 |
|
142 /* Modal Overflow */ |
|
143 |
|
144 .modal-overflow.modal { |
|
145 top: 1%; |
|
146 } |
|
147 |
|
148 .modal-overflow.modal.fade { |
|
149 top: -100%; |
|
150 } |
|
151 |
|
152 .modal-overflow.modal.fade.in { |
|
153 top: 1%; |
|
154 } |
|
155 |
|
156 .modal-overflow .modal-body { |
|
157 overflow: auto; |
|
158 -webkit-overflow-scrolling: touch; |
|
159 } |
|
160 |
|
161 /* Responsive */ |
|
162 |
|
163 @media (min-width: 1200px) { |
|
164 .modal.container { |
|
165 width: 1170px; |
|
166 margin-left: -585px; |
|
167 } |
|
168 } |
|
169 |
|
170 @media (max-width: 979px) { |
|
171 .modal, |
|
172 .modal.container, |
|
173 .modal.modal-overflow { |
|
174 top: 1%; |
|
175 right: 1%; |
|
176 left: 1%; |
|
177 bottom: auto; |
|
178 width: auto !important; |
|
179 height: auto !important; |
|
180 margin: 0 !important; |
|
181 padding: 0 !important; |
|
182 } |
|
183 |
|
184 .modal.fade.in, |
|
185 .modal.container.fade.in, |
|
186 .modal.modal-overflow.fade.in { |
|
187 top: 1%; |
|
188 bottom: auto; |
|
189 } |
|
190 |
|
191 .modal-body, |
|
192 .modal-overflow .modal-body { |
|
193 position: static; |
|
194 margin: 0; |
|
195 height: auto !important; |
|
196 max-height: none !important; |
|
197 overflow: visible !important; |
|
198 } |
|
199 |
|
200 .modal-footer, |
|
201 .modal-overflow .modal-footer { |
|
202 position: static; |
|
203 } |
|
204 } |
|
205 |
|
206 .loading-spinner { |
|
207 position: absolute; |
|
208 top: 50%; |
|
209 left: 50%; |
|
210 margin: -12px 0 0 -12px; |
|
211 } |