|
1 /** |
|
2 * UI modal dialog |
|
3 */ |
|
4 |
|
5 .modal-backdrop, |
|
6 .modal-backdrop.fade.in { |
|
7 position: fixed; |
|
8 width: 100%; |
|
9 height: 100%; |
|
10 z-index: 990; |
|
11 } |
|
12 |
|
13 .modal-dialog { |
|
14 &.modal-max { |
|
15 width: 98%; |
|
16 max-width: 98%; |
|
17 } |
|
18 &.modal-xlarge { |
|
19 @media only screen and (min-width: 768px) { |
|
20 width: 95%; |
|
21 max-width: 1000px; |
|
22 } |
|
23 } |
|
24 &.modal-large { |
|
25 @media only screen and (min-width: 768px) { |
|
26 width: 80%; |
|
27 max-width: 900px; |
|
28 } |
|
29 } |
|
30 &.modal-medium { |
|
31 @media only screen and (min-width: 768px) { |
|
32 width: 60%; |
|
33 max-width: 650px; |
|
34 } |
|
35 } |
|
36 &.modal-small { |
|
37 @media only screen and (min-width: 768px) { |
|
38 width: 40%; |
|
39 max-width: 450px; |
|
40 } |
|
41 } |
|
42 .modal-body { |
|
43 .modal-viewport { |
|
44 min-height: 140px; |
|
45 } |
|
46 } |
|
47 .close:hover { |
|
48 background-color: white; |
|
49 } |
|
50 .suffix { |
|
51 .alert { |
|
52 margin-bottom: 0; |
|
53 |
|
54 &:last-child { |
|
55 border-radius: 0 0 5px 5px; |
|
56 } |
|
57 } |
|
58 } |
|
59 } |
|
60 |
|
61 .modal-header { |
|
62 position: relative; |
|
63 cursor: move; |
|
64 |
|
65 .toolbar { |
|
66 position: absolute; |
|
67 right: 25px; |
|
68 bottom: -19px; |
|
69 z-index: 1; |
|
70 } |
|
71 } |
|
72 .modal-title { |
|
73 min-height: 1.1em; |
|
74 |
|
75 img { |
|
76 margin: 0 15px 0 0; |
|
77 } |
|
78 } |
|
79 |
|
80 .modal-overflow { |
|
81 position: relative; |
|
82 height: 98%; |
|
83 |
|
84 .modal-body { |
|
85 overflow: hidden; |
|
86 } |
|
87 .scrollmarker { |
|
88 position: absolute; |
|
89 width: 100%; |
|
90 height: 20px; |
|
91 |
|
92 &.top { |
|
93 background: -moz-linear-gradient(top, rgba(50, 118, 177, 1) 0%, rgba(50, 118, 177, 0.83) 17%, rgba(50, 118, 177, 0) 100%); /* FF3.6+ */ |
|
94 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50, 118, 177, 1)), color-stop(17%,rgba(50, 118, 177, 0.83)), color-stop(100%,rgba(50, 118, 177,0))); /* Chrome,Safari4+ */ |
|
95 background: -webkit-linear-gradient(top, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* Chrome10+,Safari5.1+ */ |
|
96 background: -o-linear-gradient(top, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* Opera 11.10+ */ |
|
97 background: -ms-linear-gradient(top, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* IE10+ */ |
|
98 background: linear-gradient(to bottom, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* W3C */ |
|
99 } |
|
100 &.bottom { |
|
101 background: -moz-linear-gradient(bottom, rgba(50, 118, 177, 1) 0%, rgba(50, 118, 177, 0.83) 17%, rgba(50, 118, 177, 0) 100%); /* FF3.6+ */ |
|
102 background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(50, 118, 177, 1)), color-stop(17%,rgba(50, 118, 177, 0.83)), color-stop(100%,rgba(50, 118, 177,0))); /* Chrome,Safari4+ */ |
|
103 background: -webkit-linear-gradient(bottom, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* Chrome10+,Safari5.1+ */ |
|
104 background: -o-linear-gradient(bottom, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* Opera 11.10+ */ |
|
105 background: -ms-linear-gradient(bottom, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* IE10+ */ |
|
106 background: linear-gradient(to top, rgba(50, 118, 177,1) 0%,rgba(50, 118, 177, 0.83) 17%,rgba(50, 118, 177, 0) 100%); /* W3C */ |
|
107 } |
|
108 |
|
109 @media only screen and (max-width: 991px) { |
|
110 display: none; |
|
111 } |
|
112 } |
|
113 } |
|
114 |
|
115 .modal-viewport { |
|
116 overflow-x: hidden; |
|
117 overflow-y: auto; |
|
118 |
|
119 fieldset { |
|
120 .alert { |
|
121 margin: 0 -5px 5px!important; |
|
122 } |
|
123 } |
|
124 } |
|
125 |
|
126 .ui-dialog { |
|
127 position: absolute; |
|
128 top: 0; |
|
129 left: 0; |
|
130 padding: 0; |
|
131 width: 300px; |
|
132 overflow: hidden; |
|
133 -webkit-background-clip: padding-box; |
|
134 background-clip: padding-box; |
|
135 background-color: #fff; |
|
136 border-radius: 3px; |
|
137 -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); |
|
138 box-shadow: 0 5px 15px rgba(0, 0, 0, .5); |
|
139 border: 1px solid rgba(0, 0, 0, .2); |
|
140 outline: medium none; |
|
141 z-index: 1050; |
|
142 |
|
143 .ui-dialog-titlebar { |
|
144 position: relative; |
|
145 padding: 0 10px; |
|
146 background: #fff; |
|
147 border-color: #fff; |
|
148 font-size: 18px; |
|
149 text-decoration: none; |
|
150 border: 0 0 0 1px solid; |
|
151 border-bottom-right-radius: 0; |
|
152 border-bottom-left-radius: 0; |
|
153 border-bottom: 1px solid #ccc; |
|
154 border-bottom-color: #eee; |
|
155 } |
|
156 .ui-dialog-title { |
|
157 float: left; |
|
158 margin: 0; |
|
159 color: #404040; |
|
160 font-weight: 700; |
|
161 padding: 5px; |
|
162 text-overflow: ellipsis; |
|
163 overflow: hidden; |
|
164 } |
|
165 .ui-dialog-titlebar-close { |
|
166 position: absolute; |
|
167 right: .3em; |
|
168 top: 50%; |
|
169 width: 19px; |
|
170 margin: -16px 4px 0 0; |
|
171 padding: 1px; |
|
172 height: 18px; |
|
173 font-size: 20px; |
|
174 font-weight: 700; |
|
175 line-height: 13.5px; |
|
176 text-shadow: 0 1px 0 #fff; |
|
177 filter: alpha(opacity=25); |
|
178 -khtml-opacity: .25; |
|
179 -moz-opacity: .25; |
|
180 opacity: .25; |
|
181 background: 0 0; |
|
182 border: 0; |
|
183 -webkit-box-shadow: none; |
|
184 box-shadow: none; |
|
185 |
|
186 &:before { |
|
187 content: "\f00d"; |
|
188 font-family: FontAwesome; |
|
189 font-style: normal; |
|
190 font-weight: 400; |
|
191 line-height: 1; |
|
192 -webkit-font-smoothing: antialiased; |
|
193 -moz-osx-font-smoothing: grayscale; |
|
194 font-size: 13px; |
|
195 } |
|
196 &:focus, |
|
197 &:hover { |
|
198 padding: 1px; |
|
199 filter: alpha(opacity=90); |
|
200 -moz-opacity: .9; |
|
201 opacity: .9; |
|
202 } |
|
203 span { |
|
204 display: block; |
|
205 margin: 1px; |
|
206 text-indent: 9999px; |
|
207 } |
|
208 } |
|
209 .ui-dialog-content { |
|
210 position: relative; |
|
211 border: 0; |
|
212 padding: .5em 1em; |
|
213 background: 0 0; |
|
214 overflow: auto; |
|
215 } |
|
216 .ui-dialog-buttonpane { |
|
217 margin: 13px 0 0; |
|
218 padding: 19px 15px 20px; |
|
219 border-top: 1px solid #eee; |
|
220 border-width: 1px 0 0; |
|
221 border-radius: 0 0 6px 6px; |
|
222 background-image: none; |
|
223 background-color: #fff; |
|
224 -webkit-box-shadow: inset 0 1px 0 #fff; |
|
225 box-shadow: inset 0 1px 0 #fff; |
|
226 text-align: right; |
|
227 |
|
228 .ui-dialog-buttonset { |
|
229 float: right; |
|
230 } |
|
231 button { |
|
232 margin: 0 .4em 0 0; |
|
233 cursor: pointer; |
|
234 } |
|
235 } |
|
236 .ui-resizable-se { |
|
237 width: 14px; |
|
238 height: 14px; |
|
239 right: 3px; |
|
240 bottom: 3px; |
|
241 } |
|
242 .ui-draggable &-titlebar { |
|
243 cursor: move; |
|
244 } |
|
245 &-buttonpane &-buttonset .ui-button { |
|
246 color: #fff; |
|
247 background-color: #428bca; |
|
248 border-color: #357ebd; |
|
249 |
|
250 &.ui-state-hover { |
|
251 color: #fff; |
|
252 background-color: #3276b1; |
|
253 border-color: #285e8e; |
|
254 } |
|
255 } |
|
256 &-buttonset { |
|
257 .ui-button:not(:first-child) { |
|
258 cursor: pointer; |
|
259 display: inline-block; |
|
260 color: #333; |
|
261 background-color: #fff; |
|
262 border: 1px solid #ccc; |
|
263 -webkit-transition: .1s linear all; |
|
264 transition: .1s linear all; |
|
265 overflow: visible; |
|
266 } |
|
267 .ui-button:not(:first-child) .ui-state-hover { |
|
268 color: #333; |
|
269 background-color: #ebebeb; |
|
270 border-color: #adadad; |
|
271 text-decoration: none; |
|
272 } |
|
273 .ui-button.ui-button-info { |
|
274 color: #fff; |
|
275 background-color: #5bc0de; |
|
276 border-color: #46b8da; |
|
277 |
|
278 &.ui-state-hover { |
|
279 color: #fff; |
|
280 background-color: #39b3d7; |
|
281 border-color: #269abc; |
|
282 } |
|
283 } |
|
284 .ui-button.ui-button-success { |
|
285 color: #fff; |
|
286 background-color: #5cb85c; |
|
287 border-color: #4cae4c; |
|
288 |
|
289 &.ui-state-hover { |
|
290 color: #fff; |
|
291 background-color: #47a447; |
|
292 border-color: #398439; |
|
293 } |
|
294 } |
|
295 .ui-button.ui-button-warning { |
|
296 color: #fff; |
|
297 background-color: #f0ad4e; |
|
298 border-color: #eea236; |
|
299 |
|
300 &.ui-state-hover { |
|
301 color: #fff; |
|
302 background-color: #ed9c28; |
|
303 border-color: #d58512; |
|
304 } |
|
305 } |
|
306 .ui-button.ui-button-danger { |
|
307 color: #fff; |
|
308 background-color: #d9534f; |
|
309 border-color: #d43f3a; |
|
310 |
|
311 &.ui-state-hover { |
|
312 color: #fff; |
|
313 background-color: #d2322d; |
|
314 border-color: #ac2925; |
|
315 } |
|
316 } |
|
317 .ui-button.ui-button-inverse { |
|
318 color: #fff; |
|
319 background-color: #222; |
|
320 border-color: #080808; |
|
321 |
|
322 &.ui-state-hover { |
|
323 color: #fff; |
|
324 background-color: #363636; |
|
325 border-color: #000; |
|
326 } |
|
327 } |
|
328 } |
|
329 } |