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.7;
  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-container {
  30         position: absolute;
  31         width: @popup-ratio;
  32         color: @color_popup_font;
  33         z-index: (@z_base_popup + 1) !important;
  34         background:             @color_popup_text_bg;
  35
  36         .ui-body-s {
  37                 background: none;
  38         }
  39
  40         // --------- common style in popup  ------------- //
  41         .ui-popup-title {
  42                 width: 100%;
  43                 height: 100%;
  44                 font-size: @font_size_popup_basic_style_title;
  45                 background: @color_popup_title_bg;
  46         }
  47
  48         p.ui-popup-title {
  49                 color: @color_popup_font;
  50                 margin: 0*@unit_base 0*@unit_base;
  51                 padding: 13*@unit_base 0*@unit_base;
  52         }
  53
  54         .ui-popup-text {
  55                 margin-top: @popup-text-padding-vert;
  56                 margin-bottom: @popup-text-padding-vert;
  57                 color: @color_popup_text_font;
  58                 font-size: @font_size_popup_info_style;
  59                 background: @color_popup_text_bg;
  60                 text-align: center;
  61         }
  62
  63         // ----------------------------------------------------- //
  64
  65         .center_info {
  66
  67                 .LESSdisplaybox();
  68                 .LESSbox-orient(vertical);
  69                 .LESSbox-align(center);
  70                 .LESSbox-pack(center);
  71
  72                 // .ui-popup-text
  73         }
  74
  75         .center_title {
  76                 .LESSdisplaybox();
  77                 .LESSbox-orient(vertical);
  78                 .LESSbox-align(center);
  79                 .LESSbox-pack(center);
  80
  81             text-align: center;
  82
  83                 // .ui-popup-title
  84                 // .ui-popup-text
  85         }
  86
  87         .center_basic_1btn {
  88
  89                 .LESSdisplaybox();
  90                 .LESSbox-orient(vertical);
  91                 .LESSbox-align(center);
  92                 .LESSbox-pack(center);
  93
  94             text-align: center;
  95
  96                 // .ui-popup-text
  97
  98                 .ui-popup-button-bg {
  99                         font-size: @font_size_popup_button_text;
 100                         background: @color_popup_button_bg;
 101                         width: 100%;
 102                         padding-top: 11*@unit_base;
 103                         padding-bottom: 11*@unit_base;
 104                         vertical-align: middle;
 105
 106                         .ui-btn {
 107                                 width: 402*@unit_base;
 108                                 height: 74*@unit_base;
 109                                 margin:auto;
 110
 111                         }
 112                 }
 113         }
 114         .center_basic_2btn {
 115
 116                 .LESSdisplaybox();
 117                 .LESSbox-orient(vertical);
 118                 .LESSbox-align(center);
 119                 .LESSbox-pack(center);
 120
 121             text-align: center;
 122
 123                 // .ui-popup-text
 124
 125                 .ui-popup-button-bg {
 126                         font-size: @font_size_popup_button_text;
 127                         background: @color_popup_button_bg;
 128                         width: 100%;
 129                         padding-top: 11*@unit_base;
 130                         padding-bottom: 11*@unit_base;
 131                         vertical-align: middle;
 132
 133                         .ui-btn {
 134                                 width: 274*@unit_base;
 135                                 height: 74*@unit_base;
 136                                 margin-top: 0*@unit_base;
 137                                 margin-bottom: 0*@unit_base;
 138                                 margin-left: 5*@unit_base;
 139                                 margin-right: 5*@unit_base;
 140
 141                                 display: inline-block;
 142                         }
 143                 }
 144         }
 145         .center_basic_3btn {
 146
 147                 .LESSdisplaybox();
 148                 .LESSbox-orient(vertical);
 149                 .LESSbox-align(center);
 150                 .LESSbox-pack(center);
 151
 152             text-align: center;
 153
 154                 // .ui-popup-text
 155
 156                 .ui-popup-button-bg {
 157                         font-size: @font_size_popup_button_text;
 158                         background: @color_popup_button_bg;
 159                         width: 100%;
 160                         padding-top: 11*@unit_base;
 161                         padding-bottom: 11*@unit_base;
 162                         vertical-align: middle;
 163
 164                         .ui-btn {
 165                                 width: 186*@unit_base;
 166                                 height: 74*@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_title_1btn {
 177
 178                 .LESSdisplaybox();
 179                 .LESSbox-orient(vertical);
 180                 .LESSbox-align(center);
 181                 .LESSbox-pack(center);
 182
 183                 text-align: center;
 184
 185                 // .ui-popup-title
 186                 // .ui-popup-text
 187
 188                 .ui-popup-button-bg {
 189                         font-size: @font_size_popup_button_text;
 190                         background: @color_popup_button_bg;
 191                         width: 100%;
 192                         padding-top: 11*@unit_base;
 193                         padding-bottom: 11*@unit_base;
 194                         vertical-align: middle;
 195
 196                         .ui-btn {
 197                                 width: 402*@unit_base;
 198                                 height: 74*@unit_base;
 199                                 margin:auto;
 200
 201                         }
 202                 }
 203         }
 204         .center_title_2btn {
 205
 206                 .LESSdisplaybox();
 207                 .LESSbox-orient(vertical);
 208                 .LESSbox-align(center);
 209                 .LESSbox-pack(center);
 210
 211                 text-align: center;
 212
 213                 // .ui-popup-title
 214                 // .ui-popup-text
 215
 216                 .ui-popup-button-bg {
 217                         font-size: @font_size_popup_button_text;
 218                         background: @color_popup_button_bg;
 219                         width: 100%;
 220                         padding-top: 11*@unit_base;
 221                         padding-bottom: 11*@unit_base;
 222                         vertical-align: middle;
 223
 224                         .ui-btn {
 225                                 width: 274*@unit_base;
 226                                 height: 74*@unit_base;
 227                                 margin-top: 0*@unit_base;
 228                                 margin-bottom: 0*@unit_base;
 229                                 margin-left: 5*@unit_base;
 230                                 margin-right: 5*@unit_base;
 231
 232                                 display: inline-block;
 233                         }
 234                 }
 235         }
 236         .center_title_3btn {
 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: 186*@unit_base;
 258                                 height: 74*@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
 264                                 display: inline-block;
 265                         }
 266                 }
 267         }
 268         .center_button_vertical {
 269
 270                 .LESSdisplaybox();
 271                 .LESSbox-orient(vertical);
 272                 .LESSbox-align(center);
 273                 .LESSbox-pack(center);
 274
 275             text-align: center;
 276
 277                 // .ui-popup-text
 278
 279                 .ui-popup-button-bg {
 280                         font-size: @font_size_popup_button_text;
 281                         background: @color_popup_button_bg;
 282                         width: 100%;
 283                         padding-top: 1px;
 284                         padding-bottom: 16*@unit_base;
 285                         vertical-align: middle;
 286
 287                         .ui-btn {
 288                                 width: 356*@unit_base;
 289                                 height: 74*@unit_base;
 290                                 margin-top: 16*@unit_base;
 291                                 margin-bottom: 0*@unit_base;
 292                                 margin-left: auto;
 293                                 margin-right: auto;
 294                         }
 295                 }
 296         }
 297         .center_checkbox {
 298
 299                 .LESSdisplaybox();
 300                 .LESSbox-orient(vertical);
 301                 .LESSbox-align(center);
 302                 .LESSbox-pack(center);
 303
 304             text-align: center;
 305
 306                 // .ui-popup-text
 307
 308                 .ui-popup-check-bg {
 309                         font-size: @font_size_popup_info_style;
 310                         background: @color_popup_text_bg;
 311                         width: 100%;
 312                         padding-top: 0*@unit_base;
 313                         padding-bottom: 22*@unit_base;
 314                         vertical-align: middle;
 315
 316                         .ui-checkbox {
 317                                 .ui-btn {
 318                                         text-align: center;
 319                                         background: @color_popup_text_bg;
 320                                         border: 0*@unit_base;
 321
 322                                         .ui-btn-inner {
 323                                                 border: 0*@unit_base;
 324                                         }
 325                                 }
 326                         }
 327                 }
 328
 329                 .ui-popup-button-bg {
 330                         font-size: @font_size_popup_button_text;
 331                         background: @color_popup_button_bg;
 332                         width: 100%;
 333                         padding-top: 11*@unit_base;
 334                         padding-bottom: 11*@unit_base;
 335                         vertical-align: middle;
 336
 337                         .ui-btn {
 338                                 width: 274*@unit_base;
 339                                 height: 74*@unit_base;
 340                                 margin-top: 0*@unit_base;
 341                                 margin-bottom: 0*@unit_base;
 342                                 margin-left: 5*@unit_base;
 343                                 margin-right: 5*@unit_base;
 344
 345                                 display: inline-block;
 346                         }
 347                 }
 348         }
 349         .center_liststyle_1btn {
 350
 351                 .LESSdisplaybox();
 352                 .LESSbox-orient(vertical);
 353                 .LESSbox-align(center);
 354                 .LESSbox-pack(center);
 355
 356                 text-align: center;
 357
 358                 // .ui-popup-title
 359
 360                 .ui-popup-scroller-bg {
 361                         width: 100%;
 362                         overflow: hidden;
 363                         background: @color_popup_scroller_bg;
 364                         height: 512*@unit_base;
 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: 402*@unit_base;
 376                                 height: 74*@unit_base;
 377                                 margin:auto;
 378
 379                         }
 380                 }
 381         }
 382         .center_liststyle_2btn {
 383
 384                 .LESSdisplaybox();
 385                 .LESSbox-orient(vertical);
 386                 .LESSbox-align(center);
 387                 .LESSbox-pack(center);
 388
 389                 text-align: center;
 390
 391                 // .ui-popup-title
 392
 393                 .ui-popup-scroller-bg {
 394                         width: 100%;
 395                         overflow: hidden;
 396                         background: @color_popup_scroller_bg;
 397                         height: 512*@unit_base;
 398                 }
 399                 .ui-popup-button-bg {
 400                         font-size: @font_size_popup_button_text;
 401                         background: @color_popup_button_bg;
 402                         width: 100%;
 403                         padding-top: 11*@unit_base;
 404                         padding-bottom: 11*@unit_base;
 405                         vertical-align: middle;
 406
 407                         .ui-btn {
 408                                 width: 274*@unit_base;
 409                                 height: 74*@unit_base;
 410                                 margin-top: 0*@unit_base;
 411                                 margin-bottom: 0*@unit_base;
 412                                 margin-left: 5*@unit_base;
 413                                 margin-right: 5*@unit_base;
 414
 415                                 display: inline-block;
 416                         }
 417                 }
 418         }
 419         .center_liststyle_3btn {
 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: 186*@unit_base;
 446                                 height: 74*@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                 }
 455         }
 456
 457         .center_progressbar {
 458
 459                 .LESSdisplaybox();
 460                 .LESSbox-orient(vertical);
 461                 .LESSbox-align(center);
 462                 .LESSbox-pack(center);
 463
 464                 text-align: center;
 465
 466                 .ui-popup-text {
 467                         font-size: @font_size_popup_center_progressbar_title;
 468                         font-color: @color_popup_center_progressbar_title;
 469                         background: @color_popup_text_bg;
 470                         width: 100%;
 471                         height: 70*@unit_base;
 472                         p {
 473                                 height: 100%;
 474                                 text-align: center;
 475                                 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 476                         }
 477                 }
 478
 479                 .ui-popup-text-bottom-bg {
 480                         font-size: @font_size_popup_center_progressbar_title;
 481                         font-color: @color_popup_center_progressbar_title;
 482                         background: @color_popup_text_bg;
 483                         width: 100%;
 484                         vertical-align: middle;
 485
 486                         .text-left {
 487                                 width: 40%;
 488                                 height: 48*@unit_base;
 489                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 490                                 text-align: left;
 491
 492                                 display: inline-block;
 493                         }
 494                         .text-right {
 495                                 width: 40%;
 496                                 height: 48*@unit_base;
 497                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 498                                 text-align: right;
 499
 500                                 display: inline-block;
 501                         }
 502
 503                 }
 504
 505                 .ui-popup-button-bg {
 506                         font-size: @font_size_popup_button_text;
 507                         background: @color_popup_button_bg;
 508                         width: 100%;
 509                         padding-top: 11*@unit_base;
 510                         padding-bottom: 11*@unit_base;
 511                         vertical-align: middle;
 512
 513                         .ui-btn {
 514                                 width: 402*@unit_base;
 515                                 height: 74*@unit_base;
 516                                 margin:auto;
 517
 518                         }
 519                 }
 520
 521                 .ui-popup-progress-bg {
 522                         background: @color_popup_text_bg;
 523                         width: 100%;
 524                         height: 100%;
 525                 }
 526         }
 527
 528         .centertext_progressbar {
 529
 530                 .LESSdisplaybox();
 531                 .LESSbox-orient(vertical);
 532                 .LESSbox-align(center);
 533                 .LESSbox-pack(center);
 534
 535                 text-align: center;
 536
 537                 .ui-popup-text {
 538                         font-size: @font_size_popup_center_progressbar_title;
 539                         font-color: @color_popup_center_progressbar_title;
 540                         background: @color_popup_text_bg;
 541                         width: 100%;
 542                         padding-top: 22*@unit_base;
 543                         padding-bottom: 16*@unit_base;
 544                         p {
 545                                 text-align: center;
 546                         }
 547                 }
 548
 549                 .ui-popup-text-bottom-bg {
 550                         font-size: @font_size_popup_center_progressbar_title;
 551                         font-color: @color_popup_center_progressbar_title;
 552                         background: @color_popup_text_bg;
 553                         width: 100%;
 554                         vertical-align: middle;
 555
 556                         .text-left {
 557                                 width: 40%;
 558                                 height: 40*@unit_base;
 559                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 560                                 text-align: left;
 561
 562                                 display: inline-block;
 563                         }
 564                         .text-right {
 565                                 width: 40%;
 566                                 height: 40*@unit_base;
 567                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 568                                 text-align: right;
 569
 570                                 display: inline-block;
 571                         }
 572
 573                 }
 574
 575                 .ui-popup-button-bg {
 576                         font-size: @font_size_popup_button_text;
 577                         background: @color_popup_button_bg;
 578                         width: 100%;
 579                         padding-top: 11*@unit_base;
 580                         padding-bottom: 11*@unit_base;
 581                         vertical-align: middle;
 582
 583                         .ui-btn {
 584                                 width: 402*@unit_base;
 585                                 height: 74*@unit_base;
 586                                 margin:auto;
 587
 588                         }
 589                 }
 590
 591                 .ui-popup-progress-bg {
 592                         background: @color_popup_text_bg;
 593                         width: 100%;
 594                         height: 100%;
 595                 }
 596         }
 597         .ui-btn{
 598                 .LESSpopup_button_style;
 599         }
 600         .ui-btn.ui-btn-hover-s{
 601                 .LESSpopup_button_hover_style;
 602         }
 603         .ui-btn.ui-btn-down-s{
 604                 .LESSpopup_button_press_style;
 605         }
 606 }