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_title_1btn,
 109         .center_title_2btn {
 110         }
 111         .center_basic_3btn,
 112         .center_title_3btn {
 113                 .ui-btn {
 114                                 max-width: 80 * @unit_base;
 115                                 height: 37*@unit_base;
 116                                 margin-top: 0*@unit_base;
 117                                 margin-bottom: 0*@unit_base;
 118                                 margin-left: 5*@unit_base;
 119                                 margin-right: 5*@unit_base;
 120
 121                                 display: inline-block;
 122                         }
 123         }
 124
 125         .center_button_vertical {
 126                 .ui-popup-button-bg {
 127                         display : block;
 128                         height : auto;
 129                         > .ui-btn {
 130                                 display : block;
 131                                 width: 200*@unit_base;
 132                         }
 133                 }
 134         }
 135
 136         .center_checkbox {
 137                 .ui-popup-check-bg {
 138                         font-size: 20 * @unit_base;
 139                         background: @color_popup_text_bg;
 140                         width: 100%;
 141                         padding-top: 0*@unit_base;
 142                         padding-bottom: 22*@unit_base;
 143                         vertical-align: middle;
 144
 145                         .ui-checkbox {
 146                                 .ui-btn {
 147                                         text-align: center;
 148                                         background: @color_popup_text_bg;
 149                                         border: 0*@unit_base;
 150
 151                                         .ui-btn-inner {
 152                                                 border: 0*@unit_base;
 153                                         }
 154                                 }
 155                         }
 156                 }
 157
 158                 .ui-popup-button-bg {
 159                         font-size: @font_size_popup_button_text;
 160                         background: @color_popup_button_bg;
 161                         width: 100%;
 162                         padding-top: 11*@unit_base;
 163                         padding-bottom: 11*@unit_base;
 164                         vertical-align: middle;
 165
 166                         .ui-btn {
 167                                 width: 130*@unit_base;
 168                                 height: 37*@unit_base;
 169                                 margin-top: 0*@unit_base;
 170                                 margin-bottom: 0*@unit_base;
 171                                 margin-left: 5*@unit_base;
 172                                 margin-right: 5*@unit_base;
 173
 174                                 display: inline-block;
 175                         }
 176                 }
 177         }
 178         .center_liststyle_1btn {
 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         }
 191         .center_liststyle_2btn {
 192                 .ui-popup-scroller-bg {
 193                         width: 100%;
 194                         overflow: hidden;
 195                         background: @color_popup_scroller_bg;
 196                         height: 512*@unit_base;
 197                 }
 198                 .ui-popup-button-bg {
 199                         padding-top: 11*@unit_base;
 200                         padding-bottom: 11*@unit_base;
 201                         vertical-align: middle;
 202
 203                         .ui-btn {
 204                                 width: 130*@unit_base;
 205                                 height: 37*@unit_base;
 206                                 margin-top: 0*@unit_base;
 207                                 margin-bottom: 0*@unit_base;
 208                                 margin-left: 5*@unit_base;
 209                                 margin-right: 5*@unit_base;
 210
 211                                 display: inline-block;
 212
 213                                 .ui-btn-inner {
 214                                         padding-top: 5 * @unit_base;
 215                                         padding-bottom: 5 * @unit_base;
 216                                         padding-left : 20 * @unit_base;
 217                                         padding-right : 20 * @unit_base;
 218                                 }
 219                         }
 220                 }
 221         }
 222
 223         .center_title_2btn {
 224                 .ui-popup-button-bg {
 225                         .ui-btn {
 226                                 width: 130*@unit_base;
 227                         }
 228                 }
 229         }
 230
 231         .center_liststyle_3btn {
 232                 .ui-popup-scroller-bg {
 233                         width: 100%;
 234                         overflow: hidden;
 235                         background: @color_popup_scroller_bg;
 236                         height: 512*@unit_base;
 237                 }
 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                                 max-width: 80 * @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                 }
 254         }
 255
 256         .center_progressbar {
 257
 258                 text-align: center;
 259
 260                 .ui-popup-text {
 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                         height: 70*@unit_base;
 266                         p {
 267                                 height: 100%;
 268                                 text-align: center;
 269                                 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 270                         }
 271                 }
 272
 273                 .ui-popup-text-bottom-bg {
 274                         font-size: @font_size_popup_center_progressbar_title;
 275                         font-color: @color_popup_center_progressbar_title;
 276                         background: @color_popup_text_bg;
 277                         width: 100%;
 278                         vertical-align: middle;
 279
 280                         .text-left {
 281                                 width: 40%;
 282                                 height: 48*@unit_base;
 283                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 284                                 text-align: left;
 285
 286                                 display: inline-block;
 287                         }
 288                         .text-right {
 289                                 width: 40%;
 290                                 height: 48*@unit_base;
 291                                 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
 292                                 text-align: right;
 293
 294                                 display: inline-block;
 295                         }
 296
 297                 }
 298
 299                 .ui-popup-button-bg {
 300                         font-size: @font_size_popup_button_text;
 301                         background: @color_popup_button_bg;
 302                         width: 100%;
 303                         padding-top: 11*@unit_base;
 304                         padding-bottom: 11*@unit_base;
 305                         vertical-align: middle;
 306
 307                         .ui-btn {
 308                                 width: 201*@unit_base;
 309                                 height: 37*@unit_base;
 310                                 margin:auto;
 311
 312                         }
 313                 }
 314
 315                 .ui-popup-progress-bg {
 316                         background: @color_popup_text_bg;
 317                         width: 100%;
 318                         height: 100%;
 319                 }
 320         }
 321
 322         .centertext_progressbar {
 323
 324                 text-align: center;
 325
 326                 .ui-popup-text {
 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                         padding-top: 22*@unit_base;
 332                         padding-bottom: 16*@unit_base;
 333                         p {
 334                                 text-align: center;
 335                         }
 336                 }
 337
 338                 .ui-popup-text-bottom-bg {
 339                         font-size: @font_size_popup_center_progressbar_title;
 340                         font-color: @color_popup_center_progressbar_title;
 341                         background: @color_popup_text_bg;
 342                         width: 100%;
 343                         vertical-align: middle;
 344
 345                         .text-left {
 346                                 width: 40%;
 347                                 height: 40*@unit_base;
 348                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 349                                 text-align: left;
 350
 351                                 display: inline-block;
 352                         }
 353                         .text-right {
 354                                 width: 40%;
 355                                 height: 40*@unit_base;
 356                                 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
 357                                 text-align: right;
 358
 359                                 display: inline-block;
 360                         }
 361
 362                 }
 363
 364                 .ui-popup-button-bg {
 365                         font-size: @font_size_popup_button_text;
 366                         background: @color_popup_button_bg;
 367                         width: 100%;
 368                         padding-top: 11*@unit_base;
 369                         padding-bottom: 11*@unit_base;
 370                         vertical-align: middle;
 371
 372                         .ui-btn {
 373                                 width: 402*@unit_base;
 374                                 height: 37*@unit_base;
 375                                 margin:auto;
 376
 377                         }
 378                 }
 379
 380                 .ui-popup-progress-bg {
 381                         background: @color_popup_text_bg;
 382                         width: 100%;
 383                         height: 100%;
 384                 }
 385         }
 386 }