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