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:   22 * @unit_base;
  13 @list-font-size-sub:    16 * @unit_base;
  14 @list-font-size-divider: 16 * @unit_base;       // NOTE: defined in dialogue group
  15
  16 @list-font-weight:              normal;
  17
  18 @list-smallicon-size: 17 * @unit_base;
  19 @list-li-padding-horizontal: 8 * @unit_base;
  20
  21 @list-bigicon-size: 64 * @unit_base;
  22 @list-bigicon-size2: 72 * @unit_base;
  23
  24 // Bubble
  25 @list-li-bubble-font-size: 19 * @unit_base;
  26 @list-li-bubble-time-font-size: 11 * @unit_base;
  27 @list-li-bubble-date-font-size: 16 * @unit_base;
  28
  29 @list-li-sub-left-width: 187 * @unit_base;
  30 @list-li-main-right-padding: 187 * @unit_base;
  31
  32 //Email
  33 @list-li-email-top-padding: 8 * @unit_base;
  34 @list-li-email-subline-top-padding: 4 * @unit_base;
  35 @list-li-email-sub-line-height: 40 * @unit_base;
  36 @list-email-icon-width: 56 * @unit_base;
  37 @list-email-icon-height: 60 * @unit_base;
  38
  39 @list-email-icon-top-padding: 16 * @unit_base;
  40 @list-email-attach-icon-width: 40 * @unit_base;
  41 @list-email-attach-icon-height: 40 * @unit_base;
  42 @list-email-warning-icon-width: 30 * @unit_base;
  43 @list-email-warning-icon-height: 30 * @unit_base;
  44 @list-email-text-padding-left: 60 * @unit_base;
  45
  46 /************************/
  47
  48 .ui-listview {
  49         margin: 0;
  50         counter-reset: listnumbering;
  51
  52         border-top-color: @color_list_border_bottom;
  53
  54         li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
  55                 padding-right: 0 * @unit_base;  // Clear default button padding-right
  56         }
  57
  58         &> .ui-li {
  59                 border-left-width : 0px;
  60                 border-right-width : 0px;
  61
  62                 border-top-width: 0px;
  63
  64                 > .ui-btn-inner {
  65                         border-bottom-width: 1px;
  66                         border-bottom-style: solid;
  67                         border-bottom-color: @color_list_border_bottom;
  68                         margin-left : 13 * @unit_base;
  69                         margin-right : 13 * @unit_base;
  70                 }
  71         }
  72
  73         & > .ui-li-static {
  74                 background-color: @color_bg;
  75
  76                 border-bottom-width: 1px;
  77                 border-bottom-style: solid;
  78                 border-bottom-color: @color_list_border_bottom;
  79                 margin-left : 13 * @unit_base;
  80                 margin-right : 13 * @unit_base;
  81         }
  82
  83
  84         &> .ui-li:not(.ui-li-divider) {
  85                 &:not(.ui-li-static) {
  86                         min-height : 55 * @unit_base;
  87                 }
  88         }
  89
  90         &> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
  91                 &:not(.ui-li-static) {
  92                         min-height : 64 * @unit_base;
  93                 }
  94         }
  95
  96         li.ui-btn-up-s, li.ui-btn-hover-s {
  97                 background: none;
  98                 background-color: @color_bg;
  99                 color:          @color_text;
 100         }
 101         li.ui-btn-down-s {
 102                 background: none;
 103                 background-color: @color_list_press;
 104                 color:          @color_text;
 105         }
 106         /* listview: fonts for li with a link */
 107         li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
 108         li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
 109                 color:          @color_list_main_text_unfocus;
 110         }
 111
 112         li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
 113                 color:          @color_list_main_text_focus;
 114         }
 115 }
 116
 117 .ui-content {
 118         .ui-listview {
 119                 margin-left: -16 * @unit_base;
 120                 margin-right: -16 * @unit_base;
 121                 padding-bottom: 1px;
 122
 123                 .ui-listview {
 124                         margin: 0;
 125                 }
 126         }
 127         .ui-listview-inset {
 128                 margin: 1em 0;
 129         }
 130 }
 131 .ui-listview,
 132 .ui-li {
 133         list-style:none;
 134         padding:0;
 135
 136         font-size : @list-font-size-main;
 137 }
 138 .ui-li,
 139 .ui-li.ui-field-contain {
 140         display: block;
 141         margin:0;
 142         position: relative;
 143         overflow: visible;
 144         text-align: left;
 145 }
 146 .ui-li {
 147         h3 {
 148                 margin-top      : 0px;
 149                 margin-bottom : 0px;
 150
 151                 font-size : @list-font-size-main;
 152                 font-weight : normal;
 153         }
 154
 155         form {
 156                 display : inline-block;
 157         }
 158         .ui-btn {
 159                 top: 50%;
 160                 margin-top: -0.8em;
 161         }
 162         .ui-btn-text {
 163                 position: relative;
 164                 a.ui-link-inherit {
 165                         .LESStext-ellipsis();
 166                 }
 167         }
 168         &:last-child,
 169         &.ui-field-contain:last-child {
 170                 border-bottom-width: 1px;
 171         }
 172         &>.ui-btn-inner {
 173                 display: block;
 174                 position: relative;
 175                 padding: 0;
 176                 border-width:0;
 177         }
 178
 179         &>.ui-btn-inner.ui-btn-hastxt {
 180                 padding: 0px 0px;
 181         }
 182
 183         .ui-btn-inner a.ui-link-inherit,
 184         &.ui-li-static {
 185                 padding-top : 15 * @unit_base;
 186                 padding-bottom : 15 * @unit_base;
 187                 display: block;
 188
 189                 white-space: normal;    // default: 1line
 190
 191                 border-left-width       : 0px;
 192                 border-right-width : 0px;
 193         }
 194
 195         .ui-btn-inner a.ui-link-inherit {
 196                 .LESStext-no-ellipsis();
 197         }
 198
 199         .ui-toggleswitch {
 200                 &:last-child {
 201                         top : 50%;
 202                         margin-top : -20 * @unit_base;
 203
 204                         display : inline-block;
 205                         position : absolute;
 206
 207                         right : 0px;
 208                 }
 209         }
 210         .ui-toggleswitch.ui-toggleswitch-image-style {
 211                 &:last-child {
 212                         margin-top : -17 * @unit_base;
 213
 214                         right : 0px;
 215                 }
 216         }
 217
 218         [data-role="button"] {
 219                 &:last-child {
 220                         position : absolute;
 221                         right : 0px;
 222                 }
 223         }
 224
 225         .ui-radio,
 226         .ui-checkbox {
 227                 &:first-child{
 228                         position : absolute;
 229                         top      : 50%;
 230                         margin-top : -15 * @unit_base;
 231
 232                         left : -4 * @unit_base;
 233
 234                         width : 30 * @unit_base;
 235                         height : 30 * @unit_base;
 236
 237                         .ui-btn-inner {
 238                                 line-height : 20 * @unit_base;
 239
 240                                 color : transparent;
 241
 242                                 .ui-icon {
 243                                         left : 5 * @unit_base;
 244                                 }
 245                         }
 246
 247                         label.ui-btn-icon_only {
 248                                 top : 0px;
 249                                 margin-top : 0px;
 250                         }
 251                 }
 252         }
 253
 254         img.ui-li-bigicon {
 255                 position : absolute;
 256
 257                 width : 35 * @unit_base;
 258                 height : 35 * @unit_base;
 259
 260                 top : 50%;
 261                 margin-top : -18 * @unit_base;
 262
 263                 &:first-child {
 264                         left : 0px;
 265                 }
 266
 267                 &:nth-child(2) {
 268                         left : 36 * @unit_base;
 269                 }
 270
 271                 &:last-child {
 272                         right : 16 * @unit_base;
 273                 }
 274         }
 275
 276         .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
 277                 left : 0px;
 278         }
 279
 280         .ui-li-color-bar {
 281                 position : absolute;
 282                 width  : 3 * @unit_base;
 283                 height : 65 * @unit_base;
 284
 285                 top : 0 * @unit_base;
 286                 left : -13 * @unit_base;
 287
 288                 background-color : rgba(0, 0, 0, 1);
 289         }
 290 }
 291
 292 li.ui-li-thumbnail-right {
 293         img.ui-li-bigicon.ui-li-thumb {
 294                 left : auto;
 295                 right : 0px;
 296
 297                 width : 51 * @unit_base;
 298                 height : 51 * @unit_base;
 299
 300                 margin-top : -25 * @unit_base;
 301         }
 302 }
 303
 304 .ui-li.ui-li-has-multiline {
 305         .ui-btn-inner a.ui-link-inherit,
 306         &.ui-li-static {
 307                 padding-top : 7 * @unit_base;
 308                 padding-bottom : 28 * @unit_base;
 309         }
 310
 311         a {
 312                 .LESStext-no-ellipsis();
 313                 padding-right : 16 * @unit_base; /* ellipsis for normal text */
 314         }
 315 }
 316
 317 /********************************************/
 318 /************  Add ellipsis *****************/
 319 /********************************************/
 320 .ui-li.ui-li-text-ellipsis {
 321         .ui-btn-inner a.ui-link-inherit {
 322                 .LESStext-ellipsis();
 323         }
 324
 325         a {
 326                 .LESStext-ellipsis();
 327         }
 328
 329         &.ui-li-static {
 330                 .LESStext-ellipsis();
 331         }
 332 }
 333
 334 /********************************************/
 335 /*************** Edit Field *****************/
 336 /********************************************/
 337 .ui-li {
 338         > input {
 339                 border-style : none;
 340                 border-width : 0px;
 341
 342                 outline-color : @color_list_bg;
 343                 font-size : 23 * @unit_base;
 344                 line-height : 1;
 345
 346                 padding-top : 0px;
 347                 padding-bottom : 0px;
 348         }
 349 }
 350
 351 /********************************************/
 352 /*************** Divider ********************/
 353 /********************************************/
 354
 355 .ui-listview li.ui-li-divider {
 356         background: @color_list_divider_bg;
 357         color:          @color_list_divider_text;
 358
 359         border-bottom-width : 0px;
 360         border-top-width : 0px;
 361
 362         cursor: default;
 363
 364         counter-reset: listnumbering;
 365         font-weight: bold;
 366
 367         height: 38 * @unit_base;
 368
 369         font-size : @list-font-size-divider;
 370         &>.ui-btn-inner>.ui-btn-text {  // For buttonMarkup-ed dividers
 371                 font-size : @list-font-size-divider;
 372         }
 373
 374         &.ui-btn {
 375                 top : 0px;
 376                 margin-top: 0 * @unit_base;
 377                 border-radius : 0px;
 378
 379                 font-size : @list-font-size-divider;
 380                 .ui-btn-inner.ui-btn-hastxt {
 381                         height : 100%;
 382                         padding-left : 0px;
 383                         .ui-btn-text {
 384                                 position : absolute;
 385
 386                                 top : 5 * @unit_base;
 387                                 height : 18 * @unit_base;
 388                                 padding-right : 10 * @unit_base;
 389                         }
 390                 }
 391         }
 392
 393         &:not(.ui-btn) {
 394                 margin-left : 12 * @unit_base;
 395                 margin-right : 12 * @unit_base;
 396         }
 397
 398         &>.ui-btn-text {
 399                 position : absolute;
 400
 401                 top : 5 * @unit_base;
 402                 height : 18 * @unit_base;
 403                 padding-right : 10 * @unit_base;
 404         }
 405
 406         &[data-style="dialogue"] {
 407                 height: 20 * @unit_base;
 408                 padding : 0px;
 409
 410                 padding-top : 20 * @unit_base;
 411                 padding-bottom : 0 * @unit_base;
 412                 padding-left : 10 * @unit_base;
 413
 414                 margin-left : 4 * @unit_base;
 415                 margin-right : 4 * @unit_base;
 416
 417
 418                 font-size : 16 * @unit_base;
 419                 font-weight : bold;
 420                 color : @color_dialogue_main_text;
 421                 background : @color_list_bg;
 422         }
 423
 424         &[data-style="check"] {
 425                 height: 38 * @unit_base;
 426                 padding-top : 0px;
 427                 padding-bottom : 0px;
 428
 429                 padding-left : 0px;
 430
 431                 label {
 432                         top : 0px;
 433                         margin : 0;
 434
 435                         .ui-btn-inner {
 436                                 z-index : 5;
 437                                 position : absolute;
 438                                 width : 32 * @unit_base;
 439                                 height : 32 * @unit_base;
 440                                 background : @color_list_bg;
 441                                 padding : 0;
 442                         }
 443                 }
 444                 .ui-btn-text {
 445                         padding-left : 37 * @unit_base;
 446                 }
 447         }
 448
 449         .ui-divider-normal-line {
 450                 display : inline-block;
 451                 position : absolute;
 452
 453                 top : 23 * @unit_base;
 454                 width : 100%;
 455                 height : 2 * @unit_base;
 456
 457                 background : @color_list_divider_text;
 458         }
 459
 460         &.ui-btn-down-s {
 461                 background : @color_list_divider_text;
 462                 color : @color_list_bg;
 463
 464                 .ui-divider-normal-line {
 465                         background : @color_list_bg;
 466                 }
 467
 468                 label {
 469                         > .ui-btn-inner {
 470                         background : @color_list_divider_text;
 471                         }
 472                 }
 473         }
 474
 475         + li.ui-li-dialogue {
 476                 border-top-left-radius : 3px;
 477                 border-top-right-radius : 3px;
 478         }
 479 }
 480
 481 .ui-divider-expand-div {
 482         position : absolute;
 483
 484         width : 98 * @unit_base;
 485         height : 42 * @unit_base;
 486         top : 10 * @unit_base;
 487         right : 0px;
 488
 489         border-left-width : 1px;
 490         border-left-style : solid;
 491         border-left-color : @color_list_divider_expand_div;
 492 }
 493
 494 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
 495         .ui-btn-inner a.ui-link-inherit,
 496         &.ui-li-static  {
 497                 padding-left: 45 * @unit_base;
 498         }
 499         .ui-li-text-sub {
 500                 padding-left: 45 * @unit_base;
 501                 padding-right: 0px; /* ellipsis for sub text */
 502         }
 503 }
 504
 505 .ui-li-has-checkbox,
 506 .ui-li-has-radio{
 507         .ui-btn-inner a.ui-link-inherit,
 508         &.ui-li-static  {
 509                 padding-left: 36 * @unit_base;
 510         }
 511         .ui-li-text-sub {
 512                 padding-left: 36 * @unit_base;
 513         }
 514 }
 515
 516 .ui-li-has-thumb.ui-li-has-checkbox,
 517 .ui-li-has-thumb.ui-li-has-radio {
 518         .ui-btn-inner a.ui-link-inherit,
 519         &.ui-li-static  {
 520                 padding-left: 78 * @unit_base;
 521         }
 522
 523         .ui-li-text-sub {
 524                 padding-left: 78 * @unit_base;
 525         }
 526 }
 527
 528 .ui-li.ui-li-has-right-circle-btn {
 529         .ui-btn-inner a {
 530                 padding-right : 48 * @unit_base;
 531         }
 532 }
 533
 534 .ui-li.ui-li-has-right-btn:not(.ui-swipelist-item) {
 535         .ui-btn-inner a {
 536                 padding-right : 79 * @unit_base;
 537         }
 538 }
 539
 540 .ui-li.ui-li-thumbnail-right {
 541         .ui-btn-inner a {
 542                 padding-right : 52 * @unit_base;
 543         }
 544 }
 545 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
 546         padding-right : 48 * @unit_base;
 547 }
 548
 549 .ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipelist-item) {
 550         padding-right : 79 * @unit_base;
 551 }
 552
 553 .ui-li.ui-li-static.ui-li-thumbnail-right {
 554         padding-right : 52 * @unit_base;
 555 }
 556
 557 .ui-li-has-icon {
 558         .ui-btn-inner a.ui-link-inherit,
 559         &.ui-li-static {
 560                 min-height: 20px;
 561                 padding-left: 40px;
 562         }
 563         .ui-li-text-sub {
 564                 padding-left: 40px;
 565         }
 566 }
 567
 568 .ui-li-heading {
 569         font-size: 16px;
 570         font-weight: bold;
 571         display: block;
 572         margin: .6em 0;
 573         .LESStext-ellipsis();
 574 }
 575
 576 .ui-li-thumb,
 577 .ui-li-icon {
 578         position: absolute;
 579         left: 1px;
 580         top: 0;
 581         max-height: @list-bigicon-size2;
 582         max-width: @list-bigicon-size2;
 583 }
 584
 585 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 586         border-top: 0px;
 587 }
 588
 589 .ui-li-sub,
 590 .ui-li-sub-setting {
 591         float: right;
 592         text-align: right;
 593         font-size: 16 * @unit_base;
 594         margin: .3em 0;
 595 }
 596
 597 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 598 /* ~~~~~~~~~~~~~~              NEW   LIST   STYLE                   ~~~~~~~~~ */
 599 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 600 .ui-li-text-sub {
 601         float: right;
 602         text-align: right;
 603         font-size: 16 * @unit_base;
 604         color: @color_list_sub_text_default;
 605
 606         position : absolute;
 607         right : 0px;
 608         top : 20 * @unit_base;
 609
 610         width   : 95%;
 611         .LESStext-ellipsis();
 612
 613         > img {
 614                 position : relative;
 615                 width: @list-smallicon-size;
 616                 height: @list-smallicon-size;
 617                 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
 618         }
 619 }
 620
 621 .ui-li-text-sub2 {
 622         float: right;
 623         text-align: right;
 624         font-size: 16 * @unit_base;
 625         color: @color_list_sub_text_default;
 626
 627         position : absolute;
 628         right : 0px;
 629         top : 16 * @unit_base;
 630
 631         width : 60%;
 632         .LESStext-ellipsis();
 633
 634         > img {
 635                 width: @list-smallicon-size;
 636                 height: @list-smallicon-size;
 637                 margin: 0 0 0 @list-li-padding-horizontal;
 638         }
 639 }
 640 /*
 641 li:not(.ui-li-has-multiline) .ui-li-text-sub {
 642         position : absolute;
 643         right : 16 * @unit_base;
 644         top: 22 * @unit_base;
 645         margin-top: 0px;
 646 }*/
 647
 648 .ui-li-has-multiline .ui-li-text-sub {
 649         position : absolute;
 650
 651         text-align: left;
 652         right : auto;
 653         left : 0px;
 654         top: 35 * @unit_base;
 655         margin-top: 0px;
 656
 657         width : 90%;
 658         .LESStext-ellipsis();
 659 }
 660
 661 .ui-li-has-multiline.ui-li-has-right-btn {
 662         .ui-btn-inner a {
 663                 .ui-li-text-sub {
 664                         width : 74%;
 665                 }
 666         }
 667 }
 668
 669 .ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
 670         .ui-btn-inner a {
 671                 .ui-li-text-sub {
 672                         width : 64%;
 673                 }
 674         }
 675 }
 676
 677 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
 678         .ui-li-text-sub {
 679                 width : 74%;
 680         }
 681 }
 682
 683 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
 684         .ui-li-text-sub {
 685                 width : 64%;
 686         }
 687 }
 688
 689 .ui-li-icon-sub-right,
 690 .ui-li-icon-sub {
 691         position: absolute;
 692         left: auto;
 693         width: @list-smallicon-size;
 694         height: @list-smallicon-size;
 695         margin: 0 0;
 696 }
 697 .ui-li-icon-sub-right {
 698         right : 8 * @unit_base;
 699 }
 700
 701
 702
 703 // =========
 704 // Dialogue
 705 // =========
 706 .ui-listview {
 707         &> li.ui-li-dialogue {
 708                 margin-left: 4 * @unit_base;
 709                 margin-right : 4 * @unit_base;
 710                 padding-left : 10 * @unit_base;
 711                 padding-right : 10 * @unit_base;
 712
 713                 border-style : solid;
 714                 border-color : @color_dialogue_border_right;
 715                 border-width : 1px;
 716
 717                 > .ui-btn-inner {
 718                         margin-left : 0px;
 719                         margin-right : 0px;
 720
 721                 }
 722
 723                 &:first-child {
 724                         border-top-width : 1px;
 725                         border-top-left-radius : 3px;
 726                         border-top-right-radius : 3px;
 727                 }
 728                 &:last-child {
 729                         border-bottom-left-radius : 3px;
 730                         border-bottom-right-radius : 3px;
 731                 }
 732
 733                 > img {
 734                         margin-left : 6 * @unit_base;
 735                 }
 736
 737                 [data-role="button"]:last-child {
 738                         margin-right : 10 * @unit_base;
 739                 }
 740         }
 741
 742         &> li.ui-li-dialogue.ui-body-s,
 743         &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
 744         &> li.ui-li-dialogue.ui-btn-up-s {
 745                 &:not(.ui-li-expanded){
 746                         background : @color_list_dialogue_bg;
 747                 }
 748         }
 749         &> li.ui-li-dialogue.ui-li-expanded {
 750                 padding-left : 26 * @unit_base;
 751                 background : @color_list_expanded_bg;
 752         }
 753
 754         &> li.ui-li-dialogue.ui-li-divider {
 755                 height: 32 * @unit_base;
 756                 padding : 0px;
 757         }
 758
 759         &> li.ui-li-group-title {
 760                 padding-top : 32 * @unit_base;
 761         }
 762
 763         &> li.ui-li-group-title span {
 764                 padding-left : 16 * @unit_base;
 765         }
 766
 767         &> li.ui-li-dialogue-divider {
 768                 padding-top : 20 * @unit_base;
 769                 padding-bottom : 0 * @unit_base;
 770                 padding-left : 10 * @unit_base;
 771
 772                 margin-left : 4 * @unit_base;
 773                 margin-right : 4 * @unit_base;
 774
 775                 background : @color_list_dialogue_bg;
 776                 font-size : 16 * @unit_base;
 777                 font-weight : bold;
 778                 color : @color_dialogue_main_text;
 779         }
 780 }
 781
 782 // =========
 783 // bubble li
 784 // =========
 785 .ui-listview {
 786         .ui-li-static {
 787                 &.ui-li-bubble-receive,
 788                 &.ui-li-bubble-left {
 789                         color: @color_list_bubble_receive_text;
 790                         > .ui-li-bubble-time {
 791                                 color: @color_list_bubble_time_receive_text;
 792                         }
 793                 }
 794                 &.ui-li-bubble-sent,
 795                 &.ui-li-bubble-right {
 796                         color: @color_list_bubble_sent_text;
 797                         > .ui-li-bubble-time {
 798                                 color: @color_list_bubble_time_sent_text;
 799                         }
 800                 }
 801                 &.ui-li-bubble-sos {
 802                         color: @color_list_bubble_sos_text;
 803                         > .ui-li-bubble-time {
 804                                 color: @color_list_bubble_time_sos_text;
 805                         }
 806                 }
 807                 &.ui-li-bubble-date {
 808                         background-color: @color_list_bubble_date_bg;
 809                         color: @color_list_bubble_date_text;
 810                         font-style: italic;
 811                 }
 812         }
 813
 814         span.ui-li-bubble-time {
 815                 font-weight: bold;
 816         }
 817         // Common
 818         .ui-li-bubble-receive,
 819         .ui-li-bubble-left,
 820         .ui-li-bubble-sent,
 821         .ui-li-bubble-right,
 822         .ui-li-bubble-sos {
 823                 display: inline-block;
 824                 background-clip: padding-box;
 825                 max-width: 80%;
 826                 word-wrap: break-word;
 827                 font-size: @list-li-bubble-font-size;
 828                 p, span {
 829                         font-size: @list-li-bubble-font-size;
 830                 }
 831                 img {
 832                         position: relative;
 833                         min-width: 160 * @unit_base;
 834                         min-height: 160 * @unit_base;
 835                 }
 836         }
 837         .ui-li-bubble-receive,
 838         .ui-li-bubble-left {
 839                 //float: left;
 840                 margin-left: 0px;
 841                 margin-right: auto;
 842                 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
 843                 border-image-slice: 57 14 21 48 fill;
 844                 border-image-width: auto;
 845                 padding: 9px 14px 21px 48px;
 846
 847                 > .ui-li-bubble-time {
 848                         position: absolute;
 849                         display: inline-block;
 850                         bottom: 8 * @unit_base;
 851                         left: 100%;
 852                         font-size: @list-li-bubble-time-font-size;
 853                 }
 854         }
 855         .ui-li-bubble-sent,
 856         .ui-li-bubble-right {
 857                 //float: right;
 858                 margin-left: auto;
 859                 margin-right: 0px;
 860                 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
 861                 border-image-slice: 55 47 20 13 fill;
 862                 border-image-width: auto;
 863                 padding: 9px 47px 20px 13px;
 864
 865                 > .ui-li-bubble-time {
 866                         position: absolute;
 867                         display: inline-block;
 868                         bottom: 8 * @unit_base;
 869                         right: 100%;
 870                         font-size: @list-li-bubble-time-font-size;
 871                 }
 872         }
 873         .ui-li-bubble-date {
 874                 float: left;
 875                 width: 100%;
 876                 height: 24 * @unit_base;
 877                 background-image: url(images/00_messagebubble_date_bg.png);
 878                 background-repeat: repeat-x;
 879                 background-position: center center;
 880                 font-size: @list-li-bubble-date-font-size;
 881                 margin: 20 * @unit_base 6 * @unit_base;
 882                 border: 0px none red;
 883                 padding: 0 0;
 884                 padding-top: 0.5em;     // vertical text alignment to center
 885                 text-align: center;
 886                 & * {
 887                         display: inline-block;
 888                         background-color: @color_bg;
 889                         padding-left: 0.5em;
 890                         padding-right: 0.5em;
 891                 }
 892         }
 893 }
 894
 895 // Expandable list animation
 896 .ui-listview {
 897         &> .ui-li-expanded {
 898                 background-color: @color_list_expandable_expanded_bg;
 899         }
 900         &> .ui-li-expanded .ui-li-expanded {    // 3rd~ more depth
 901                 background-color: @color_list_expandable_expanded_bg;
 902         }
 903         .ui-li-expandable-shown {
 904                 // Down arrow
 905                 .LESSimg-expanded-icon;
 906         }
 907         .ui-li-expandable-hidden {
 908                 // Right arrow
 909                 .LESSimg-expand-icon;
 910         }
 911         .ui-li-expanded {
 912                 overflow-x: hidden;
 913         }
 914         .ui-li-expand-transition-show {
 915                 visibility: visible;
 916                 -webkit-transition: all 0.2s ease;
 917                 -moz-transition: all 0.2s ease;
 918                 -o-transition: all 0.2s ease;
 919                 -ms-transition: all 0.2s ease;
 920                 transition: all 0.2s ease;
 921         }
 922         .ui-li-expand-transition-hide {
 923                 visibility: hidden;
 924                 height: 0px !important;
 925                 min-height: 0px !important;
 926                 padding-top: 0px;
 927                 padding-bottom: 0px;
 928                 border-top: 0px !important;
 929                 border-bottom: 0px !important;
 930                 -webkit-transition: all 0.2s ease;
 931                 -moz-transition: all 0.2s ease;
 932                 -o-transition: all 0.2s ease;
 933                 -ms-transition: all 0.2s ease;
 934                 transition: all 0.2s ease;
 935         }
 936 }
 937
 938
 939 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
 940         .ui-li-expand-icon {
 941                 background-image: url(images/00_button_expand_closed.png);
 942                 background-size: 100%;
 943                 position: absolute;
 944                 top: 50%;
 945                 width: 37 * @unit_base;
 946                 height: 37 * @unit_base;
 947                 margin-top: -(@size/2);
 948                 right: 18 * @unit_base;
 949         }
 950 }
 951
 952 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
 953         .ui-li-expanded-icon {
 954                 background-image: url(images/00_button_expand_opened.png);
 955                 background-size: 100%;
 956                 position: absolute;
 957                 top: 50%;
 958                 width: 37 * @unit_base;
 959                 height: 37 * @unit_base;
 960                 margin-top: -(@size/2);
 961                 right: 18 * @unit_base;
 962         }
 963 }