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