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