src/themes/tizen/common/jquery.mobile.listview.less

   1 /*
   2 * jQuery Mobile Framework
   3 * Copyright (c) jQuery Project
   4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
   5 */
   6
   7 /*** less definitions ***/
   8
   9 @import "config.less";
  10
  11 /* Using font size */
  12 @list-font-size-main:   44 * @unit_base;
  13 @list-font-size-sub:    32 * @unit_base;
  14 @list-font-size-divider: 32 * @unit_base;       // NOTE: defined in dialogue group
  15
  16 /*
  17 @list-dialogue-font-size-main:  38 * @unit_base;
  18 @list-dialogue-font-size-sub:   32 * @unit_base;
  19 */
  20
  21 @list-font-weight:              normal;
  22
  23 /*
  24 @list-li-height: 112 * @unit_base;
  25
  26 @list-li-2line-height: 128 * @unit_base;
  27 @list-li-3line-height: 160 * @unit_base;
  28 @list-li-top-padding: 10 * @unit_base;
  29 @list-li-main-line-height: 60 * @unit_base;
  30 @list-li-sub-line-height: 48 * @unit_base;
  31 */
  32 @list-smallicon-size: 32 * @unit_base;
  33 @list-li-padding-horizontal: 16 * @unit_base;
  34 /*
  35 @list-li-divider-height: 32 * @unit_base;
  36
  37 */
  38 @list-bigicon-size: 64 * @unit_base;
  39 @list-bigicon-size2: 72 * @unit_base;
  40 /*
  41 @list-checkbox-size: 42 * @unit_base;
  42 @list-progressbar-height: 16 * @unit_base;
  43 */
  44
  45
  46 // Bubble
  47 @list-li-bubble-font-size: 38 * @unit_base;
  48 @list-li-bubble-time-font-size: 26 * @unit_base;
  49 @list-li-bubble-date-font-size: @list-li-bubble-time-font-size;
  50 @list-li-bubble-corner-radius: 9 * @unit_base;  // TODO: fit to 9px (picked from bg images)
  51
  52 @list-li-sub-left-width: 187 * @unit_base;
  53 @list-li-main-right-padding: 187 * @unit_base;
  54
  55 //Email
  56 @list-li-email-top-padding: 8 * @unit_base;
  57 @list-li-email-subline-top-padding: 4 * @unit_base;
  58 @list-li-email-sub-line-height: 40 * @unit_base;
  59 @list-email-icon-width: 56 * @unit_base;
  60 @list-email-icon-height: 60 * @unit_base;
  61
  62 @list-email-icon-top-padding: 16 * @unit_base;
  63 @list-email-attach-icon-width: 40 * @unit_base;
  64 @list-email-attach-icon-height: 40 * @unit_base;
  65 @list-email-warning-icon-width: 30 * @unit_base;
  66 @list-email-warning-icon-height: 30 * @unit_base;
  67 @list-email-text-padding-left: 60 * @unit_base;
  68
  69 /************************/
  70
  71 .ui-listview {
  72         margin: 0;
  73         counter-reset: listnumbering;
  74         border-top-width: 1px;
  75         border-top-style: solid;
  76
  77         li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
  78                 padding-right: 0 * @unit_base;  // Clear default button padding-right
  79         }
  80
  81         &> .ui-li {
  82                 // list item separator line
  83                 border-bottom-width: 1px;
  84                 border-bottom-style: solid;
  85
  86                 border-top-width: 0px;
  87         }
  88
  89         &> .ui-li:not(.ui-li-divider) {
  90                 &:not(.ui-li-static) {
  91                         min-height : 112 * @unit_base;
  92                 }
  93         }
  94
  95         &> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
  96                 &:not(.ui-li-static) {
  97                         min-height : 128 * @unit_base;
  98                 }
  99         }
 100 }
 101
 102 .ui-content {
 103         .ui-listview {
 104                 margin: -16 * @unit_base;
 105                 padding-bottom: 1px;
 106
 107                 .ui-listview {
 108                         margin: 0;
 109                 }
 110
 111         }
 112         .ui-listview-inset {
 113                 margin: 1em 0;
 114         }
 115 }
 116 .ui-listview,
 117 .ui-li {
 118         list-style:none;
 119         padding:0;
 120
 121         font-size : @list-font-size-main;
 122
 123 }
 124 .ui-li,
 125 .ui-li.ui-field-contain {
 126         display: block;
 127         margin:0;
 128         position: relative;
 129         overflow: visible;
 130         text-align: left;
 131 }
 132 .ui-li {
 133
 134         h3 {
 135                 margin-top      : 0px;
 136                 margin-bottom : 0px;
 137
 138                 font-size : @list-font-size-main;
 139                 min-height      : 52 * @unit_base;
 140                 font-weight : normal;
 141         }
 142         .ui-btn {
 143                 top: 50%;
 144                 margin-top: -0.8em;
 145         }
 146         .ui-btn-text {
 147                 position: relative;
 148                 a.ui-link-inherit {
 149                         text-overflow: ellipsis;
 150                         overflow: hidden;
 151                         white-space: nowrap;
 152                 }
 153         }
 154         &:last-child,
 155         &.ui-field-contain:last-child {
 156                 border-bottom-width: 1px;
 157         }
 158         &>.ui-btn-inner {
 159                 display: block;
 160                 position: relative;
 161                 padding: 0;
 162                 border-width:0;
 163         }
 164
 165         &>.ui-btn-inner.ui-btn-hastxt {
 166                 padding: 0px 0px;
 167
 168         }
 169
 170         .ui-btn-inner a.ui-link-inherit,
 171         &.ui-li-static {
 172                 padding-top : 30 * @unit_base;
 173                 padding-bottom : 30 * @unit_base;
 174                 padding-left : 16 * @unit_base;
 175                 padding-right : 16 * @unit_base;
 176                 display: block;
 177         }
 178
 179         .ui-toggleswitch {
 180                 &:last-child {
 181                         top : 50%;
 182                         margin-top : -40 * @unit_base;
 183
 184                         display : inline-block;
 185                         position : absolute;
 186
 187                         right : 16 * @unit_base;
 188                 }
 189         }
 190
 191         [data-role="button"] {
 192                 &:last-child {
 193                         position : absolute;
 194                         right : 16 * @unit_base;
 195                 }
 196         }
 197
 198         .ui-radio,
 199         .ui-checkbox {
 200                 &:first-child{
 201                         position : absolute;
 202                         top      : 50%;
 203                         margin-top : -30 * @unit_base;
 204
 205                         left : 16 * @unit_base;
 206
 207                         width : 60 * @unit_base;
 208                         height : 60 * @unit_base;
 209
 210                         .ui-btn-inner {
 211                                 padding : 10 * @unit_base 10 * @unit_base 10 * @unit_base 10 * @unit_base;
 212                                 line-height : 40 * @unit_base;
 213
 214                                 color : transparent;
 215
 216                                 .ui-icon {
 217                                         left : 5 * @unit_base;
 218                                 }
 219                         }
 220                 }
 221         }
 222
 223         img.ui-li-bigicon {
 224                 position : absolute;
 225
 226                 top : 50%;
 227                 margin-top : -36 * @unit_base;
 228
 229                 &:first-child {
 230                         left : 16 * @unit_base;
 231                 }
 232
 233                 &:nth-child(2) {
 234                         left : 92 * @unit_base;
 235                 }
 236
 237                 &:last-child {
 238                         right : 16 * @unit_base;
 239                 }
 240         }
 241
 242         .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
 243                 left : 16 * @unit_base;
 244         }
 245
 246         .ui-li-color-bar {
 247                 position : absolute;
 248                 width  : 12 * @unit_base;
 249                 height : 20 * @unit_base;
 250
 251                 top : 0 * @unit_base;
 252                 left : 0 * @unit_base;
 253
 254                 background-color : rgba(0, 0, 0, 1);
 255         }
 256 }
 257
 258 li.ui-li-thumbnail-right {
 259         img.ui-li-bigicon.ui-li-thumb {
 260                 left : auto;
 261                 right : 16 * @unit_base;
 262         }
 263 }
 264
 265 .ui-li.ui-li-has-multiline {
 266         .ui-btn-inner a.ui-link-inherit,
 267         &.ui-li-static {
 268                 padding-top : 10 * @unit_base;
 269                 padding-bottom : 58 * @unit_base;
 270 /*              padding-left : 16 * @unit_base;
 271                 padding-right : 16 * @unit_base;
 272                 display: block;*/
 273
 274                 min-height : 60 * @unit_base;
 275         }
 276 }
 277
 278
 279 /********************************************/
 280 /*************** Divider ********************/
 281 /********************************************/
 282 .ui-li-divider {
 283         cursor: default;
 284
 285         counter-reset: listnumbering;
 286         font-weight: bold;
 287         font-size: @list-font-size-divider;
 288         padding-left: 16 * @unit_base;
 289         padding-top: 8 * @unit_base;
 290         padding-bottom: 8 * @unit_base;
 291 }
 292
 293 .ui-listview .ui-li-divider {
 294         &[data-style="dialogue"] {
 295                 height: 32 * @unit_base;
 296                 padding : 0px;
 297
 298                 .LESSdialogue-divider;
 299                 background : @color_bg;
 300         }
 301
 302         &[data-style="check"] {
 303                 height: 60 * @unit_base;
 304                 padding-top : 0px;
 305                 padding-bottom : 0px;
 306
 307                 padding-left : 92 * @unit_base;
 308                 line-height : 60 * @unit_base;
 309         }
 310
 311         &[data-style="checkexpandable"] {
 312                 height: 60 * @unit_base;
 313                 padding-top : 0px;
 314                 padding-bottom : 0px;
 315
 316                 padding-left : 92 * @unit_base;
 317                 line-height : 60 * @unit_base;
 318         }
 319
 320         &[data-style="expandable"] {
 321                 height: 60 * @unit_base;
 322                 padding-top : 0px;
 323                 padding-bottom : 0px;
 324
 325                 line-height : 60 * @unit_base;
 326         }
 327 }
 328
 329 .ui-divider-expand-div {
 330         position : absolute;
 331
 332         width : 98 * @unit_base;
 333         height : 42 * @unit_base;
 334         top : 10 * @unit_base;
 335         right : 0px;
 336
 337         border-left-width : 1px;
 338         border-left-style : solid;
 339         border-left-color : rgba(42, 137, 194, 0.5);
 340
 341
 342 }
 343
 344
 345 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
 346         .ui-btn-inner a.ui-link-inherit,
 347         &.ui-li-static  {
 348                 min-height: 60 * @unit_base;
 349                 padding-left: 104 * @unit_base;
 350         }
 351         .ui-li-text-sub {
 352                 padding-left: 104 * @unit_base;
 353         }
 354 }
 355
 356 .ui-li-has-checkbox,
 357 .ui-li-has-radio{
 358         .ui-btn-inner a.ui-link-inherit,
 359         &.ui-li-static  {
 360                 min-height: 60 * @unit_base;
 361                 padding-left: 92 * @unit_base;
 362         }
 363         .ui-li-text-sub {
 364                 padding-left: 92 * @unit_base;
 365         }
 366 }
 367
 368 .ui-li-has-thumb.ui-li-has-checkbox,
 369 .ui-li-has-thumb.ui-li-has-radio {
 370         .ui-btn-inner a.ui-link-inherit,
 371         &.ui-li-static  {
 372                 min-height: 60 * @unit_base;
 373                 padding-left: 180 * @unit_base;
 374         }
 375
 376         .ui-li-text-sub {
 377                 padding-left: 180 * @unit_base;
 378         }
 379 }
 380
 381 .ui-li-has-icon {
 382         .ui-btn-inner a.ui-link-inherit,
 383         &.ui-li-static {
 384                 min-height: 20px;
 385                 padding-left: 40px;
 386         }
 387         .ui-li-text-sub {
 388                 padding-left: 40px;
 389         }
 390 }
 391
 392 .ui-li-heading {
 393         font-size: 16px;
 394         font-weight: bold;
 395         display: block;
 396         margin: .6em 0;
 397         text-overflow: ellipsis;
 398         overflow: hidden;
 399         white-space: nowrap;
 400 }
 401
 402 .ui-li-thumb,
 403 .ui-li-icon {
 404         position: absolute;
 405         left: 1px;
 406         top: 0;
 407         max-height: @list-bigicon-size2;
 408         max-width: @list-bigicon-size2;
 409 }
 410
 411 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 412         border-top: 0px;
 413 }
 414
 415 .ui-li-sub,
 416 .ui-li-sub-setting {
 417         float: right;
 418         text-align: right;
 419         font-size: @font_size_list_sub_text;
 420         margin: .3em 0;
 421 }
 422
 423 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 424 /* ~~~~~~~~~~~~~~              NEW   LIST   STYLE                   ~~~~~~~~~ */
 425 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 426 .ui-li-text-sub {
 427         float: right;
 428         text-align: right;
 429         font-size: @font_size_list_sub_text;
 430         color: @color_list_sub_text_default;
 431 /*      top: 50%;
 432         margin-top: -0.5em;*/
 433
 434         position : absolute;
 435         right : 16 * @unit_base;
 436         top : 16 * @unit_base;
 437                 > img {
 438                         position : relative;
 439                         width: @list-smallicon-size;
 440                         height: @list-smallicon-size;
 441                         margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
 442                 }
 443 }
 444
 445 .ui-li-text-sub2 {
 446         float: right;
 447         text-align: right;
 448         font-size: @font_size_list_sub_text;
 449         color: @color_list_sub_text_default;
 450
 451         position : absolute;
 452         right : 16 * @unit_base;
 453         top : 16 * @unit_base;
 454
 455                 > img {
 456                         width: @list-smallicon-size;
 457                         height: @list-smallicon-size;
 458                         margin: 0 0 0 @list-li-padding-horizontal;
 459                 }
 460 }
 461 /*
 462 li:not(.ui-li-has-multiline) .ui-li-text-sub {
 463         position : absolute;
 464
 465         right : 16 * @unit_base;
 466         top: 22 * @unit_base;
 467         margin-top: 0px;
 468 }*/
 469 .ui-li-has-multiline .ui-li-text-sub {
 470         position : absolute;
 471
 472         right : auto;
 473         left : 16 * @unit_base;
 474         top: 70 * @unit_base;
 475         margin-top: 0px;
 476
 477 }
 478
 479 .ui-li-icon-sub-right,
 480 .ui-li-icon-sub {
 481         position: absolute;
 482         left: auto;
 483         width: @list-smallicon-size;
 484         height: @list-smallicon-size;
 485         margin: 0 0;
 486 }
 487 .ui-li-icon-sub-right {
 488         right : 16 * @unit_base;
 489 }
 490
 491
 492
 493 // =========
 494 // Dialogue
 495 // =========
 496 .ui-listview {
 497         &> li.ui-li-dialogue {
 498                 margin-left: @style_list_li_dialogue_margin_left;
 499                 margin-right : @style_list_li_dialogue_margin_left;
 500                 border-left: @style_list_li_dialogue_border_left_width @color_dialogue_editor_border solid;
 501                 //margin-left: @style_list_li_dialogue_margin_left;
 502                 border-top-width: 0px;
 503
 504                 .LESSdialogue-border-style;
 505         }
 506
 507         &> li.ui-li-dialogue.ui-body-s,
 508         &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
 509         &> li.ui-li-dialogue.ui-btn-up-s {
 510                 &:not(.ui-li-expanded){
 511                         background : @color_list_dialogue_bg;
 512                 }
 513         }
 514
 515         &> li.ui-li-dialogue.ui-li-divider {
 516                 height: 32 * @unit_base;
 517                 padding : 0px;
 518         }
 519
 520         &> li.ui-li-group-title {
 521                 padding-top : 32 * @unit_base;
 522         }
 523
 524         &> li.ui-li-group-title span {
 525                 padding-left : 16 * @unit_base;
 526         }
 527         &> li.ui-li-dialogue-divider {
 528                 .LESSdialogue-divider;
 529         }
 530 }
 531
 532 // =========
 533 // bubble li
 534 // =========
 535 .ui-listview {
 536         .ui-li-bubble-left,
 537                 .ui-li-bubble-right,
 538                 .ui-li-bubble-sos {
 539                 img {
 540                         position: relative;
 541                         min-width: 160 * @unit_base;
 542                         min-height: 160 * @unit_base;
 543                 }
 544         }
 545         .ui-li-bubble-left {
 546                 word-wrap: break-word;
 547                 .LESSborder-radius-topright(@list-li-bubble-corner-radius);
 548                 .LESSborder-radius-bottomright(@list-li-bubble-corner-radius);
 549                 font-size: @list-li-bubble-font-size;
 550                 p, span {
 551                         font-size: @list-li-bubble-font-size;
 552                 }
 553                 //margin: 12px 20% 12px 0%;
 554                 margin-top: 12 * @unit_base;
 555                 margin-bottom: 12 * @unit_base;
 556                 margin-left: 0;
 557                 margin-right: auto;
 558                 max-width: 80%;
 559                 min-width: 30%;
 560                 padding: 16px 22px 16px 16px;
 561         }
 562         .ui-li-bubble-right {
 563                 word-wrap: break-word;
 564                 .LESSborder-radius-topleft(@list-li-bubble-corner-radius);
 565                 .LESSborder-radius-bottomleft(@list-li-bubble-corner-radius);
 566                 margin: 12px 0% 12px 20%;
 567                 padding: 16px 16px 16px 22px;
 568         }
 569         .ui-li-bubble-sos {
 570         }
 571         .ui-li-bubble-date {
 572                 height: 40 * @unit_base;
 573                 font-size: @list-li-bubble-date-font-size;
 574                 margin: 12px 0%;        // no horizontal margin
 575                 padding: 0% 16px;
 576                 padding-top: 15px;
 577                 text-align: @style_list_bubble_date_text_align;
 578         }
 579         span.ui-li-bubble-time {
 580                 margin-left: 12px;
 581                 font-size: @list-li-bubble-time-font-size;
 582                 display: inline-block;
 583         }
 584 }
 585
 586 // Expandable list animation
 587
 588 @-webkit-keyframes ui-expand-show {
 589         from {
 590                 -webkit-transform-origin: 0% 0%;
 591                 -webkit-transform: rotateX(90deg) skewX(30deg) translateZ(0);
 592         } to {
 593                 -webkit-transform-origin: 0% 0%;
 594                 -webkit-transform: rotateX(0deg) skewX(0deg) translateZ(0);
 595         }
 596 }
 597 .ui-listview {
 598         .ui-li-expandable {
 599         }
 600         .ui-li-expandable-shown {
 601                 // Down arrow
 602                 .LESSimg-expanded-icon;
 603         }
 604         .ui-li-expandable-hidden {
 605                 // Right arrow
 606                 .LESSimg-expand-icon;
 607         }
 608         .ui-li-expanded {
 609                 overflow: hidden;
 610         }
 611         .ui-li-expand-transition-show {
 612                 visibility: visible;
 613                 -webkit-animation: ui-expand-show 0.4s 1 ease-out;
 614         }
 615         .ui-li-expand-transition-hide {
 616                 visibility: hidden;
 617                 height: 0px !important;
 618                 min-height: 0px !important;
 619                 padding-top: 0px;
 620                 padding-bottom: 0px;
 621                 border: 0px;
 622                 -webkit-transition: all 0.2s ease;
 623                 -moz-transition: all 0.2s ease;
 624                 -o-transition: all 0.2s ease;
 625                 transition: all 0.2s ease;
 626         }
 627 }
 628
 629
 630 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 631         .ui-li-expand-icon {
 632                 background-image: url(images/00_button_expand_closed.png);
 633                 background-size: 100%;
 634                 position: absolute;
 635                 top: 50%;
 636                 width: 64 * @unit_base;
 637                 height: 64 * @unit_base;
 638                 margin-top: -(@size/2);
 639                 right: 16 * @unit_base;
 640         }
 641 }
 642
 643 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 644         .ui-li-expanded-icon {
 645                 background-image: url(images/00_button_expand_opened.png);
 646                 background-size: 100%;
 647                 position: absolute;
 648                 top: 50%;
 649                 width: 64 * @unit_base;
 650                 height: 64 * @unit_base;
 651                 margin-top: -(@size/2);
 652                 right: 16 * @unit_base;
 653         }
 654 }