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 // Basic
  12 @list-font-size-main:   44 * @unit_base;
  13 @list-font-size-sub:    32 * @unit_base;
  14 @list-font-size-divider: 28 * @unit_base;       // NOTE: defined in dialogue group
  15
  16 @list-dialogue-font-size-main:  38 * @unit_base;
  17 @list-dialogue-font-size-sub:   32 * @unit_base;
  18
  19
  20 @list-font-weight:              normal;
  21
  22 @list-li-height: 112 * @unit_base;
  23 @list-li-2line-height: 128 * @unit_base;
  24 @list-li-3line-height: 160 * @unit_base;
  25 @list-li-top-padding: 10 * @unit_base;
  26 @list-li-main-line-height: 60 * @unit_base;
  27 @list-li-sub-line-height: 48 * @unit_base;
  28 @list-li-padding-horizontal: 16 * @unit_base;
  29 @list-li-divider-height: 32 * @unit_base;
  30
  31 @list-smallicon-size: 32 * @unit_base;
  32 @list-bigicon-size: 64 * @unit_base;
  33 @list-bigicon-size2: 96 * @unit_base;
  34 @list-checkbox-size: 42 * @unit_base;
  35
  36 @list-progressbar-height: 16 * @unit_base;
  37
  38 // Bubble
  39 @list-li-bubble-font-size: 38 * @unit_base;
  40 @list-li-bubble-time-font-size: 26 * @unit_base;
  41 @list-li-bubble-date-font-size: @list-li-bubble-time-font-size;
  42 @list-li-bubble-corner-radius: 9 * @unit_base;  // TODO: fit to 9px (picked from bg images)
  43
  44 @list-li-dialogue-width: 16 * @unit_base;
  45
  46 @list-li-sub-left-width: 187 * @unit_base;
  47 @list-li-main-right-padding: 187 * @unit_base;
  48
  49 //Email
  50 @list-li-email-top-padding: 8 * @unit_base;
  51 @list-li-email-subline-top-padding: 4 * @unit_base;
  52 @list-li-email-sub-line-height: 40 * @unit_base;
  53 @list-email-icon-width: 56 * @unit_base;
  54 @list-email-icon-height: 60 * @unit_base;
  55
  56 @list-email-icon-top-padding: 16 * @unit_base;
  57 @list-email-attach-icon-width: 40 * @unit_base;
  58 @list-email-attach-icon-height: 40 * @unit_base;
  59 @list-email-warning-icon-width: 30 * @unit_base;
  60 @list-email-warning-icon-height: 30 * @unit_base;
  61 @list-email-text-padding-left: 60 * @unit_base;
  62
  63 /************************/
  64
  65 .ui-listview {
  66         margin: 0;
  67         counter-reset: listnumbering;
  68         border-top-width: 1px;
  69         border-top-style: solid;
  70
  71         // Override default button behavior for listitem
  72         li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
  73         li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
  74         li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
  75                 font-size: @font_size_list_main_text;
  76         }
  77
  78         li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
  79                 padding-right: 0 * @unit_base;  // Clear default button padding-right
  80         }
  81
  82         &> .ui-li {
  83                 // list item separator line
  84                 border-bottom-width: 1px;
  85                 border-bottom-style: solid;
  86         }
  87 }
  88
  89 .ui-content {
  90         .ui-listview {
  91                 margin: -16 * @unit_base;
  92
  93                 .ui-listview {
  94                         margin: 0;
  95                 }
  96
  97         }
  98         .ui-listview-inset {
  99                 margin: 1em 0;
 100         }
 101 }
 102 .ui-listview,
 103 .ui-li {
 104         list-style:none;
 105         padding:0;
 106 }
 107 .ui-li,
 108 .ui-li.ui-field-contain {
 109         display: block;
 110         margin:0;
 111         position: relative;
 112         overflow: visible;
 113         text-align: left;
 114 }
 115 .ui-li {
 116         .ui-btn {
 117                 top: 50%;
 118                 margin-top: -0.8em;
 119         }
 120         .ui-btn-text {
 121                 position: relative;
 122
 123                 a.ui-link-inherit {
 124                         text-overflow: ellipsis;
 125                         overflow: hidden;
 126                         white-space: nowrap;
 127                 }
 128         }
 129         &:last-child,
 130         &.ui-field-contain:last-child {
 131                 border-bottom-width: 1px;
 132         }
 133         &>.ui-btn-inner {
 134                 display: block;
 135                 position: relative;
 136                 padding: 0;
 137                 border-width:0;
 138         }
 139         .ui-btn-inner a.ui-link-inherit,
 140         &.ui-li-static {
 141                 padding: .7em 16*@unit_base;
 142                 display: block;
 143         }
 144 }
 145 .ui-li-divider,
 146 .ui-li-static {
 147         font-weight: @list-font-weight;
 148         padding: 0px @list-li-padding-horizontal;
 149 }
 150 .ui-li-static {
 151         font-size: @font_size_list_main_text;
 152 }
 153 .ui-li-divider {
 154         counter-reset: listnumbering;
 155         font-size: @list-font-size-divider;
 156         padding-top: @list-font-size-divider;
 157         &.ui-bar-s {
 158                 height : @list-font-size-divider;
 159         }
 160 }
 161
 162
 163 // Ordered list
 164 ol.ui-listview .ui-link-inherit:before,
 165 ol.ui-listview .ui-li-static:before,
 166 .ui-li-dec {
 167         font-size: .8em;
 168         display: inline-block;
 169         padding-right: .3em;
 170         font-weight: normal;
 171         counter-increment: listnumbering;
 172         content: counter(listnumbering) ". ";
 173 }
 174 ol.ui-listview {
 175         .ui-li-jsnumbering:before {
 176                 content: "" !important; /* to avoid chance of duplication */
 177         }
 178 }
 179
 180 // Detailed li styles
 181
 182 .ui-listview-inset {
 183         .ui-li {
 184                 border-right-width: 1px;
 185                 border-left-width: 1px;
 186         }
 187 }
 188 .ui-li-has-thumb {
 189         .ui-btn-inner a.ui-link-inherit,
 190         &.ui-li-static  {
 191                 min-height: 60 * @unit_base;
 192                 padding-left: 100 * @unit_base;
 193         }
 194 }
 195 .ui-li-has-icon {
 196         .ui-btn-inner a.ui-link-inherit,
 197         &.ui-li-static {
 198                 min-height: 20px;
 199                 padding-left: 40px;
 200         }
 201 }
 202 .ui-li-has-count {
 203         .ui-btn-inner a.ui-link-inherit,
 204         &.ui-li-static {
 205                 padding-right: 45px;
 206         }
 207 }
 208 .ui-li-has-arrow {
 209         .ui-btn-inner a.ui-link-inherit,
 210         &.ui-li-static {
 211                 padding-right: 30px;
 212         }
 213         &.ui-li-has-count .ui-btn-inner a.ui-link-inherit,
 214         &.ui-li-static.ui-li-has-count {
 215                 padding-right: 75px;
 216         }
 217 }
 218 .ui-li-heading {
 219         font-size: 16px;
 220         font-weight: bold;
 221         display: block;
 222         margin: .6em 0;
 223         text-overflow: ellipsis;
 224         overflow: hidden;
 225         white-space: nowrap;
 226 }
 227 .ui-li-desc {
 228         font-size: 12px;
 229         font-weight: normal;
 230         display: block;
 231         margin: -.5em 0 .6em;
 232         text-overflow: ellipsis;
 233         overflow: hidden;
 234         white-space: nowrap;
 235 }
 236 .ui-li-thumb,
 237 .ui-li-icon {
 238         position: absolute;
 239         left: 1px;
 240         top: 0;
 241         max-height: @list-bigicon-size2;
 242         max-width: @list-bigicon-size2;
 243 }
 244 .ui-li-aside {
 245         float: right;
 246         width: 50%;
 247         text-align: right;
 248         margin: .3em 0;
 249 }
 250 @media all and (min-width: 480px){
 251          .ui-li-aside { width: 45%; }
 252 }
 253 .ui-li-divider {
 254         cursor: default;
 255 }
 256 .ui-li-has-alt {
 257         .ui-btn-inner a.ui-link-inherit,
 258         &.ui-li-static {
 259                 padding-right: 95px;
 260         }
 261 }
 262 .ui-li-has-count {
 263         .ui-li-count {
 264                 position: absolute;
 265                 font-size: 11px;
 266                 font-weight: bold;
 267                 padding: .2em .5em;
 268                 top: 50%;
 269                 margin-top: -.9em;
 270                 right: 38px;
 271         }
 272 }
 273 .ui-li-divider .ui-li-count,
 274 .ui-li-static .ui-li-count {
 275         right: 10px;
 276 }
 277 .ui-li-has-alt .ui-li-count {
 278         right: 55px;
 279 }
 280 .ui-li-link-alt {
 281         position: absolute;
 282         width: 40px;
 283         height: 100%;
 284         border-width: 0;
 285         border-left-width: 1px;
 286         top: 0;
 287         right: 0;
 288         margin: 0;
 289         padding: 0;
 290         z-index: 2;
 291
 292         .ui-btn {
 293                 overflow: hidden;
 294                 position: absolute;
 295                 right: 8px;
 296                 top: 50%;
 297                 margin: -11px 0 0 0;
 298                 border-bottom-width: 1px;
 299                 z-index: -1;
 300         }
 301         .ui-btn-inner {
 302                 padding: 0;
 303                 height: 100%;
 304                 position: absolute;
 305                 width: 100%;
 306                 top: 0;
 307                 left: 0;
 308         }
 309         .ui-btn .ui-icon {
 310                 right: 50%;
 311                 margin-right: -9px;
 312         }
 313 }
 314 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 315         border-top: 0px;
 316 }
 317
 318 .ui-listview-filter {
 319         border-width: 0;
 320         overflow: hidden;
 321         margin: -15px -15px 15px -15px;
 322
 323         .ui-input-search {
 324                 margin: 5px;
 325                 width: auto;
 326                 display: block;
 327         }
 328 }
 329 .ui-listview-filter-inset {
 330         margin: -15px -5px -15px -5px;
 331         background: transparent;
 332 }
 333 .ui-li.ui-screen-hidden {
 334         display:none;
 335 }
 336 .ui-li-sub,
 337 .ui-li-sub-setting {
 338         float: right;
 339         text-align: right;
 340         font-size: @font_size_list_sub_text;
 341         margin: .3em 0;
 342 }
 343
 344 /* listview: size for li with a link */
 345 /*
 346 .ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
 347 .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
 348 .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
 349         margin: 0;
 350         min-height: @height;
 351         padding-left: 0;
 352 }
 353 */
 354
 355 // =======================
 356 // tizen normal list
 357 // =======================
 358 .ui-li-long-text {
 359         display: inline-block;
 360         text-overflow: ellipsis;
 361         overflow-x: hidden;
 362         white-space: nowrap;
 363 }
 364
 365 .LESSli-reset-position-1line(@height: @list-li-main-line-height, @padding-left: @list-li-padding-horizontal) {
 366         margin: 0;
 367         height: @height !important;
 368         min-height: @height;
 369         padding-left: @padding-left;
 370 }
 371 .LESSli-reset-position(@height: @list-li-2line-height) {
 372         margin: 0;
 373         padding: 0 @list-li-padding-horizontal;
 374         height: @height;
 375         min-height: @height;
 376 }
 377 .LESSli-reset-position-3line(@height: @list-li-3line-height) {
 378         margin: 0;
 379         padding: 0 @list-li-padding-horizontal;
 380         height: @height;
 381         min-height: @height;
 382 }
 383 .LESStext-main-1line(@left:@list-li-padding-horizontal) {
 384         .ui-li-text-main {
 385                 font-size: @font_size_list_main_text;
 386                 top: 50%;
 387                 left: @left;
 388                 margin-top: -0.5em;
 389         }
 390 }
 391
 392 .LESStext-sub-1line() {
 393         .ui-li-text-sub {
 394                 float: right;
 395                 text-align: right;
 396                 font-size: @font_size_list_sub_text;
 397                 color: @color_list_sub_text_default;
 398                 top: 50%;
 399                 margin-top: -0.5em;
 400         }
 401 }
 402 .LESStext-sub-setting() {
 403         .ui-li-text-sub {
 404                 color: @color_list_sub_text_settings;
 405         }
 406 }
 407
 408 .LESStext-email-sub1-setting() {
 409         .ui-li-text-sub1 {
 410                 color: @color_list_sub_text_settings;
 411         }
 412 }
 413
 414 .LESStext-sub-1line-left(@left:@list-li-padding-horizontal) {
 415         .ui-li-text-sub-left {
 416                 font-size: @font_size_list_sub_text;
 417                 top: 50%;
 418                 left: @left;
 419                 width: @list-li-sub-left-width;
 420                 line-height: @list-li-main-line-height;
 421                 margin-top: -0.5em;
 422                 vertical-align: top;
 423         }
 424
 425 }
 426 .LESStext-main-1line-right(@left:@list-li-main-right-padding) {
 427         .ui-li-text-main-right {
 428                 font-size: @font_size_list_main_text;
 429                 top: 50%;
 430                 left: @left;
 431                 margin-top: -0.5em;
 432                 padding-left: @list-li-padding-horizontal;
 433                 border-left: 1px rgba(68, 68, 68, 255) solid;
 434         }
 435 }
 436 .LESStext-main-1line-right-setting() {
 437         .ui-li-text-main-right {
 438                 color: @color_list_sub_text_settings;
 439         }
 440 }
 441
 442
 443 .LESStext-main-2line(@left:@list-li-padding-horizontal, @top: @list-li-top-padding) {
 444         .ui-li-text-main {
 445                 position: absolute;
 446                 font-size: @font_size_list_main_text;
 447                 line-height: @list-li-main-line-height;
 448                 left: @left;
 449                 top: @top;
 450                 text-overflow: ellipsis;
 451                 overflow: hidden;
 452                 white-space: nowrap;
 453                 max-width: 90%;
 454         }
 455 }
 456 .LESStext-sub-2line-left(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
 457         .ui-li-text-sub {
 458                 position: absolute;
 459                 font-size: @font_size_list_sub_text;
 460                 line-height: @list-li-sub-line-height;
 461                 color: @color_list_sub_text_default;
 462                 left: @left;
 463                 top: @top;
 464                 text-overflow: ellipsis;
 465                 overflow: hidden;
 466                 white-space: nowrap;
 467                 max-width: 90%;
 468         }
 469 }
 470
 471 .LESStext-sub-2line-right(@right:@list-li-padding-horizontal, @top: @list-li-top-padding) {
 472         .ui-li-text-sub2 {
 473                 position: absolute;
 474                 font-size: @font_size_list_sub_text;
 475                 line-height: @list-li-sub-line-height;
 476                 color: @color_list_sub_text_default;
 477                 right: @right;
 478                 top: @top;
 479                 text-overflow: ellipsis;
 480                 overflow: hidden;
 481                 white-space: nowrap;
 482                 max-width: 30%;
 483         }
 484 }
 485
 486 .LESStext-main-3line(@left:@list-li-padding-horizontal, @top: @list-li-top-padding) {
 487         .ui-li-text-main {
 488                 position: absolute;
 489                 font-size: @font_size_list_main_text;
 490                 line-height: @list-li-sub-line-height;
 491                 left: @left;
 492                 top: @top;
 493                 text-overflow: ellipsis;
 494                 overflow: hidden;
 495                 white-space: nowrap;
 496                 max-width: 90%;
 497         }
 498 }
 499
 500 .LESStext-email-main-3line(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding) {
 501         .ui-li-text-main {
 502                 position: absolute;
 503                 font-size: @font_size_list_main_text;
 504                 line-height: @list-li-main-line-height;
 505                 left: @left;
 506                 top: @top;
 507                 text-overflow: ellipsis;
 508                 overflow: hidden;
 509                 white-space: nowrap;
 510                 max-width: 90%;
 511         }
 512 }
 513 .LESStext-sub-3line-left1(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
 514         .ui-li-text-sub1 {
 515                 position: absolute;
 516                 font-size: @font_size_list_sub_text;
 517                 line-height: @list-li-sub-line-height;
 518                 color: @color_list_sub_text_default;
 519                 left: @left;
 520                 top: @top;
 521                 text-overflow: ellipsis;
 522                 overflow: hidden;
 523                 white-space: nowrap;
 524                 max-width: 90%;
 525         }
 526 }
 527 .LESStext-sub-3line-left2(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
 528         .ui-li-text-sub2 {
 529                 position: absolute;
 530                 font-size: @font_size_list_sub_text;
 531                 line-height: @list-li-sub-line-height;
 532                 color: @color_list_sub_text_default;
 533                 left: @left;
 534                 top: @top;
 535                 text-overflow: ellipsis;
 536                 overflow: hidden;
 537                 white-space: nowrap;
 538                 max-width: 90%;
 539         }
 540 }
 541
 542 .LESStext-email-sub-3line-sub1(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top:@list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding) {
 543         .ui-li-text-sub1 {
 544                 position: absolute;
 545                 font-size: @font_size_list_sub_text;
 546                 line-height: @list-li-email-sub-line-height;
 547                 color: @color_list_name_text;
 548                 left: @left;
 549                 top: @top;
 550                 text-overflow: ellipsis;
 551                 overflow: hidden;
 552                 white-space: nowrap;
 553                 max-width: 90%;
 554         }
 555 }
 556 .LESStext-email-sub-3line-sub2(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top:@list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height) {
 557         .ui-li-text-sub2 {
 558                 position: absolute;
 559                 font-size: @font_size_list_sub_text;
 560                 line-height: @list-li-email-sub-line-height;
 561                 color: @color_list_contents_text;
 562                 left: @left;
 563                 top: @top;
 564                 text-overflow: ellipsis;
 565                 overflow: hidden;
 566                 white-space: nowrap;
 567                 max-width: 90%;
 568         }
 569 }
 570 .LESStext-email-sub-3line-sub3(@right:@list-li-padding-horizontal, @top: @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height) {
 571         .ui-li-text-sub3 {
 572                 position: absolute;
 573                 font-size: @font_size_list_sub_text;
 574                 line-height: @list-li-email-sub-line-height;
 575                 color: @color_list_sub_text_default;
 576                 right: @right;
 577                 top: @top;
 578                 text-overflow: ellipsis;
 579                 overflow: hidden;
 580                 white-space: nowrap;
 581                 max-width: 30%;
 582         }
 583 }
 584
 585
 586
 587 .LESSsubicon-right(@right:@list-li-padding-horizontal, @top: @list-li-top-padding) {    // NOTE: This can be changed according to checkbox implementation!
 588         img.ui-li-icon-sub {
 589                 position: absolute;
 590                 left: auto;
 591                 right: @right;
 592                 top: @top;
 593                 width: @list-smallicon-size;
 594                 height: @list-smallicon-size;
 595                 margin: 0 0;
 596         }
 597 }
 598
 599 .LESSsubicon-right-resize(@right:@list-li-padding-horizontal, @top: @list-li-top-padding, @width:@list-smallicon-size, @height:@list-smallicon-size ) { // NOTE: This can be changed according to checkbox implementation!
 600         .ui-checkbox.favorite,
 601         .ui-icon-checkbox-off,
 602         .ui-icon-checkbox-on,
 603         .ui-icon-checkbox-off-press,
 604         .ui-icon-checkbox-on-press,
 605         .ui-radio,
 606         .ui-icon-radio-off,
 607         .ui-icon-radio-on,
 608         .ui-icon-radio-off-press,
 609         .ui-icon-radio-on-press {
 610                 position: absolute;
 611                 left: auto;
 612                 right: @right;
 613                 top: @top;
 614                 width: @width;
 615                 height: @height;
 616                 margin: 0 0;
 617
 618         }
 619         .ui-checkbox.favorite .ui-btn.ui-btn-icon-left .ui-btn-inner .ui-btn-text {
 620                 margin-left: @list-email-text-padding-left;
 621         }
 622
 623 }
 624
 625 .LESSsubicon-attach-resize(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding, @width:@list-email-attach-icon-width, @height:@list-email-attach-icon-height ) {
 626         img.ui-li-icon-attach {
 627                 position: absolute;
 628                 left: @left;
 629                 right: auto;
 630                 top: @top;
 631                 width: @width;
 632                 height: @height;
 633                 margin: 0 0;
 634         }
 635 }
 636
 637 .LESSsubicon-warning-resize(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding, @width:@list-email-attach-icon-width, @height:@list-email-attach-icon-height ) {
 638         img.ui-li-icon-warning {
 639                 position: absolute;
 640                 left: @left;
 641                 right: auto;
 642                 top: @top;
 643                 width: @width;
 644                 height: @height;
 645                 margin: 0 0;
 646         }
 647 }
 648
 649 .LESSbtn-right(@right:@list-li-padding-horizontal, @top: 50%) {
 650         &>.ui-btn {
 651                 position: absolute;
 652                 right: @right;
 653                 top: @top;
 654         }
 655 }
 656
 657 .LESSbtn-email(@right:@list-li-padding-horizontal, @top: 24%) {
 658         &>.ui-btn {
 659                 position: absolute;
 660                 right: @right;
 661                 top: @top;
 662         }
 663 }
 664 .LESScheckbox-right(@right:@list-li-padding-horizontal, @top: 50%) {    // NOTE: This can be changed according to checkbox implementation!
 665         .ui-checkbox {
 666                 position: absolute;
 667                 right: @right;
 668                 top: @top;
 669                 margin: -1.1em 65*@unit_base 0 @list-li-padding-horizontal;
 670         }
 671 }
 672 .LESStoggleswitch-right(@right:@list-li-padding-horizontal, @top: 50%) {        // NOTE: This can be changed according to checkbox implementation!
 673         .ui-toggleswitch {
 674                 position: absolute;
 675                 right: @right;
 676                 top: @top;
 677                 margin: -1.1em 0 0 @list-li-padding-horizontal;
 678         }
 679 }
 680 .LESScheckbox-left(@left:@list-li-padding-horizontal, @top: 50%) {      // checkbox + radio
 681         .ui-checkbox,
 682         .ui-icon-checkbox-off,
 683         .ui-icon-checkbox-on,
 684         .ui-icon-checkbox-off-press,
 685         .ui-icon-checkbox-on-press,
 686         .ui-radio,
 687         .ui-icon-radio-off,
 688         .ui-icon-radio-on,
 689         .ui-icon-radio-off-press,
 690         .ui-icon-radio-on-press {
 691                 position: absolute;
 692                 right: auto;
 693                 left: @left;
 694                 top: @top;
 695                 margin: -1.1em 0 0 -8*@unit_base;
 696         }
 697 }
 698 .LESSimg-bigicon(@size:@list-bigicon-size) {
 699         img.ui-li-bigicon {
 700                 width: @size;
 701                 height: @size;
 702         }
 703 }
 704 .LESSimg-bigicon-left(@left:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 705         .LESSimg-bigicon;
 706         img.ui-li-bigicon {
 707                 display: block;
 708                 position: absolute;
 709                 top: 50%;
 710                 margin-top: -(@size/2);
 711                 left: @left;
 712         }
 713 }
 714 .LESSimg-bigicon-right(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 715         .LESSimg-bigicon(@size);
 716         img.ui-li-bigicon {
 717                 display: block;
 718                 position: absolute;
 719                 top: 50%;
 720                 margin-top: -(@size/2);
 721                 left: auto;
 722                 right: @right;
 723         }
 724 }
 725
 726 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 727         .ui-li-expand-icon {
 728                 background-image: url(images/00_button_expand_closed.png);
 729                 background-size: 100%;
 730                 position: absolute;
 731                 top: 50%;
 732                 width: 64 * @unit_base;
 733                 height: 64 * @unit_base;
 734                 margin-top: -(@size/2);
 735                 right: 16 * @unit_base;
 736         }
 737 }
 738
 739 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 740         .ui-li-expanded-icon {
 741                 background-image: url(images/00_button_expand_opened.png);
 742                 background-size: 100%;
 743                 position: absolute;
 744                 top: 50%;
 745                 width: 64 * @unit_base;
 746                 height: 64 * @unit_base;
 747                 margin-top: -(@size/2);
 748                 right: 16 * @unit_base;
 749         }
 750 }
 751
 752
 753 ul.ui-listview {
 754         /* 1.11 Hidden style with 2 button */
 755         &> li.ui-li-1-11 {
 756                 height : 96px;
 757                 padding : 0px;
 758                 padding-left : 16px;
 759                 padding-right : 16px;
 760
 761                 &> div.ui-btn {
 762                         position : absolute;
 763                         padding : 0px;
 764                         margin-top : 0px;
 765                         width : 336px;
 766                         top : 18px;
 767
 768                         &> span.ui-btn-hastxt {
 769                                 padding-top : 0.4em;
 770                         }
 771                 }
 772
 773                 &> div.ui-btn:nth-child(1) {
 774                         left : 16px;
 775                 }
 776
 777                 &> div.ui-btn:nth-child(2) {
 778                         left : 372px;
 779                 }
 780         }
 781
 782         &> li.ui-li-1line,
 783         &> li.ui-li-1line-sub,
 784         &> li.ui-li-1line-setting {
 785                 .LESStext-main-1line;
 786                 .LESStext-sub-1line;
 787         }
 788         &> li.ui-li-1line-setting {
 789                 .LESStext-sub-setting;
 790         }
 791         &> li.ui-li-1line-btn1,
 792         &> li.ui-li-1line-btn2 {
 793                 .LESStext-main-1line;
 794                 .LESSbtn-right;
 795         }
 796         &> li.ui-li-1line-toggle {
 797                 .LESStext-main-1line;
 798                 .LESStoggleswitch-right;
 799         }
 800
 801         &> li.ui-li-1line-bigicon1,
 802         &> li.ui-li-1line-bigicon2,
 803         &> li.ui-li-1line-bigicon4,
 804         &> li.ui-li-1line-bigicon5,
 805         &> li.ui-li-1line-bigicon6 {
 806                 .LESStext-main-1line(2 * @list-li-padding-horizontal + @list-bigicon-size);
 807                 .LESSimg-bigicon-left;
 808         }
 809         &> li.ui-li-1line-bigicon2 {
 810                 .LESStext-sub-1line;
 811         }
 812         &> li.ui-li-1line-bigicon6 {
 813                 .LESStoggleswitch-right;
 814         }
 815
 816         &> li.ui-li-1line-check1,
 817         &> li.ui-li-1line-check2,
 818         &> li.ui-li-1line-radio1,
 819         &> li.ui-li-1line-radio3,
 820         &> li.ui-li-1line-radio5 {
 821                 .LESSli-reset-position-1line(@list-li-main-line-height, 2 * @list-li-padding-horizontal + @list-checkbox-size);
 822                 .LESScheckbox-left;
 823                 .LESStext-main-1line;
 824         }
 825         &> li.ui-li-1line-check3,
 826         &> li.ui-li-1line-check4,
 827         &> li.ui-li-1line-radio4 {
 828                 .LESSli-reset-position-1line(@list-li-main-line-height, 3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size);
 829                 .LESScheckbox-left;
 830                 .LESSimg-bigicon-left(74 * @unit_base);
 831                 .LESStext-main-1line;
 832         }
 833         &> li.ui-li-1line-bigicon4,
 834         &> li.ui-li-1line-bigicon5,
 835         &> li.ui-li-1line-check2,
 836         &> li.ui-li-1line-check4,
 837         &> li.ui-li-1line-radio3,
 838         &> li.ui-li-1line-radio5 {
 839                 .LESSbtn-right;
 840         }
 841         &> li.ui-li-1line-radio5 {
 842                 .LESSimg-bigicon-right(96 * @unit_base);
 843         }
 844
 845         /* For Contacts list : wongi_1108 */
 846         &> li.ui-li-1line-radio6 {
 847                 .LESStext-main-1line;
 848                 .LESSimg-bigicon-right(16 * @unit_base);
 849         }
 850
 851
 852         // === 2 line ===
 853         // text align
 854         &> li.ui-li-2line,
 855         &> li.ui-li-2line-setting,
 856         &> li.ui-li-2line-toggle-setting {
 857                 .LESSli-reset-position;
 858                 .LESStext-main-2line;
 859                 .LESStext-sub-2line-left;
 860                 .LESStoggleswitch-right;
 861         }
 862         &> li.ui-li-2line-sub-main,
 863         &> li.ui-li-2line-sub-main-bigicon1 {
 864                 .LESSli-reset-position;
 865                 .LESStext-main-2line(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
 866                 .LESStext-sub-2line-left(@list-li-padding-horizontal, @list-li-top-padding);
 867                 .LESSimg-bigicon-right;
 868         }
 869         &> li.ui-li-2line-2sub {
 870                 .LESSli-reset-position;
 871                 .LESStext-main-2line;
 872                 .LESStext-sub-2line-left;
 873                 .LESStext-sub-2line-right;
 874         }
 875         &> li.ui-li-2line-btn1,
 876         &> li.ui-li-2line-btn2,
 877         &> li.ui-li-2line-btn-setting,
 878         &> li.ui-li-2line-bigicon0 {
 879                 .LESSli-reset-position;
 880                 .LESStext-main-2line;
 881                 .LESStext-sub-2line-left;
 882                 .LESSbtn-right;
 883                 .ui-li-text-sub{
 884                         >img {
 885                                 width: @list-smallicon-size;
 886                                 height: @list-smallicon-size;
 887                                 margin: 0 0 0 @list-li-padding-horizontal;
 888                         }
 889                 }
 890         }
 891         &> li.ui-li-2line-star1 {
 892                 .LESSli-reset-position;
 893                 .LESStext-main-2line;
 894                 .LESStext-sub-2line-left;
 895                 .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding);
 896                 .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-top-padding+@list-li-main-line-height);
 897         }
 898         &> li.ui-li-2line-star2 {
 899                 .LESSli-reset-position;
 900                 .LESStext-main-2line;
 901                 .LESStext-sub-2line-left;
 902                 .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding);
 903                 .ui-li-text-sub {
 904                         >img {
 905                                 width: @list-smallicon-size;
 906                                 height: @list-smallicon-size;
 907                                 margin: 0 @list-li-padding-horizontal 0 0;
 908                         }
 909                 }
 910         }
 911
 912         &> li.ui-li-2line-bigicon1,
 913         &> li.ui-li-2line-bigicon2,
 914         &> li.ui-li-2line-bigicon3,
 915         &> li.ui-li-2line-bigicon4,
 916         &> li.ui-li-2line-colorbar3,
 917         &> li.ui-li-2line-bigicon-pgbar2 {
 918                 .LESSli-reset-position;
 919                 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding);
 920                 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
 921                 .LESSbtn-right;
 922                 .LESSimg-bigicon-left;
 923         }
 924         &> li.ui-li-2line-bigicon2 {
 925                 .LESStext-sub-2line-right;
 926         }
 927
 928         &> li.ui-li-2line-setting,
 929         &> li.ui-li-2line-toggle-setting,
 930         &> li.ui-li-2line-btn-setting,
 931         &> li.ui-li-2line-bigicon3 {
 932                 .LESStext-sub-setting;
 933         }
 934
 935         &> li.ui-li-2line-check1,
 936         &> li.ui-li-2line-check2,
 937         &> li.ui-li-2line-radio1 {
 938                 .LESSli-reset-position;
 939                 .LESScheckbox-left;
 940                 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-top-padding);
 941                 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-top-padding+@list-li-main-line-height);
 942                 .LESSbtn-right;
 943         }
 944         &> li.ui-li-2line-check3,
 945         &> li.ui-li-2line-radio2,
 946         &> li.ui-li-2line-icon-bigicon-btn {
 947                 .LESSli-reset-position;
 948                 .LESScheckbox-left;
 949                 .LESSimg-bigicon-left(2*@list-li-padding-horizontal + @list-checkbox-size);
 950                 .LESStext-main-2line(3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size, @list-li-top-padding);
 951                 .LESStext-sub-2line-left(3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
 952                 .LESSbtn-right;
 953         }
 954
 955         &> li.ui-li-2line-colorbar1,
 956         &> li.ui-li-2line-colorbar2,
 957         &> li.ui-li-2line-colorbar3 {
 958                 .ui-li-color-bar {
 959                         position: absolute;
 960                         left: 0;
 961                         top: 0;
 962                         width: 10 * @unit_base;
 963                         height: 20 * @unit_base;
 964                         background-color: @color_list_colorbar;
 965                 }
 966         }
 967         &> li.ui-li-2line-colorbar1 {
 968                 .LESSli-reset-position;
 969                 .LESStext-main-2line;
 970                 .LESStext-sub-2line-left;
 971                 .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-top-padding+@list-li-main-line-height);
 972                 .ui-btn {
 973                         position: absolute;
 974                         left: auto;
 975                         right: @list-li-padding-horizontal;
 976                         top: @list-li-top-padding;
 977                         margin: 0 0 0 @list-li-padding-horizontal;
 978                         max-height: 60*@unit_base;
 979                 }
 980                 .ui-li-text-sub{
 981                         img {
 982                                 width: @list-smallicon-size;
 983                                 height: @list-smallicon-size;
 984                                 margin: 0 0 0 @list-li-padding-horizontal;
 985                         }
 986                 }
 987         }
 988         &> li.ui-li-2line-colorbar2 {
 989                 .LESSli-reset-position;
 990                 .LESStext-main-2line;
 991                 .LESStext-sub-2line-left;
 992                 .LESSbtn-right;
 993                 .ui-li-text-main {
 994                         img {
 995                                 width: @list-smallicon-size;
 996                                 height: @list-smallicon-size;
 997                                 margin: 0 0 0 @list-li-padding-horizontal;
 998                         }
 999                 }
1000         }
1001         &> li.ui-li-2line-bigicon8 {
1002                 .LESSli-reset-position;
1003                 .LESSimg-bigicon-left;
1004                 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding);
1005                 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
1006                 .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding + @list-li-main-line-height + 8*@unit_base);
1007         }
1008         &> li.ui-li-2line-thumb1,
1009         &> li.ui-li-2line-thumb2,
1010         &> li.ui-li-2line-thumb3 {
1011                 .LESSli-reset-position;
1012                 .LESStext-main-2line;
1013                 .LESStext-sub-2line-left;
1014                 .LESSimg-bigicon-right(@list-li-padding-horizontal,@list-bigicon-size2);
1015                 .ui-li-text-main {
1016                         img {
1017                                 width: @list-smallicon-size;
1018                                 height: @list-smallicon-size;
1019                                 margin: 0 0 0 @list-li-padding-horizontal;
1020                         }
1021                 }
1022                 .ui-li-text-sub{
1023                         img {
1024                                 width: @list-smallicon-size;
1025                                 height: @list-smallicon-size;
1026                                 margin: 0 @list-li-padding-horizontal 0 0;
1027                         }
1028                 }
1029         }
1030         &> li.ui-li-2line-bigicon-pgbar1 {
1031                 .LESSli-reset-position;
1032                 .LESSimg-bigicon-left;
1033                 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, 0);
1034                 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-main-line-height+@list-progressbar-height);
1035                 .LESStext-sub-2line-right(2 * @list-li-padding-horizontal + 134*@unit_base, @list-li-main-line-height+@list-progressbar-height);
1036                 .LESSbtn-right;
1037                 .ui-btn {
1038                         max-width: 134 * @unit_base;
1039                 }
1040                 .ui-progressbar {
1041                         left: 2 * @list-li-padding-horizontal + @list-bigicon-size;
1042                         top: @list-li-main-line-height;
1043                         height: @list-progressbar-height;
1044                         width: 468 * @unit_base;
1045                 }
1046         }
1047         &> li.ui-li-2line-bigicon-pgbar3 {
1048                 .LESSli-reset-position;
1049                 .LESSimg-bigicon-left;
1050                 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, 0);
1051                 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-main-line-height+@list-progressbar-height);
1052                 .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-main-line-height+@list-progressbar-height);
1053                 .ui-progressbar {
1054                         left: 2 * @list-li-padding-horizontal + @list-bigicon-size;
1055                         top: @list-li-main-line-height;
1056                         height: @list-progressbar-height;
1057                         width: 608 * @unit_base;
1058                 }
1059         }
1060         &> li.ui-li-2line,
1061         &> li.ui-li-2line-sub-main,
1062         &> li.ui-li-2line-setting {
1063                 .ui-li-text-main,
1064                 .ui-li-text-sub {
1065                         max-width: 95%;
1066                 }
1067         }
1068         &> li.ui-li-2line-2sub,
1069         &> li.ui-li-3-2-6 {
1070                 .ui-li-text-main {
1071                         max-width: 65%;
1072                 }
1073                 .ui-li-text-sub {
1074                         max-width: 95%;
1075                 }
1076                 .ui-li-text-sub2 {
1077                         max-width: 30%;
1078                 }
1079         }
1080         &> li.ui-li-2line-btn1,
1081         &> li.ui-li-2line-colorbar3,
1082         &> li.ui-li-2line-thumb1,
1083         &> li.ui-li-2line-thumb2 {
1084                 .ui-li-text-main,
1085                 .ui-li-text-sub {
1086                         max-width: 65%;
1087                 }
1088                 .ui-btn {
1089                         max-width: 30%;
1090                 }
1091         }
1092         &> li.ui-li-2line-btn2,
1093         &> li.ui-li-2line-toggle-setting,
1094         &> li.ui-li-2line-btn-setting,
1095         &> li.ui-li-2line-bigicon0,
1096         &> li.ui-li-2line-bigicon1,
1097         &> li.ui-li-2line-bigicon3,
1098         &> li.ui-li-2line-check1,
1099         &> li.ui-li-2line-radio1,
1100         &> li.ui-li-2line-sub-main-bigicon1 {
1101                 .ui-li-text-main,
1102                 .ui-li-text-sub {
1103                         max-width: 80%;
1104                 }
1105         }
1106         &> li.ui-li-2line-star1,
1107         &> li.ui-li-2line-colorbar1 {
1108                 .ui-li-text-main {
1109                         max-width: 85%;
1110                 }
1111                 .ui-li-text-sub {
1112                         max-width: 65%;
1113                 }
1114                 .ui-li-text-sub2 {
1115                         max-width: 30%;
1116                 }
1117         }
1118         &> li.ui-li-2line-star2 {
1119                 .ui-li-text-main {
1120                         max-width: 85%;
1121                 }
1122                 .ui-li-text-sub {
1123                         max-width: 95%;
1124                 }
1125         }
1126         &> li.ui-li-2line-bigicon2 {
1127                 .ui-li-text-main {
1128                         max-width: 55%;
1129                 }
1130                 .ui-li-text-sub {
1131                         max-width: 80%;
1132                 }
1133                 .ui-li-text-sub2 {
1134                         max-width: 20%;
1135                 }
1136         }
1137         &> li.ui-li-2line-bigicon4,
1138         &> li.ui-li-2line-check2,
1139         &> li.ui-li-2line-check3,
1140         &> li.ui-li-2line-radio2,
1141         &> li.ui-li-2line-colorbar3,
1142         &> li.ui-li-2line-icon-bigicon-btn {
1143                 .ui-li-text-main,
1144                 .ui-li-text-sub {
1145                         max-width: 65%;
1146                 }
1147         }
1148         &> li.ui-li-2line-bigicon8 {
1149                 .ui-li-text-main {
1150                         max-width: 75%;
1151                 }
1152                 .ui-li-text-sub {
1153                         max-width: 70%;
1154                 }
1155         }
1156         &> li.ui-li-2line-bigicon-pgbar1 {
1157                 .ui-li-text-main {
1158                         max-width: 60%;
1159                 }
1160                 .ui-li-text-sub {
1161                         max-width: 40%;
1162                 }
1163                 .ui-li-text-sub2 {
1164                         max-width: 20%;
1165                 }
1166         }
1167         &> li.ui-li-2line-bigicon-pgbar2 {
1168                 .ui-li-text-main,
1169                 .ui-li-text-sub {
1170                         max-width: 55%;
1171                 }
1172         }
1173         &> li.ui-li-2line-bigicon-pgbar3 {
1174                 .ui-li-text-main {
1175                         max-width: 80%;
1176                 }
1177                 .ui-li-text-sub {
1178                         max-width: 60%;
1179                 }
1180                 .ui-li-text-sub2 {
1181                         max-width: 20%;
1182                 }
1183         }
1184         &> li.ui-li-2line-thumb3 {
1185                 .ui-li-text-main,
1186                 .ui-li-text-sub {
1187                         max-width: 75%;
1188                 }
1189         }
1190
1191         // Multiline
1192         &> li.ui-li-3-4-1 {
1193                 font-size: 36 * @unit_base;
1194                 padding: 16 * @unit_base;
1195
1196                 h1.ui-li-heading {
1197                         font-size: 48 * @unit_base;
1198                         margin-top: 0 * @unit_base;
1199                         margin-bottom: 0 * @unit_base;
1200                 }
1201         }
1202         &> li.ui-li-3-4-5 {
1203                 h1.ui-li-heading {
1204                         display: inline-block;
1205                         width: 224 * @unit_base;
1206                         height: 100%;
1207                         //float: left;
1208                 }
1209         }
1210
1211         // Email
1212         &> li.ui-li-email-name1-btn,
1213         &> li.ui-li-email-name2-btn,
1214         &> li.ui-li-email-name1,
1215         &> li.ui-li-email-name2,
1216         &> li.ui-li-email-name1-btn-warning,
1217         &> li.ui-li-email-name2-btn-warning,
1218         &> li.ui-li-email-name1-warning,
1219         &> li.ui-li-email-name2-warning,
1220         &> li.ui-li-email-name1-btn-attach,
1221         &> li.ui-li-email-name2-btn-attach,
1222         &> li.ui-li-email-name1-attach,
1223         &> li.ui-li-email-name2-attach,
1224         &> li.ui-li-email-name1-btn-warning-attach,
1225         &> li.ui-li-email-name2-btn-warning-attach,
1226         &> li.ui-li-email-name1-warning-attach,
1227         &> li.ui-li-email-name2-warning-attach {
1228                 .ui-li-color-bar {
1229                         position: absolute;
1230                         left: 0;
1231                         top: 0;
1232                         width: 10 * @unit_base;
1233                         height: 20 * @unit_base;
1234                         background-color: @color_list_colorbar;
1235                 }
1236                 .LESSli-reset-position-3line;
1237                 .LESScheckbox-left;
1238                 .LESSsubicon-right-resize(@list-li-padding-horizontal, @list-li-email-top-padding, @list-email-icon-width, @list-email-icon-height);
1239                 .LESStext-email-sub-3line-sub2(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height);
1240                 .LESStext-email-sub-3line-sub3(@list-li-padding-horizontal, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height);
1241         }
1242
1243         &> li.ui-li-email-name1-btn,
1244         &> li.ui-li-email-name2-btn,
1245         &> li.ui-li-email-name1,
1246         &> li.ui-li-email-name2 {
1247                 .LESStext-email-main-3line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1248                 .LESStext-email-sub-3line-sub1(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1249         }
1250         &> li.ui-li-email-name1-btn-warning,
1251         &> li.ui-li-email-name2-btn-warning,
1252         &> li.ui-li-email-name1-warning,
1253         &> li.ui-li-email-name2-warning {
1254                 .LESStext-email-main-3line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1255                 .LESStext-email-sub-3line-sub1(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1256                 .LESSsubicon-warning-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding + @list-li-main-line-height, @list-email-warning-icon-width, @list-email-warning-icon-height);
1257         }
1258         &> li.ui-li-email-name1-btn-attach,
1259         &> li.ui-li-email-name2-btn-attach,
1260         &> li.ui-li-email-name1-attach,
1261         &> li.ui-li-email-name2-attach {
1262                 .LESStext-email-main-3line(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1263                 .LESStext-email-sub-3line-sub1(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1264                 .LESSsubicon-attach-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding, @list-email-attach-icon-width, @list-email-attach-icon-height);
1265         }
1266         &> li.ui-li-email-name1-btn-warning-attach,
1267         &> li.ui-li-email-name2-btn-warning-attach,
1268         &> li.ui-li-email-name1-warning-attach,
1269         &> li.ui-li-email-name2-warning-attach {
1270                 .LESStext-email-main-3line(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1271                 .LESStext-email-sub-3line-sub1(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1272                 .LESSsubicon-attach-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding, @list-email-attach-icon-width, @list-email-attach-icon-height);
1273                 .LESSsubicon-warning-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding + @list-li-main-line-height, @list-email-warning-icon-width, @list-email-warning-icon-height);
1274         }
1275
1276         &> li.ui-li-email-name1-btn,
1277         &> li.ui-li-email-name2-btn,
1278         &> li.ui-li-email-name1-btn-warning,
1279         &> li.ui-li-email-name2-btn-warning,
1280         &> li.ui-li-email-name1-btn-attach,
1281         &> li.ui-li-email-name2-btn-attach,
1282         &> li.ui-li-email-name1-btn-warning-attach,
1283         &> li.ui-li-email-name2-btn-warning-attach {
1284                 .LESSbtn-email(2 * @list-li-padding-horizontal + @list-email-icon-width);
1285         }
1286         &> li.ui-li-email-name1-btn,
1287         &> li.ui-li-email-name1,
1288         &> li.ui-li-email-name1-btn-warning,
1289         &> li.ui-li-email-name1-warning,
1290         &> li.ui-li-email-name1-btn-attach,
1291         &> li.ui-li-email-name1-attach,
1292         &> li.ui-li-email-name1-btn-warning-attach,
1293         &> li.ui-li-email-name1-warning-attach {
1294                 .LESStext-email-sub1-setting;
1295         }
1296
1297
1298         // Dialogue list
1299         &> li.ui-li-1line-leftsub1 {
1300                 .LESStext-sub-1line-left;
1301                 .LESStext-main-1line-right;
1302         }
1303         &> li.ui-li-1line-leftsub2 {
1304                 .LESSli-reset-position-1line;
1305                 .LESStext-sub-1line-left;
1306                 .LESStext-main-1line-right;
1307                 .LESSimg-bigicon-right(16 * @unit_base);
1308         }
1309         &> li.ui-li-4-2-3 {
1310                 .LESSli-reset-position;
1311                 .LESStext-main-2line;
1312                 .LESStext-sub-2line-left;
1313                 .LESStext-sub-setting;
1314                 .ui-li-text-main,
1315                 .ui-li-text-sub {
1316                         max-width: 95%;
1317                 }
1318         }
1319         &> li.ui-li-4-2-10 {
1320                 .LESSli-reset-position;
1321                 .LESStext-main-2line(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
1322                 .LESStext-sub-2line-left(@list-li-padding-horizontal, @list-li-top-padding);
1323                 .ui-li-text-main,
1324                 .ui-li-text-sub {
1325                         max-width: 80%;
1326                 }
1327                 .LESScheckbox-right;
1328         }
1329
1330         &> li.ui-li-4-2-11 {
1331                 .LESStext-sub-1line-left;
1332                 .LESStext-main-1line-right;
1333
1334                 .ui-li-text-main-right
1335                 {
1336                         display: inline-block;
1337                         word-wrap:normal;
1338                 }
1339         }
1340
1341         &> li.ui-li-3line-dgroup1 {
1342                 .LESSli-reset-position-3line;
1343                 .LESStext-main-3line(@list-li-padding-horizontal, @list-li-top-padding);
1344                 .LESStext-sub-3line-left1(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
1345                 .LESStext-sub-3line-left2(@list-li-padding-horizontal, @list-li-top-padding + 2 * @list-li-sub-line-height);
1346         }
1347
1348         // Special dialogue for Phonebook
1349         &> li.ui-li-4-3-2 {
1350                 height : 190px;
1351                 padding : 0px;
1352
1353                 .ui-li-thumb {
1354                         float : left;
1355                         height : 128px;
1356                         max-height: 128px;
1357                         width : 128px;
1358                         max-width: 128px;
1359                         left: 32px;
1360                         top: 28px;
1361                 }
1362
1363                 span.contact_name_field {
1364                         position : absolute;
1365                         font-size : @list-dialogue-font-size-main;
1366                         color : @color_dialogue_main_text;
1367                         left : 184px;
1368                         top : 32px;
1369                         height : 54px;
1370                 }
1371
1372                 span.contact_subname_field {
1373                         position : absolute;
1374                         font-size : @list-dialogue-font-size-sub;
1375                         color : @color_dialogue_sub_text;
1376                         left : 184px;
1377                         top : 94px;
1378                 }
1379
1380                 span.companyname_field {
1381                         position : absolute;
1382                         font-size : @list-dialogue-font-size-sub;
1383                         color : @color_dialogue_sub_text;
1384                         left : 184px;
1385                         top : 126px;
1386                 }
1387         }
1388
1389         // Dialogue Editor for Phonebook
1390         &> div.ui-li-dialogue-editor-photo
1391         {
1392                 width: 160px;
1393                 left: 16px;
1394                 top: 34px;
1395                 position: absolute;
1396                 &> img
1397                 {
1398                         width:128px;
1399                         height:128px;
1400                 }
1401         }
1402
1403         &> li.ui-li-dialogue-editor-1
1404         {
1405                 border-left: @list-li-dialogue-width rgba(68, 68, 68, 255) solid;
1406                 border-top-width: 0px;  //wongi_1201 //for phonebook
1407                 left : 160px;
1408                 width : 790px;
1409                 padding-left: 12px;
1410                 padding-right: 0px;
1411
1412                 &> .ui-field-contain
1413                 {
1414                         margin:0;
1415                         padding : 8px;
1416                         width : 782px;
1417
1418                         &> input
1419                         {
1420                                 border : none;
1421                                 outline: none;
1422                                 width : 782px;
1423                                 padding : 0px;
1424                         }
1425
1426                         /* wongi_1215 : Default Text */
1427                         &>div.ui-input-default-text {
1428                                 position: absolute;
1429                                 top: 0;
1430                                 left: 0;
1431                                 width : 100%;
1432                                 margin: 0px;
1433                                 color: @color_dialogue_editor_default_text;
1434                         }
1435
1436                         &>div.ui-input-default-text.ui-input-default-hidden {
1437                                 display : none;
1438                         }
1439                 }
1440         }
1441
1442         &> li.ui-li-dialogue-editor-1.ui-li-expanded
1443         {
1444                 background-color: @color_dialogue_editor_bg;
1445         }
1446
1447         &> li.ui-li-dialogue-editor-2
1448         {
1449                 padding : 0px !important;
1450                 height : 130px;
1451                 border-left: @list-li-dialogue-width @color_dialogue_editor_border solid;
1452                 border-top-width: 0px;
1453                 left : 0px;
1454                 width : 962px;
1455                 font-size:32px;
1456
1457                 &> div.ui-li-dialogue-editor-border
1458                 {
1459                         border-right: 1px @color_dialogue_editor_border solid;
1460                         width: 160px;
1461                         height: 130px;
1462                 }
1463
1464                 &> div div.ui-li-dialogue-editor-2-label
1465                 {
1466                         margin-left:16px;
1467                         line-height:32px;
1468                         position:absolute;
1469                         top:50%;
1470                         margin-top:-16px;
1471                 }
1472
1473                 &> .ui-field-contain
1474                 {
1475                         margin:0;
1476                         width : 676px;
1477                         position:absolute;
1478                         top:50%;
1479                         margin-top:-16px;
1480                         left : 200px;
1481
1482                         &> input
1483                         {
1484                                 border : none;
1485                                 outline: none;
1486                                 width : 676px;
1487                                 padding : 0px;
1488                         }
1489
1490                         /* wongi_1215 : Default Text */
1491                         &>div.ui-input-default-text {
1492                                 position: absolute;
1493                                 top: 0;
1494                                 width : 100%;
1495                                 margin: 0px;
1496                                 color: @color_dialogue_editor_default_text;
1497                         }
1498
1499                         &>div.ui-input-default-text.ui-input-default-hidden {
1500                                 display : none;
1501                         }
1502                 }
1503         }
1504
1505         // Dialogue
1506         &> li.ui-li-dialogue {
1507                 border-left: @list-li-dialogue-width @color_dialogue_editor_border solid;
1508                 border-top-width: 0px;
1509         }
1510
1511         &> li.ui-li-dialogue.ui-li-divider {
1512                 height: 32 * @unit_base;
1513                 padding : 0px;
1514         }
1515
1516         &> li.ui-li-divider {
1517                 height: 32 * @unit_base;
1518                 padding : 0px;
1519         }
1520
1521         &> li.ui-li-group-title {
1522                 padding-top : 32 * @unit_base;
1523         }
1524
1525         &> li.ui-li-group-title span {
1526                 padding-left : 16 * @unit_base;
1527         }
1528
1529         &> li.ui-li-3-button {
1530                 padding-left : 8px;
1531                 padding-right : 8px;
1532                 height : 60px;
1533         }
1534
1535         &> li.ui-li-3-button div.ui-btn {
1536                 margin-left : 8px;
1537                 margin-right : 8px;
1538                 height : 74px;
1539                 width :224px;
1540                 top : 24px;
1541                 position : absolute;
1542                 padding : 0px;
1543                 margin-top : 0px;
1544                 .ui-btn-inner.ui-btn-hastxt {
1545                         padding-top : 0.6em;
1546                 }
1547         }
1548
1549         &> li.ui-li-3-button div.ui-btn:nth-child(1) {
1550                 left : 0%;
1551         }
1552
1553         &> li.ui-li-3-button div.ui-btn:nth-child(2) {
1554                 left : 33%;
1555         }
1556
1557         &> li.ui-li-3-button div.ui-btn:nth-child(3) {
1558                 left : 66%;
1559         }
1560 }
1561
1562 // =========
1563 // bubble li
1564 // =========
1565 .ui-listview {
1566         .ui-li-bubble-left,
1567                 .ui-li-bubble-right,
1568                 .ui-li-bubble-sos {
1569                 img {
1570                         position: relative;
1571                         min-width: 160 * @unit_base;
1572                         min-height: 160 * @unit_base;
1573                 }
1574         }
1575         .ui-li-bubble-left {
1576                 word-wrap: break-word;
1577                 .LESSborder-radius-topright(@list-li-bubble-corner-radius);
1578                 .LESSborder-radius-bottomright(@list-li-bubble-corner-radius);
1579                 font-size: @list-li-bubble-font-size;
1580                 p, span {
1581                         font-size: @list-li-bubble-font-size;
1582                 }
1583                 //margin: 12px 20% 12px 0%;
1584                 margin-top: 12 * @unit_base;
1585                 margin-bottom: 12 * @unit_base;
1586                 margin-left: 0;
1587                 margin-right: auto;
1588                 max-width: 80%;
1589                 min-width: 30%;
1590                 padding: 16px 22px 16px 16px;
1591         }
1592         .ui-li-bubble-right {
1593                 word-wrap: break-word;
1594                 .LESSborder-radius-topleft(@list-li-bubble-corner-radius);
1595                 .LESSborder-radius-bottomleft(@list-li-bubble-corner-radius);
1596                 margin: 12px 0% 12px 20%;
1597                 padding: 16px 16px 16px 22px;
1598         }
1599         .ui-li-bubble-sos {
1600         }
1601         .ui-li-bubble-date {
1602                 height: 40px;
1603                 font-size: @list-li-bubble-date-font-size;
1604                 margin: 12px 0%;        // no horizontal margin
1605                 padding: 0% 16px;
1606                 padding-top: 15px;
1607         }
1608         span.ui-li-bubble-time {
1609                 margin-left: 12px;
1610                 font-size: @list-li-bubble-time-font-size;
1611                 display: inline-block;
1612         }
1613 }
1614
1615 // Expandable list animation
1616 .ui-listview {
1617         .ui-li-expandable {
1618         }
1619         .ui-li-expandable-shown {
1620                 // Down arrow
1621                 .LESSimg-expanded-icon;
1622         }
1623         .ui-li-expandable-hidden {
1624                 // Right arrow
1625                 .LESSimg-expand-icon;
1626         }
1627         .ui-li-expanded {
1628                 overflow: hidden;
1629
1630                 // Transition
1631                 -webkit-transition: all 0.2s ease;
1632                 -moz-transition:  all 0.2s ease;
1633                 -o-transition: all 0.2s ease;
1634                 transition: all 0.2s ease;
1635         }
1636         .ui-li-expand-transition-show {
1637                 visibility: visible;
1638         }
1639         .ui-li-expand-transition-hide {
1640                 visibility: hidden;
1641                 height: 0px;
1642                 padding-top: 0px;
1643                 padding-bottom: 0px;
1644                 border: 0px;
1645         }
1646 }
1647
1648 /* Odd iPad positioning issue. */
1649 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
1650     .ui-li .ui-btn-text {
1651                 overflow:  visible;
1652         }
1653 }