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