src/themes/tizen/common/jquery.mobile.tizen.popup.less

   1 @import "config.less";
   2
   3 @popup-text-padding-vert: 22 * @unit_base;
   4 @popup-text-padding-hori: 16 * @unit_base;
   5 @popup-ratio: 86.12%;
   6
   7 .ui-popup-screen {
   8     background: #000000;
   9     opacity: 0;
  10         position: absolute;
  11         top: 0;
  12         left: 0;
  13         width: 100%;
  14         height: 100%;
  15         z-index: @z_base_popup;
  16 }
  17
  18 .ui-overlay-dim {
  19         opacity: 0.7;
  20 }
  21
  22
  23 .ui-popup-scroller-bg {
  24         width : 100%;
  25 }
  26
  27 .ui-popup-container {
  28         position: absolute;
  29         width: @popup-ratio;
  30         z-index: (@z_base_popup + 1) !important;
  31         background:             @color_popup_text_bg;
  32         text-align: center;
  33         outline-color: @color_list_bg;
  34         .LESSdisplaybox();
  35         .LESSbox-orient(vertical);
  36         .LESSbox-align(center);
  37         .LESSbox-pack(center);
  38
  39         .ui-popup {
  40                 padding : 3px 2px 2px 2px;
  41                 background:             @color_popup_text_bg;
  42                 width : 100%;
  43                 > .ui-popup-title,
  44                 > .ui-popup-text,
  45                 > .ui-popup-button-bg {
  46                         width : 100%;
  47                 }
  48                 word-wrap : break-word;
  49         }
  50
  51         .ui-popup-title {
  52                 width: 100%;
  53                 height: 40 * @unit_base;
  54                 text-align : left;
  55                 color : @color_bar_title_text;
  56
  57                 font-size: @font_size_popup_basic_style_title;
  58                 font-weight : bold;
  59
  60                 h1 {
  61                         font-size: @font_size_popup_basic_style_title;
  62                         font-weight : bold;
  63                         color : @color_bar_title_text;
  64
  65                         margin : 0px;
  66                         padding-top : 10 * @unit_base;
  67                         padding-left : 16 * @unit_base;
  68                 }
  69         }
  70
  71         .ui-popup-text {
  72                 margin-top: @popup-text-padding-vert;
  73                 margin-bottom: @popup-text-padding-vert;
  74                 color: @color_popup_text_font;
  75                 font-size: 20 * @unit_base;
  76                 background: @color_popup_text_bg;
  77                 text-align: center;
  78
  79                 .ui-li .ui-radio, .ui-li .ui-checkbox {
  80                         label {
  81                                 background : transparent;
  82                         }
  83                 }
  84                 input {
  85                          display : inline-block;
  86                 }
  87         }
  88
  89         .ui-popup-button-bg {
  90                         font-size: @font_size_popup_button_text;
  91                         height : 37 * @unit_base;
  92                         padding-top: 10 * @unit_base;
  93                         padding-bottom: 10 * @unit_base;
  94                         width: 100%;
  95                         vertical-align: middle;
  96
  97                         > .ui-btn {
  98                                 display : inline-block;
  99                                 margin:auto;
 100                                 height : 37 * @unit_base;
 101                         }
 102
 103                         .ui-btn-inner {
 104                                 padding-top: 5 * @unit_base;
 105                                 padding-bottom: 5 * @unit_base;
 106                                 padding-left : 20 * @unit_base;
 107                                 padding-right : 20 * @unit_base;
 108                 }
 109         }
 110
 111
 112 /***** Normal Samples *****/
 113         .center_info,
 114         .center_title,
 115         .center_basic_1btn,
 116         .center_basic_2btn,
 117         .center_title_1btn,
 118         .center_title_2btn {
 119         }
 120         .center_basic_3btn,
 121         .center_title_3btn {
 122                 .ui-btn {
 123                                 max-width: 80 * @unit_base;
 124                                 height: 37*@unit_base;
 125                                 margin-top: 0*@unit_base;
 126                                 margin-bottom: 0*@unit_base;
 127                                 margin-left: 5*@unit_base;
 128                                 margin-right: 5*@unit_base;
 129
 130                                 display: inline-block;
 131                         }
 132         }
 133
 134         .center_button_vertical {
 135                 .ui-popup-button-bg {
 136                         display : block;
 137                         height : auto;
 138                         > .ui-btn {
 139                                 display : block;
 140                                 width: 200*@unit_base;
 141                         }
 142                 }
 143         }
 144
 145         .center_checkbox {
 146                 .ui-popup-check-bg {
 147                         font-size: 20 * @unit_base;
 148                         background: @color_popup_text_bg;
 149                         width: 100%;
 150                         padding-top: 0*@unit_base;
 151                         padding-bottom: 22*@unit_base;
 152                         vertical-align: middle;
 153
 154                         .ui-checkbox {
 155                                 .ui-btn {
 156                                         text-align: center;
 157                                         background: @color_popup_text_bg;
 158                                         border: 0*@unit_base;
 159
 160                                         .ui-btn-inner {
 161                                                 border: 0*@unit_base;
 162                                         }
 163                                 }
 164                         }
 165                 }
 166
 167                 .ui-popup-button-bg {
 168                         font-size: @font_size_popup_button_text;
 169                         background: @color_popup_button_bg;
 170                         width: 100%;
 171                         padding-top: 11*@unit_base;
 172                         padding-bottom: 11*@unit_base;
 173                         vertical-align: middle;
 174
 175                         .ui-btn {
 176                                 width: 110*@unit_base;
 177                                 height: 37*@unit_base;
 178                                 margin-top: 0*@unit_base;
 179                                 margin-bottom: 0*@unit_base;
 180                                 margin-left: 5*@unit_base;
 181                                 margin-right: 5*@unit_base;
 182
 183                                 display: inline-block;
 184                         }
 185                 }
 186         }
 187         .center_liststyle_1btn {
 188                 .ui-popup-scroller-bg {
 189                         width: 100%;
 190                         overflow: hidden;
 191                         background: @color_popup_scroller_bg;
 192                         height: 256 * @unit_base;
 193                 }
 194                 .ui-popup-button-bg {
 195                         padding-top: 11*@unit_base;
 196                         padding-bottom: 11*@unit_base;
 197                         vertical-align: middle;
 198                 }
 199         }
 200         .center_liststyle_2btn {
 201                 .ui-popup-scroller-bg {
 202                         width: 100%;
 203                         overflow: hidden;
 204                         background: @color_popup_scroller_bg;
 205                         height: 256 * @unit_base;
 206                 }
 207                 .ui-popup-button-bg {
 208                         padding-top: 11*@unit_base;
 209                         padding-bottom: 11*@unit_base;
 210                         vertical-align: middle;
 211
 212                         .ui-btn {
 213                                 width: 110*@unit_base;
 214                                 height: 37*@unit_base;
 215                                 margin-top: 0*@unit_base;
 216                                 margin-bottom: 0*@unit_base;
 217                                 margin-left: 5*@unit_base;
 218                                 margin-right: 5*@unit_base;
 219
 220                                 display: inline-block;
 221
 222                                 .ui-btn-inner {
 223                                         padding-top: 5 * @unit_base;
 224                                         padding-bottom: 5 * @unit_base;
 225                                         padding-left : 20 * @unit_base;
 226                                         padding-right : 20 * @unit_base;
 227                                 }
 228                         }
 229                 }
 230         }
 231
 232         .center_title_2btn {
 233                 .ui-popup-button-bg {
 234                         padding-top: 11*@unit_base;
 235                         padding-bottom: 11*@unit_base;
 236                         vertical-align: middle;
 237
 238                         .ui-btn {
 239                                 width: 120*@unit_base;
 240                                 height: 37*@unit_base;
 241                                 margin-top: 0*@unit_base;
 242                                 margin-bottom: 0*@unit_base;
 243                                 margin-left: 5*@unit_base;
 244                                 margin-right: 5*@unit_base;
 245
 246                                 display: inline-block;
 247
 248                                 .ui-btn-inner {
 249                                         padding-top: 5 * @unit_base;
 250                                         padding-bottom: 5 * @unit_base;
 251                                         padding-left : 20 * @unit_base;
 252                                         padding-right : 20 * @unit_base;
 253                                 }
 254                         }
 255                 }
 256         }
 257
 258         .center_liststyle_3btn {
 259                 .ui-popup-scroller-bg {
 260                         width: 100%;
 261                         overflow: hidden;
 262                         background: @color_popup_scroller_bg;
 263                         height: 256 * @unit_base;
 264                 }
 265                 .ui-popup-button-bg {
 266                         padding-top: 11*@unit_base;
 267                         padding-bottom: 11*@unit_base;
 268                         vertical-align: middle;
 269
 270                         .ui-btn {
 271                                 max-width: 80 * @unit_base;
 272                                 height: 37 * @unit_base;
 273                                 margin-top: 0 * @unit_base;
 274                                 margin-bottom: 0 * @unit_base;
 275                                 margin-left: 5 * @unit_base;
 276                                 margin-right: 5 * @unit_base;
 277
 278                                 display: inline-block;
 279                         }
 280                 }
 281         }
 282
 283         .center_progressbar {
 284
 285                 text-align: center;
 286
 287                 .ui-popup-text {
 288                         font-size: @font_size_popup_center_progressbar_title;
 289                         font-color: @color_popup_center_progressbar_title;
 290                         background: @color_popup_text_bg;
 291                         width: 100%;
 292                         height: 70*@unit_base;
 293                         p {
 294                                 height: 100%;
 295                                 text-align: center;
 296                                 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 297                         }
 298                 }
 299
 300                 .ui-popup-text-bottom-bg {
 301                         font-size: @font_size_popup_center_progressbar_title;
 302                         font-color: @color_popup_center_progressbar_title;
 303                         background: @color_popup_text_bg;
 304                         width: 100%;
 305                         vertical-align: middle;
 306
 307                         .text-left {
 308                                 width: 40%;
 309                                 height: 48*@unit_base;
 310                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 311                                 text-align: left;
 312
 313                                 display: inline-block;
 314                         }
 315                         .text-right {
 316                                 width: 40%;
 317                                 height: 48*@unit_base;
 318                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 319                                 text-align: right;
 320
 321                                 display: inline-block;
 322                         }
 323
 324                 }
 325
 326                 .ui-popup-button-bg {
 327                         font-size: @font_size_popup_button_text;
 328                         background: @color_popup_button_bg;
 329                         width: 100%;
 330                         padding-top: 11*@unit_base;
 331                         padding-bottom: 11*@unit_base;
 332                         vertical-align: middle;
 333
 334                         .ui-btn {
 335                                 width: 201*@unit_base;
 336                                 height: 37*@unit_base;
 337                                 margin:auto;
 338
 339                         }
 340                 }
 341
 342                 .ui-popup-progress-bg {
 343                         background: @color_popup_text_bg;
 344                         width: 100%;
 345                         height: 100%;
 346                 }
 347         }
 348
 349         .centertext_progressbar {
 350
 351                 text-align: center;
 352
 353                 .ui-popup-text {
 354                         font-size: @font_size_popup_center_progressbar_title;
 355                         font-color: @color_popup_center_progressbar_title;
 356                         background: @color_popup_text_bg;
 357                         width: 100%;
 358                         padding-top: 22*@unit_base;
 359                         padding-bottom: 16*@unit_base;
 360                         p {
 361                                 text-align: center;
 362                         }
 363                 }
 364
 365                 .ui-popup-text-bottom-bg {
 366                         font-size: @font_size_popup_center_progressbar_title;
 367                         font-color: @color_popup_center_progressbar_title;
 368                         background: @color_popup_text_bg;
 369                         width: 100%;
 370                         vertical-align: middle;
 371
 372                         .text-left {
 373                                 width: 40%;
 374                                 height: 40*@unit_base;
 375                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 376                                 text-align: left;
 377
 378                                 display: inline-block;
 379                         }
 380                         .text-right {
 381                                 width: 40%;
 382                                 height: 40*@unit_base;
 383                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 384                                 text-align: right;
 385
 386                                 display: inline-block;
 387                         }
 388
 389                 }
 390
 391                 .ui-popup-button-bg {
 392                         font-size: @font_size_popup_button_text;
 393                         background: @color_popup_button_bg;
 394                         width: 100%;
 395                         padding-top: 11*@unit_base;
 396                         padding-bottom: 11*@unit_base;
 397                         vertical-align: middle;
 398
 399                         .ui-btn {
 400                                 width: 402*@unit_base;
 401                                 height: 37*@unit_base;
 402                                 margin:auto;
 403
 404                         }
 405                 }
 406
 407                 .ui-popup-progress-bg {
 408                         background: @color_popup_text_bg;
 409                         width: 100%;
 410                         height: 100%;
 411                 }
 412         }
 413 }