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