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