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         &[data-style="dialogue"] {
 394                 height: 20 * @unit_base;
 395                 padding : 0px;
 396
 397                 padding-top : 20 * @unit_base;
 398                 padding-bottom : 0 * @unit_base;
 399                 padding-left : 10 * @unit_base;
 400
 401                 margin-left : 4 * @unit_base;
 402                 margin-right : 4 * @unit_base;
 403
 404
 405                 font-size : 16 * @unit_base;
 406                 font-weight : bold;
 407                 color : @color_dialogue_main_text;
 408                 background : @color_list_bg;
 409         }
 410
 411         &[data-style="check"] {
 412                 height: 38 * @unit_base;
 413                 padding-top : 0px;
 414                 padding-bottom : 0px;
 415
 416                 padding-left : 0px;
 417
 418                 label {
 419                         top : 0px;
 420                         margin : 0;
 421
 422                         .ui-btn-inner {
 423                                 z-index : 5;
 424                                 position : absolute;
 425                                 width : 32 * @unit_base;
 426                                 height : 32 * @unit_base;
 427                                 background : @color_list_bg;
 428                                 padding : 0;
 429                         }
 430                 }
 431                 .ui-btn-text {
 432                         padding-left : 37 * @unit_base;
 433                 }
 434         }
 435
 436         .ui-divider-normal-line {
 437                 display : inline-block;
 438                 position : absolute;
 439
 440                 top : 23 * @unit_base;
 441                 width : 100%;
 442                 height : 2 * @unit_base;
 443
 444                 background : @color_list_divider_text;
 445         }
 446
 447         &.ui-btn-down-s {
 448                 background : @color_list_divider_text;
 449                 color : @color_list_bg;
 450
 451                 .ui-divider-normal-line {
 452                         background : @color_list_bg;
 453                 }
 454
 455                 label {
 456                         > .ui-btn-inner {
 457                         background : @color_list_divider_text;
 458                         }
 459                 }
 460         }
 461
 462         + li.ui-li-dialogue {
 463                 border-top-left-radius : 3px;
 464                 border-top-right-radius : 3px;
 465         }
 466 }
 467
 468 .ui-divider-expand-div {
 469         position : absolute;
 470
 471         width : 98 * @unit_base;
 472         height : 42 * @unit_base;
 473         top : 10 * @unit_base;
 474         right : 0px;
 475
 476         border-left-width : 1px;
 477         border-left-style : solid;
 478         border-left-color : @color_list_divider_expand_div;
 479 }
 480
 481 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
 482         .ui-btn-inner a.ui-link-inherit,
 483         &.ui-li-static  {
 484                 padding-left: 45 * @unit_base;
 485         }
 486         .ui-li-text-sub {
 487                 padding-left: 45 * @unit_base;
 488                 padding-right: 0px; /* ellipsis for sub text */
 489         }
 490 }
 491
 492 .ui-li-has-checkbox,
 493 .ui-li-has-radio{
 494         .ui-btn-inner a.ui-link-inherit,
 495         &.ui-li-static  {
 496                 padding-left: 36 * @unit_base;
 497         }
 498         .ui-li-text-sub {
 499                 padding-left: 36 * @unit_base;
 500         }
 501 }
 502
 503 .ui-li-has-thumb.ui-li-has-checkbox,
 504 .ui-li-has-thumb.ui-li-has-radio {
 505         .ui-btn-inner a.ui-link-inherit,
 506         &.ui-li-static  {
 507                 padding-left: 78 * @unit_base;
 508         }
 509
 510         .ui-li-text-sub {
 511                 padding-left: 78 * @unit_base;
 512         }
 513 }
 514
 515 .ui-li.ui-li-has-right-circle-btn {
 516         .ui-btn-inner a {
 517                 padding-right : 48 * @unit_base;
 518         }
 519 }
 520
 521 .ui-li.ui-li-has-right-btn:not(.ui-swipelist-item) {
 522         .ui-btn-inner a {
 523                 padding-right : 79 * @unit_base;
 524         }
 525 }
 526
 527 .ui-li.ui-li-thumbnail-right {
 528         .ui-btn-inner a {
 529                 padding-right : 52 * @unit_base;
 530         }
 531 }
 532 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
 533         padding-right : 48 * @unit_base;
 534 }
 535
 536 .ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipelist-item) {
 537         padding-right : 79 * @unit_base;
 538 }
 539
 540 .ui-li.ui-li-static.ui-li-thumbnail-right {
 541         padding-right : 52 * @unit_base;
 542 }
 543
 544 .ui-li-has-icon {
 545         .ui-btn-inner a.ui-link-inherit,
 546         &.ui-li-static {
 547                 min-height: 20px;
 548                 padding-left: 40px;
 549         }
 550         .ui-li-text-sub {
 551                 padding-left: 40px;
 552         }
 553 }
 554
 555 .ui-li-heading {
 556         font-size: 16px;
 557         font-weight: bold;
 558         display: block;
 559         margin: .6em 0;
 560         .LESStext-ellipsis();
 561 }
 562
 563 .ui-li-thumb,
 564 .ui-li-icon {
 565         position: absolute;
 566         left: 1px;
 567         top: 0;
 568         max-height: @list-bigicon-size2;
 569         max-width: @list-bigicon-size2;
 570 }
 571
 572 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 573         border-top: 0px;
 574 }
 575
 576 .ui-li-sub,
 577 .ui-li-sub-setting {
 578         float: right;
 579         text-align: right;
 580         font-size: 16 * @unit_base;
 581         margin: .3em 0;
 582 }
 583
 584 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 585 /* ~~~~~~~~~~~~~~              NEW   LIST   STYLE                   ~~~~~~~~~ */
 586 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 587 .ui-li-text-sub {
 588         float: right;
 589         text-align: right;
 590         font-size: 16 * @unit_base;
 591         color: @color_list_sub_text_default;
 592
 593         position : absolute;
 594         right : 0px;
 595         top : 20 * @unit_base;
 596
 597         width   : 95%;
 598         .LESStext-ellipsis();
 599
 600         > img {
 601                 position : relative;
 602                 width: @list-smallicon-size;
 603                 height: @list-smallicon-size;
 604                 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
 605         }
 606 }
 607
 608 .ui-li-text-sub2 {
 609         float: right;
 610         text-align: right;
 611         font-size: 16 * @unit_base;
 612         color: @color_list_sub_text_default;
 613
 614         position : absolute;
 615         right : 0px;
 616         top : 16 * @unit_base;
 617
 618         width : 60%;
 619         .LESStext-ellipsis();
 620
 621         > img {
 622                 width: @list-smallicon-size;
 623                 height: @list-smallicon-size;
 624                 margin: 0 0 0 @list-li-padding-horizontal;
 625         }
 626 }
 627 /*
 628 li:not(.ui-li-has-multiline) .ui-li-text-sub {
 629         position : absolute;
 630         right : 16 * @unit_base;
 631         top: 22 * @unit_base;
 632         margin-top: 0px;
 633 }*/
 634
 635 .ui-li-has-multiline .ui-li-text-sub {
 636         position : absolute;
 637
 638         text-align: left;
 639         right : auto;
 640         left : 0px;
 641         top: 35 * @unit_base;
 642         margin-top: 0px;
 643
 644         width : 90%;
 645         .LESStext-ellipsis();
 646 }
 647
 648 .ui-li-has-multiline.ui-li-has-right-btn {
 649         .ui-btn-inner a {
 650                 .ui-li-text-sub {
 651                         width : 74%;
 652                 }
 653         }
 654 }
 655
 656 .ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
 657         .ui-btn-inner a {
 658                 .ui-li-text-sub {
 659                         width : 64%;
 660                 }
 661         }
 662 }
 663
 664 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
 665         .ui-li-text-sub {
 666                 width : 74%;
 667         }
 668 }
 669
 670 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
 671         .ui-li-text-sub {
 672                 width : 64%;
 673         }
 674 }
 675
 676 .ui-li-icon-sub-right,
 677 .ui-li-icon-sub {
 678         position: absolute;
 679         left: auto;
 680         width: @list-smallicon-size;
 681         height: @list-smallicon-size;
 682         margin: 0 0;
 683 }
 684 .ui-li-icon-sub-right {
 685         right : 8 * @unit_base;
 686 }
 687
 688
 689
 690 // =========
 691 // Dialogue
 692 // =========
 693 .ui-listview {
 694         &> li.ui-li-dialogue {
 695                 margin-left: 4 * @unit_base;
 696                 margin-right : 4 * @unit_base;
 697                 padding-left : 10 * @unit_base;
 698                 padding-right : 10 * @unit_base;
 699
 700                 border-style : solid;
 701                 border-color : @color_dialogue_border_right;
 702                 border-width : 1px;
 703
 704                 > .ui-btn-inner {
 705                         margin-left : 0px;
 706                         margin-right : 0px;
 707
 708                 }
 709
 710                 &:first-child {
 711                         border-top-width : 1px;
 712                         border-top-left-radius : 3px;
 713                         border-top-right-radius : 3px;
 714                 }
 715                 &:last-child {
 716                         border-bottom-left-radius : 3px;
 717                         border-bottom-right-radius : 3px;
 718                 }
 719
 720                 > img {
 721                         margin-left : 6 * @unit_base;
 722                 }
 723
 724                 [data-role="button"]:last-child {
 725                         margin-right : 10 * @unit_base;
 726                 }
 727         }
 728
 729         &> li.ui-li-dialogue.ui-body-s,
 730         &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
 731         &> li.ui-li-dialogue.ui-btn-up-s {
 732                 &:not(.ui-li-expanded){
 733                         background : @color_list_dialogue_bg;
 734                 }
 735         }
 736         &> li.ui-li-dialogue.ui-li-expanded {
 737                 padding-left : 26 * @unit_base;
 738                 background : @color_list_expanded_bg;
 739         }
 740
 741         &> li.ui-li-dialogue.ui-li-divider {
 742                 height: 32 * @unit_base;
 743                 padding : 0px;
 744         }
 745
 746         &> li.ui-li-group-title {
 747                 padding-top : 32 * @unit_base;
 748         }
 749
 750         &> li.ui-li-group-title span {
 751                 padding-left : 16 * @unit_base;
 752         }
 753
 754         &> li.ui-li-dialogue-divider {
 755                 padding-top : 20 * @unit_base;
 756                 padding-bottom : 0 * @unit_base;
 757                 padding-left : 10 * @unit_base;
 758
 759                 margin-left : 4 * @unit_base;
 760                 margin-right : 4 * @unit_base;
 761
 762                 background : @color_list_dialogue_bg;
 763                 font-size : 16 * @unit_base;
 764                 font-weight : bold;
 765                 color : @color_dialogue_main_text;
 766         }
 767 }
 768
 769 // =========
 770 // bubble li
 771 // =========
 772 .ui-listview {
 773         .ui-li-static {
 774                 &.ui-li-bubble-receive,
 775                 &.ui-li-bubble-left {
 776                         color: @color_list_bubble_receive_text;
 777                         > .ui-li-bubble-time {
 778                                 color: @color_list_bubble_time_receive_text;
 779                         }
 780                 }
 781                 &.ui-li-bubble-sent,
 782                 &.ui-li-bubble-right {
 783                         color: @color_list_bubble_sent_text;
 784                         > .ui-li-bubble-time {
 785                                 color: @color_list_bubble_time_sent_text;
 786                         }
 787                 }
 788                 &.ui-li-bubble-sos {
 789                         color: @color_list_bubble_sos_text;
 790                         > .ui-li-bubble-time {
 791                                 color: @color_list_bubble_time_sos_text;
 792                         }
 793                 }
 794                 &.ui-li-bubble-date {
 795                         background-color: @color_list_bubble_date_bg;
 796                         color: @color_list_bubble_date_text;
 797                         font-style: italic;
 798                 }
 799         }
 800
 801         span.ui-li-bubble-time {
 802                 font-weight: bold;
 803         }
 804         // Common
 805         .ui-li-bubble-receive,
 806         .ui-li-bubble-left,
 807         .ui-li-bubble-sent,
 808         .ui-li-bubble-right,
 809         .ui-li-bubble-sos {
 810                 display: inline-block;
 811                 background-clip: padding-box;
 812                 max-width: 80%;
 813                 word-wrap: break-word;
 814                 font-size: @list-li-bubble-font-size;
 815                 p, span {
 816                         font-size: @list-li-bubble-font-size;
 817                 }
 818                 img {
 819                         position: relative;
 820                         min-width: 160 * @unit_base;
 821                         min-height: 160 * @unit_base;
 822                 }
 823         }
 824         .ui-li-bubble-receive,
 825         .ui-li-bubble-left {
 826                 //float: left;
 827                 margin-left: 0px;
 828                 margin-right: auto;
 829                 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
 830                 border-image-slice: 57 14 21 48 fill;
 831                 border-image-width: auto;
 832                 padding: 9px 14px 21px 48px;
 833
 834                 > .ui-li-bubble-time {
 835                         position: absolute;
 836                         display: inline-block;
 837                         bottom: 8 * @unit_base;
 838                         left: 100%;
 839                         font-size: @list-li-bubble-time-font-size;
 840                 }
 841         }
 842         .ui-li-bubble-sent,
 843         .ui-li-bubble-right {
 844                 //float: right;
 845                 margin-left: auto;
 846                 margin-right: 0px;
 847                 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
 848                 border-image-slice: 55 47 20 13 fill;
 849                 border-image-width: auto;
 850                 padding: 9px 47px 20px 13px;
 851
 852                 > .ui-li-bubble-time {
 853                         position: absolute;
 854                         display: inline-block;
 855                         bottom: 8 * @unit_base;
 856                         right: 100%;
 857                         font-size: @list-li-bubble-time-font-size;
 858                 }
 859         }
 860         .ui-li-bubble-date {
 861                 float: left;
 862                 width: 100%;
 863                 height: 24 * @unit_base;
 864                 background-image: url(images/00_messagebubble_date_bg.png);
 865                 background-repeat: repeat-x;
 866                 background-position: center center;
 867                 font-size: @list-li-bubble-date-font-size;
 868                 margin: 20 * @unit_base 6 * @unit_base;
 869                 border: 0px none red;
 870                 padding: 0 0;
 871                 padding-top: 0.5em;     // vertical text alignment to center
 872                 text-align: @style_list_bubble_date_text_align;
 873                 & * {
 874                         display: inline-block;
 875                         background-color: @color_bg;
 876                         padding-left: 0.5em;
 877                         padding-right: 0.5em;
 878                 }
 879         }
 880 }
 881
 882 // Expandable list animation
 883 .ui-listview {
 884         &> .ui-li-expanded {
 885                 background-color: @color_list_expandable_expanded_bg;
 886         }
 887         &> .ui-li-expanded .ui-li-expanded {    // 3rd~ more depth
 888                 background-color: @color_list_expandable_expanded_bg;
 889         }
 890         .ui-li-expandable-shown {
 891                 // Down arrow
 892                 .LESSimg-expanded-icon;
 893         }
 894         .ui-li-expandable-hidden {
 895                 // Right arrow
 896                 .LESSimg-expand-icon;
 897         }
 898         .ui-li-expanded {
 899                 overflow-x: hidden;
 900         }
 901         .ui-li-expand-transition-show {
 902                 visibility: visible;
 903                 -webkit-transition: all 0.2s ease;
 904                 -moz-transition: all 0.2s ease;
 905                 -o-transition: all 0.2s ease;
 906                 -ms-transition: all 0.2s ease;
 907                 transition: all 0.2s ease;
 908         }
 909         .ui-li-expand-transition-hide {
 910                 visibility: hidden;
 911                 height: 0px !important;
 912                 min-height: 0px !important;
 913                 padding-top: 0px;
 914                 padding-bottom: 0px;
 915                 border-top: 0px !important;
 916                 border-bottom: 0px !important;
 917                 -webkit-transition: all 0.2s ease;
 918                 -moz-transition: all 0.2s ease;
 919                 -o-transition: all 0.2s ease;
 920                 -ms-transition: all 0.2s ease;
 921                 transition: all 0.2s ease;
 922         }
 923 }
 924
 925
 926 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
 927         .ui-li-expand-icon {
 928                 background-image: url(images/00_button_expand_closed.png);
 929                 background-size: 100%;
 930                 position: absolute;
 931                 top: 50%;
 932                 width: 37 * @unit_base;
 933                 height: 37 * @unit_base;
 934                 margin-top: -(@size/2);
 935                 right: 18 * @unit_base;
 936         }
 937 }
 938
 939 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
 940         .ui-li-expanded-icon {
 941                 background-image: url(images/00_button_expand_opened.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 }