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