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