2.0_beta sync to rsa
[framework/web/web-ui-fw.git] / src / themes / tizen / common / jquery.mobile.tizen.popupwindow.less
1 @import "config.less";
2
3 /* Resource color mapping table
4
5 @color_popup_title_bg:  popup_title_bg.png
6 @color_popup_text_bg:   popup_bg.png
7 @color_popup_button_bg: popup_button_bg.png
8 @color_popup_font:              Popup title & default
9 @color_popup_text_font: Popup text
10
11 */
12
13
14 @popupwindow-text-padding-vert: 22 * @unit_base;
15 @popupwindow-text-padding-hori: 16 * @unit_base;
16
17
18 .ui-popupwindow-screen {
19     background: #000000;
20     opacity: 0;
21         position: absolute;
22         top: 0;
23         left: 0;
24         width: 100%;
25         height: 100%;
26         z-index: @z_base_popup;
27 }
28
29 .ui-popupwindow {
30
31         position: absolute;
32         z-index: (@z_base_popup + 1) !important;
33         color: @color_popup_font;
34
35         //FIXME : remove background & padding if there is no padding.
36         padding: 2*@unit_base 2*@unit_base;
37         background:             @color_popup_text_bg;
38
39         // --------- common style in popup window ------------- //
40         .popup-title {
41                 width: 100%;
42                 height: 100%;
43                 font-size: @font_size_popup_basic_style_title;
44                 background: @color_popup_title_bg;
45                 p {
46                         margin: 0*@unit_base 0*@unit_base;
47                         padding: 13*@unit_base 0*@unit_base;
48                 }
49         }
50
51         .popup-text {
52                 width: 100%;
53                 color: @color_popup_text_font;
54                 font-size: @font_size_popup_info_style;
55                 background: @color_popup_text_bg;
56                 p {
57                         text-align: center;
58                         padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
59                 }
60         }
61         // ----------------------------------------------------- //
62
63         .center_info {
64
65                 .LESSdisplaybox();
66                 .LESSbox-orient(vertical);
67                 .LESSbox-align(center);
68                 .LESSbox-pack(center);
69
70                 // .popup-text
71         }
72
73         .center_title {
74                 .LESSdisplaybox();
75                 .LESSbox-orient(vertical);
76                 .LESSbox-align(center);
77                 .LESSbox-pack(center);
78
79             text-align: center;
80
81                 // .popup-title
82                 // .popup-text
83         }
84
85         .center_basic_1btn {
86
87                 .LESSdisplaybox();
88                 .LESSbox-orient(vertical);
89                 .LESSbox-align(center);
90                 .LESSbox-pack(center);
91
92             text-align: center;
93
94                 // .popup-text
95
96                 .popup-button-bg {
97                         font-size: @font_size_popup_button_text;
98                         background: @color_popup_button_bg;
99                         width: 100%;
100                         padding-top: 11*@unit_base;
101                         padding-bottom: 11*@unit_base;
102                         vertical-align: middle;
103
104                         .ui-btn {
105                                 width: 402*@unit_base;
106                                 height: 74*@unit_base;
107                                 margin:auto;
108
109                         }
110                 }
111         }
112         .center_basic_2btn {
113
114                 .LESSdisplaybox();
115                 .LESSbox-orient(vertical);
116                 .LESSbox-align(center);
117                 .LESSbox-pack(center);
118
119             text-align: center;
120
121                 // .popup-text
122
123                 .popup-button-bg {
124                         font-size: @font_size_popup_button_text;
125                         background: @color_popup_button_bg;
126                         width: 100%;
127                         padding-top: 11*@unit_base;
128                         padding-bottom: 11*@unit_base;
129                         vertical-align: middle;
130
131                         .ui-btn {
132                                 width: 274*@unit_base;
133                                 height: 74*@unit_base;
134                                 margin-top: 0*@unit_base;
135                                 margin-bottom: 0*@unit_base;
136                                 margin-left: 5*@unit_base;
137                                 margin-right: 5*@unit_base;
138
139                                 display: inline-block;
140                         }
141                 }
142         }
143         .center_basic_3btn {
144
145                 .LESSdisplaybox();
146                 .LESSbox-orient(vertical);
147                 .LESSbox-align(center);
148                 .LESSbox-pack(center);
149
150             text-align: center;
151
152                 // .popup-text
153
154                 .popup-button-bg {
155                         font-size: @font_size_popup_button_text;
156                         background: @color_popup_button_bg;
157                         width: 100%;
158                         padding-top: 11*@unit_base;
159                         padding-bottom: 11*@unit_base;
160                         vertical-align: middle;
161
162                         .ui-btn {
163                                 width: 186*@unit_base;
164                                 height: 74*@unit_base;
165                                 margin-top: 0*@unit_base;
166                                 margin-bottom: 0*@unit_base;
167                                 margin-left: 5*@unit_base;
168                                 margin-right: 5*@unit_base;
169
170                                 display: inline-block;
171                         }
172                 }
173         }
174         .center_title_1btn {
175
176                 .LESSdisplaybox();
177                 .LESSbox-orient(vertical);
178                 .LESSbox-align(center);
179                 .LESSbox-pack(center);
180
181                 text-align: center;
182
183                 // .popup-title
184                 // .popup-text
185
186                 .popup-button-bg {
187                         font-size: @font_size_popup_button_text;
188                         background: @color_popup_button_bg;
189                         width: 100%;
190                         padding-top: 11*@unit_base;
191                         padding-bottom: 11*@unit_base;
192                         vertical-align: middle;
193
194                         .ui-btn {
195                                 width: 402*@unit_base;
196                                 height: 74*@unit_base;
197                                 margin:auto;
198
199                         }
200                 }
201         }
202         .center_title_2btn {
203
204                 .LESSdisplaybox();
205                 .LESSbox-orient(vertical);
206                 .LESSbox-align(center);
207                 .LESSbox-pack(center);
208
209                 text-align: center;
210
211                 // .popup-title
212                 // .popup-text
213
214                 .popup-button-bg {
215                         font-size: @font_size_popup_button_text;
216                         background: @color_popup_button_bg;
217                         width: 100%;
218                         padding-top: 11*@unit_base;
219                         padding-bottom: 11*@unit_base;
220                         vertical-align: middle;
221
222                         .ui-btn {
223                                 width: 274*@unit_base;
224                                 height: 74*@unit_base;
225                                 margin-top: 0*@unit_base;
226                                 margin-bottom: 0*@unit_base;
227                                 margin-left: 5*@unit_base;
228                                 margin-right: 5*@unit_base;
229
230                                 display: inline-block;
231                         }
232                 }
233         }
234         .center_title_3btn {
235
236                 .LESSdisplaybox();
237                 .LESSbox-orient(vertical);
238                 .LESSbox-align(center);
239                 .LESSbox-pack(center);
240
241             text-align: center;
242
243                 // .popup-title
244                 // .popup-text
245
246                 .popup-button-bg {
247                         font-size: @font_size_popup_button_text;
248                         background: @color_popup_button_bg;
249                         width: 100%;
250                         padding-top: 11*@unit_base;
251                         padding-bottom: 11*@unit_base;
252                         vertical-align: middle;
253
254                         .ui-btn {
255                                 width: 186*@unit_base;
256                                 height: 74*@unit_base;
257                                 margin-top: 0*@unit_base;
258                                 margin-bottom: 0*@unit_base;
259                                 margin-left: 5*@unit_base;
260                                 margin-right: 5*@unit_base;
261
262                                 display: inline-block;
263                         }
264                 }
265         }
266         .center_button_vertical {
267
268                 .LESSdisplaybox();
269                 .LESSbox-orient(vertical);
270                 .LESSbox-align(center);
271                 .LESSbox-pack(center);
272
273             text-align: center;
274
275                 // .popup-text
276
277                 .popup-button-bg {
278                         font-size: @font_size_popup_button_text;
279                         background: @color_popup_button_bg;
280                         width: 100%;
281                         padding-top: 1px;
282                         padding-bottom: 16*@unit_base;
283                         vertical-align: middle;
284
285                         .ui-btn {
286                                 width: 356*@unit_base;
287                                 height: 74*@unit_base;
288                                 margin-top: 16*@unit_base;
289                                 margin-bottom: 0*@unit_base;
290                                 margin-left: auto;
291                                 margin-right: auto;
292                         }
293                 }
294         }
295         .center_checkbox {
296
297                 .LESSdisplaybox();
298                 .LESSbox-orient(vertical);
299                 .LESSbox-align(center);
300                 .LESSbox-pack(center);
301
302             text-align: center;
303
304                 // .popup-text
305
306                 .popup-check-bg {
307                         font-size: @font_size_popup_info_style;
308                         background: @color_popup_text_bg;
309                         width: 100%;
310                         padding-top: 0*@unit_base;
311                         padding-bottom: 22*@unit_base;
312                         vertical-align: middle;
313
314                         .ui-checkbox {
315                                 .ui-btn {
316                                         text-align: center;
317                                         background: @color_popup_text_bg;
318                                         border: 0*@unit_base;
319
320                                         .ui-btn-inner {
321                                                 border: 0*@unit_base;
322                                         }
323                                 }
324                         }
325                 }
326
327                 .popup-button-bg {
328                         font-size: @font_size_popup_button_text;
329                         background: @color_popup_button_bg;
330                         width: 100%;
331                         padding-top: 11*@unit_base;
332                         padding-bottom: 11*@unit_base;
333                         vertical-align: middle;
334
335                         .ui-btn {
336                                 width: 274*@unit_base;
337                                 height: 74*@unit_base;
338                                 margin-top: 0*@unit_base;
339                                 margin-bottom: 0*@unit_base;
340                                 margin-left: 5*@unit_base;
341                                 margin-right: 5*@unit_base;
342
343                                 display: inline-block;
344                         }
345                 }
346         }
347         .center_liststyle_1btn {
348
349                 .LESSdisplaybox();
350                 .LESSbox-orient(vertical);
351                 .LESSbox-align(center);
352                 .LESSbox-pack(center);
353
354                 text-align: center;
355
356                 // .popup-title
357
358                 .popup-scroller-bg {
359                         width: 100%;
360                         overflow: hidden;
361                         background: black;
362
363                         .ui-listview {
364                                 height: 512*@unit_base;
365                         }
366                 }
367                 .popup-button-bg {
368                         font-size: @font_size_popup_button_text;
369                         background: @color_popup_button_bg;
370                         width: 100%;
371                         padding-top: 11*@unit_base;
372                         padding-bottom: 11*@unit_base;
373                         vertical-align: middle;
374
375                         .ui-btn {
376                                 width: 402*@unit_base;
377                                 height: 74*@unit_base;
378                                 margin:auto;
379
380                         }
381                 }
382         }
383         .center_liststyle_2btn {
384
385                 .LESSdisplaybox();
386                 .LESSbox-orient(vertical);
387                 .LESSbox-align(center);
388                 .LESSbox-pack(center);
389
390                 text-align: center;
391
392                 // .popup-title
393
394                 .popup-scroller-bg {
395                         width: 100%;
396                         overflow: hidden;
397                         background: black;
398
399                         .ui-listview {
400                                 height: 512*@unit_base;
401                         }
402                 }
403                 .popup-button-bg {
404                         font-size: @font_size_popup_button_text;
405                         background: @color_popup_button_bg;
406                         width: 100%;
407                         padding-top: 11*@unit_base;
408                         padding-bottom: 11*@unit_base;
409                         vertical-align: middle;
410
411                         .ui-btn {
412                                 width: 274*@unit_base;
413                                 height: 74*@unit_base;
414                                 margin-top: 0*@unit_base;
415                                 margin-bottom: 0*@unit_base;
416                                 margin-left: 5*@unit_base;
417                                 margin-right: 5*@unit_base;
418
419                                 display: inline-block;
420                         }
421                 }
422         }
423         .center_liststyle_3btn {
424
425                 .LESSdisplaybox();
426                 .LESSbox-orient(vertical);
427                 .LESSbox-align(center);
428                 .LESSbox-pack(center);
429
430                 text-align: center;
431
432                 // .popup-title
433
434                 .popup-scroller-bg {
435                         width: 100%;
436                         overflow: hidden;
437                         background: black;
438
439                         .ui-listview {
440                                 height: 512*@unit_base;
441                         }
442                 }
443                 .popup-button-bg {
444                         font-size: @font_size_popup_button_text;
445                         background: @color_popup_button_bg;
446                         width: 100%;
447                         padding-top: 11*@unit_base;
448                         padding-bottom: 11*@unit_base;
449                         vertical-align: middle;
450
451                         .ui-btn {
452                                 width: 186*@unit_base;
453                                 height: 74*@unit_base;
454                                 margin-top: 0*@unit_base;
455                                 margin-bottom: 0*@unit_base;
456                                 margin-left: 5*@unit_base;
457                                 margin-right: 5*@unit_base;
458
459                                 display: inline-block;
460                         }
461                 }
462         }
463
464         .center_progressbar {
465
466                 .LESSdisplaybox();
467                 .LESSbox-orient(vertical);
468                 .LESSbox-align(center);
469                 .LESSbox-pack(center);
470
471                 text-align: center;
472
473                 .popup-text {
474                         font-size: @font_size_popup_center_progressbar_title;
475                         font-color: @color_popup_center_progressbar_title;
476                         background: @color_popup_text_bg;
477                         width: 100%;
478                         height: 70*@unit_base;
479                         p {
480                                 height: 100%;
481                                 text-align: center;
482                                 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
483                         }
484                 }
485
486                 .popup-text-bottom-bg {
487                         font-size: @font_size_popup_center_progressbar_title;
488                         font-color: @color_popup_center_progressbar_title;
489                         background: @color_popup_text_bg;
490                         width: 100%;
491                         vertical-align: middle;
492
493                         .text-left {
494                                 width: 40%;
495                                 height: 48*@unit_base;
496                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
497                                 text-align: left;
498
499                                 display: inline-block;
500                         }
501                         .text-right {
502                                 width: 40%;
503                                 height: 48*@unit_base;
504                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
505                                 text-align: right;
506
507                                 display: inline-block;
508                         }
509
510                 }
511
512                 .popup-button-bg {
513                         font-size: @font_size_popup_button_text;
514                         background: @color_popup_button_bg;
515                         width: 100%;
516                         padding-top: 11*@unit_base;
517                         padding-bottom: 11*@unit_base;
518                         vertical-align: middle;
519
520                         .ui-btn {
521                                 width: 402*@unit_base;
522                                 height: 74*@unit_base;
523                                 margin:auto;
524
525                         }
526                 }
527
528                 .popup-progress-bg {
529                         background: @color_popup_text_bg;
530                         width: 100%;
531                         height: 100%;
532                 }
533         }
534
535         .centertext_progressbar {
536
537                 .LESSdisplaybox();
538                 .LESSbox-orient(vertical);
539                 .LESSbox-align(center);
540                 .LESSbox-pack(center);
541
542                 text-align: center;
543
544                 .popup-text {
545                         font-size: @font_size_popup_center_progressbar_title;
546                         font-color: @color_popup_center_progressbar_title;
547                         background: @color_popup_text_bg;
548                         width: 100%;
549                         padding-top: 22*@unit_base;
550                         padding-bottom: 16*@unit_base;
551                         p {
552                                 text-align: center;
553                         }
554                 }
555
556                 .popup-text-bottom-bg {
557                         font-size: @font_size_popup_center_progressbar_title;
558                         font-color: @color_popup_center_progressbar_title;
559                         background: @color_popup_text_bg;
560                         width: 100%;
561                         vertical-align: middle;
562
563                         .text-left {
564                                 width: 40%;
565                                 height: 40*@unit_base;
566                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
567                                 text-align: left;
568
569                                 display: inline-block;
570                         }
571                         .text-right {
572                                 width: 40%;
573                                 height: 40*@unit_base;
574                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
575                                 text-align: right;
576
577                                 display: inline-block;
578                         }
579
580                 }
581
582                 .popup-button-bg {
583                         font-size: @font_size_popup_button_text;
584                         background: @color_popup_button_bg;
585                         width: 100%;
586                         padding-top: 11*@unit_base;
587                         padding-bottom: 11*@unit_base;
588                         vertical-align: middle;
589
590                         .ui-btn {
591                                 width: 402*@unit_base;
592                                 height: 74*@unit_base;
593                                 margin:auto;
594
595                         }
596                 }
597
598                 .popup-progress-bg {
599                         background: @color_popup_text_bg;
600                         width: 100%;
601                         height: 100%;
602                 }
603         }
604         .ui-btn{
605                 .LESSpopup_button_style;
606         }
607         .ui-btn.ui-btn-hover-s{
608                 .LESSpopup_button_hover_style;
609         }
610         .ui-btn.ui-btn-down-s{
611                 .LESSpopup_button_press_style;
612         }
613 }
614 .ui-popupwindow > .ui-volumecontrol {
615
616         display: table;
617         margin: auto;
618         background: rgba(0, 0, 0, 0.666667);
619         width: 416*@unit_base;
620         height: 676*@unit_base;
621         padding-top: 22*@unit_base;
622
623         h1 {
624                 font-size: @font_size_popup_info_style;
625                 display: table;
626                 margin: auto;
627                 color: #c0c0c0;
628         }
629
630         .ui-volumecontrol-icon {
631                 display: table;
632                 width: 100%;
633                 height: 128*@unit_base;
634                 padding-top: 21*@unit_base;
635                 padding-bottom: 21*@unit_base;
636                 padding-left: 165*@unit_base;
637                 padding-right: 165*@unit_base;
638         }
639
640         .ui-volumecontrol-indicator {
641                 display: table;
642                 width: 100%;
643                 height: 420*@unit_base;
644                 padding-left: 68*@unit_base;
645                 padding-right: 68*@unit_base;
646         }
647
648         .ui-corner-all {
649                 -moz-border-radius: 0.3em !important;
650                 -webkit-border-radius: 0.3em !important;
651                 border-radius: 0.3em !important;
652         }
653 }
654
655 .ui-popupwindow-corner-all {
656         -moz-border-radius: 0em !important;
657         -webkit-border-radius: 0em !important;
658         border-radius: 0em !important;
659 }