src/themes/tizen/common/jquery.mobile.listview.less

   1 /*
   2 * jQuery Mobile Framework
   3 * Copyright (c) jQuery Project
   4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
   5 */
   6
   7 /*** less definitions ***/
   8
   9 @import "config.less";
  10
  11 /* Using font size */
  12 @list-font-size-main:   44 * @unit_base;
  13 @list-font-size-sub:    32 * @unit_base;
  14 @list-font-size-divider: 32 * @unit_base;       // NOTE: defined in dialogue group
  15
  16 /*
  17 @list-dialogue-font-size-main:  38 * @unit_base;
  18 @list-dialogue-font-size-sub:   32 * @unit_base;
  19 */
  20
  21 @list-font-weight:              normal;
  22
  23 /*
  24 @list-li-height: 112 * @unit_base;
  25
  26 @list-li-2line-height: 128 * @unit_base;
  27 @list-li-3line-height: 160 * @unit_base;
  28 @list-li-top-padding: 10 * @unit_base;
  29 @list-li-main-line-height: 60 * @unit_base;
  30 @list-li-sub-line-height: 48 * @unit_base;
  31 */
  32 @list-smallicon-size: 32 * @unit_base;
  33 @list-li-padding-horizontal: 16 * @unit_base;
  34 /*
  35 @list-li-divider-height: 32 * @unit_base;
  36
  37 */
  38 @list-bigicon-size: 64 * @unit_base;
  39 @list-bigicon-size2: 72 * @unit_base;
  40 /*
  41 @list-checkbox-size: 42 * @unit_base;
  42 @list-progressbar-height: 16 * @unit_base;
  43 */
  44
  45
  46 // Bubble
  47 @list-li-bubble-font-size: 38 * @unit_base;
  48 @list-li-bubble-time-font-size: 26 * @unit_base;
  49 @list-li-bubble-date-font-size: @list-li-bubble-time-font-size;
  50 @list-li-bubble-corner-radius: 9 * @unit_base;  // TODO: fit to 9px (picked from bg images)
  51
  52 @list-li-sub-left-width: 187 * @unit_base;
  53 @list-li-main-right-padding: 187 * @unit_base;
  54
  55 //Email
  56 @list-li-email-top-padding: 8 * @unit_base;
  57 @list-li-email-subline-top-padding: 4 * @unit_base;
  58 @list-li-email-sub-line-height: 40 * @unit_base;
  59 @list-email-icon-width: 56 * @unit_base;
  60 @list-email-icon-height: 60 * @unit_base;
  61
  62 @list-email-icon-top-padding: 16 * @unit_base;
  63 @list-email-attach-icon-width: 40 * @unit_base;
  64 @list-email-attach-icon-height: 40 * @unit_base;
  65 @list-email-warning-icon-width: 30 * @unit_base;
  66 @list-email-warning-icon-height: 30 * @unit_base;
  67 @list-email-text-padding-left: 60 * @unit_base;
  68
  69 /************************/
  70
  71 .ui-listview {
  72         margin: 0;
  73         counter-reset: listnumbering;
  74         border-top-width: 1px;
  75         border-top-style: solid;
  76
  77         li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
  78                 padding-right: 0 * @unit_base;  // Clear default button padding-right
  79         }
  80
  81         &> .ui-li {
  82                 // list item separator line
  83                 border-bottom-width: 1px;
  84                 border-bottom-style: solid;
  85
  86                 border-top-width: 0px;
  87         }
  88
  89         &> .ui-li:not(.ui-li-divider) {
  90                 &:not(.ui-li-static) {
  91                         min-height : 112 * @unit_base;
  92                 }
  93         }
  94
  95         &> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
  96                 &:not(.ui-li-static) {
  97                         min-height : 128 * @unit_base;
  98                 }
  99         }
 100 }
 101
 102 .ui-content {
 103         .ui-listview {
 104                 margin-left: -16 * @unit_base;
 105                 margin-right: -16 * @unit_base;
 106                 padding-bottom: 1px;
 107
 108                 .ui-listview {
 109                         margin: 0;
 110                 }
 111
 112         }
 113         .ui-listview-inset {
 114                 margin: 1em 0;
 115         }
 116 }
 117 .ui-listview,
 118 .ui-li {
 119         list-style:none;
 120         padding:0;
 121
 122         font-size : @list-font-size-main;
 123 }
 124 .ui-li,
 125 .ui-li.ui-field-contain {
 126         display: block;
 127         margin:0;
 128         position: relative;
 129         overflow: visible;
 130         text-align: left;
 131 }
 132 .ui-li {
 133         h3 {
 134                 margin-top      : 0px;
 135                 margin-bottom : 0px;
 136
 137                 font-size : @list-font-size-main;
 138                 min-height      : 52 * @unit_base;
 139                 font-weight : normal;
 140         }
 141
 142         form {
 143                 display : inline-block;
 144         }
 145         .ui-btn {
 146                 top: 50%;
 147                 margin-top: -0.8em;
 148         }
 149         .ui-btn-text {
 150                 position: relative;
 151                 a.ui-link-inherit {
 152                         .LESStext-ellipsis();
 153                 }
 154         }
 155         &:last-child,
 156         &.ui-field-contain:last-child {
 157                 border-bottom-width: 1px;
 158         }
 159         &>.ui-btn-inner {
 160                 display: block;
 161                 position: relative;
 162                 padding: 0;
 163                 border-width:0;
 164         }
 165
 166         &>.ui-btn-inner.ui-btn-hastxt {
 167                 padding: 0px 0px;
 168         }
 169
 170         .ui-btn-inner a.ui-link-inherit,
 171         &.ui-li-static {
 172                 padding-top : 30 * @unit_base;
 173                 padding-bottom : 30 * @unit_base;
 174                 padding-left : 16 * @unit_base;
 175                 padding-right : 16 * @unit_base;
 176                 display: block;
 177
 178                 white-space: normal;    // default: 1line
 179         }
 180
 181         .ui-btn-inner a.ui-link-inherit {
 182                 .LESStext-no-ellipsis();
 183         }
 184
 185
 186         .ui-toggleswitch {
 187                 &:last-child {
 188                         top : 50%;
 189                         margin-top : -40 * @unit_base;
 190
 191                         display : inline-block;
 192                         position : absolute;
 193
 194                         right : 16 * @unit_base;
 195                 }
 196         }
 197
 198         [data-role="button"] {
 199                 &:last-child {
 200                         position : absolute;
 201                         right : 16 * @unit_base;
 202                 }
 203         }
 204
 205         .ui-radio,
 206         .ui-checkbox {
 207                 &:first-child{
 208                         position : absolute;
 209                         top      : 50%;
 210                         margin-top : -30 * @unit_base;
 211
 212                         left : 16 * @unit_base;
 213
 214                         width : 60 * @unit_base;
 215                         height : 60 * @unit_base;
 216
 217                         .ui-btn-inner {
 218                                 padding : 10 * @unit_base 10 * @unit_base 10 * @unit_base 10 * @unit_base;
 219                                 line-height : 40 * @unit_base;
 220
 221                                 color : transparent;
 222
 223                                 .ui-icon {
 224                                         left : 5 * @unit_base;
 225                                 }
 226                         }
 227                 }
 228         }
 229
 230         img.ui-li-bigicon {
 231                 position : absolute;
 232
 233                 top : 50%;
 234                 margin-top : -36 * @unit_base;
 235
 236                 &:first-child {
 237                         left : 16 * @unit_base;
 238                 }
 239
 240                 &:nth-child(2) {
 241                         left : 92 * @unit_base;
 242                 }
 243
 244                 &:last-child {
 245                         right : 16 * @unit_base;
 246                 }
 247         }
 248
 249         .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
 250                 left : 16 * @unit_base;
 251         }
 252
 253         .ui-li-color-bar {
 254                 position : absolute;
 255                 width  : 12 * @unit_base;
 256                 height : 20 * @unit_base;
 257
 258                 top : 0 * @unit_base;
 259                 left : 0 * @unit_base;
 260
 261                 background-color : rgba(0, 0, 0, 1);
 262         }
 263 }
 264
 265 li.ui-li-thumbnail-right {
 266         img.ui-li-bigicon.ui-li-thumb {
 267                 left : auto;
 268                 right : 16 * @unit_base;
 269         }
 270 }
 271
 272 .ui-li.ui-li-has-multiline {
 273         .ui-btn-inner a.ui-link-inherit,
 274         &.ui-li-static {
 275                 padding-top : 10 * @unit_base;
 276                 padding-bottom : 58 * @unit_base;
 277
 278                 min-height : 60 * @unit_base;
 279         }
 280
 281         a {
 282                 .LESStext-no-ellipsis();
 283                 padding-right : 16 * @unit_base; /* ellipsis for normal text */
 284         }
 285 }
 286
 287 /********************************************/
 288 /************  Add ellipsis *****************/
 289 /********************************************/
 290 .ui-li.ui-li-text-ellipsis {
 291         .ui-btn-inner a.ui-link-inherit {
 292                 .LESStext-ellipsis();
 293         }
 294
 295         a {
 296                 .LESStext-ellipsis();
 297         }
 298
 299         &.ui-li-static {
 300                 .LESStext-ellipsis();
 301         }
 302 }
 303 /********************************************/
 304 /*************** Divider ********************/
 305 /********************************************/
 306 .ui-li-divider {
 307         cursor: default;
 308
 309         counter-reset: listnumbering;
 310         font-weight: bold;
 311         font-size: @list-font-size-divider;
 312         padding-left: 16 * @unit_base;
 313         padding-top: 8 * @unit_base;
 314         padding-bottom: 8 * @unit_base;
 315 }
 316
 317 .ui-listview .ui-li-divider {
 318         &[data-style="dialogue"] {
 319                 height: 32 * @unit_base;
 320                 padding : 0px;
 321
 322                 .LESSdialogue-divider;
 323                 background : @color_bg;
 324         }
 325
 326         &[data-style="check"] {
 327                 height: 60 * @unit_base;
 328                 padding-top : 0px;
 329                 padding-bottom : 0px;
 330
 331                 padding-left : 92 * @unit_base;
 332                 line-height : 60 * @unit_base;
 333         }
 334
 335         &[data-style="checkexpandable"] {
 336                 height: 60 * @unit_base;
 337                 padding-top : 0px;
 338                 padding-bottom : 0px;
 339
 340                 padding-left : 92 * @unit_base;
 341                 line-height : 60 * @unit_base;
 342         }
 343
 344         &[data-style="expandable"] {
 345                 height: 60 * @unit_base;
 346                 padding-top : 0px;
 347                 padding-bottom : 0px;
 348
 349                 line-height : 60 * @unit_base;
 350         }
 351 }
 352
 353 .ui-divider-expand-div {
 354         position : absolute;
 355
 356         width : 98 * @unit_base;
 357         height : 42 * @unit_base;
 358         top : 10 * @unit_base;
 359         right : 0px;
 360
 361         border-left-width : 1px;
 362         border-left-style : solid;
 363         border-left-color : @color_list_divider_expand_div;
 364 }
 365
 366
 367 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
 368         .ui-btn-inner a.ui-link-inherit,
 369         &.ui-li-static  {
 370                 min-height: 60 * @unit_base;
 371                 padding-left: 104 * @unit_base;
 372         }
 373         .ui-li-text-sub {
 374                 padding-left: 104 * @unit_base;
 375                 padding-right: 16 * @unit_base; /* ellipsis for sub text */
 376         }
 377 }
 378
 379 .ui-li-has-checkbox,
 380 .ui-li-has-radio{
 381         .ui-btn-inner a.ui-link-inherit,
 382         &.ui-li-static  {
 383                 min-height: 60 * @unit_base;
 384                 padding-left: 92 * @unit_base;
 385         }
 386         .ui-li-text-sub {
 387                 padding-left: 92 * @unit_base;
 388         }
 389 }
 390
 391 .ui-li-has-thumb.ui-li-has-checkbox,
 392 .ui-li-has-thumb.ui-li-has-radio {
 393         .ui-btn-inner a.ui-link-inherit,
 394         &.ui-li-static  {
 395                 min-height: 60 * @unit_base;
 396                 padding-left: 180 * @unit_base;
 397         }
 398
 399         .ui-li-text-sub {
 400                 padding-left: 180 * @unit_base;
 401         }
 402 }
 403
 404 .ui-li.ui-li-has-right-circle-btn {
 405         .ui-btn-inner a {
 406                 padding-right : 96 * @unit_base;
 407         }
 408 }
 409
 410 .ui-li.ui-li-has-right-btn {
 411         .ui-btn-inner a {
 412                 padding-right : 158 * @unit_base;
 413         }
 414 }
 415
 416 .ui-li.ui-li-thumbnail-right {
 417         .ui-btn-inner a {
 418                 padding-right : 104 * @unit_base;
 419         }
 420 }
 421 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
 422         padding-right : 96 * @unit_base;
 423 }
 424
 425 .ui-li.ui-li-static.ui-li-has-right-btn {
 426         padding-right : 158 * @unit_base;
 427 }
 428
 429 .ui-li.ui-li-static.ui-li-thumbnail-right {
 430         padding-right : 104 * @unit_base;
 431 }
 432
 433 .ui-li-has-icon {
 434         .ui-btn-inner a.ui-link-inherit,
 435         &.ui-li-static {
 436                 min-height: 20px;
 437                 padding-left: 40px;
 438         }
 439         .ui-li-text-sub {
 440                 padding-left: 40px;
 441         }
 442 }
 443
 444 .ui-li-heading {
 445         font-size: 16px;
 446         font-weight: bold;
 447         display: block;
 448         margin: .6em 0;
 449         .LESStext-ellipsis();
 450 }
 451
 452 .ui-li-thumb,
 453 .ui-li-icon {
 454         position: absolute;
 455         left: 1px;
 456         top: 0;
 457         max-height: @list-bigicon-size2;
 458         max-width: @list-bigicon-size2;
 459 }
 460
 461 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 462         border-top: 0px;
 463 }
 464
 465 .ui-li-sub,
 466 .ui-li-sub-setting {
 467         float: right;
 468         text-align: right;
 469         font-size: @font_size_list_sub_text;
 470         margin: .3em 0;
 471 }
 472
 473 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 474 /* ~~~~~~~~~~~~~~              NEW   LIST   STYLE                   ~~~~~~~~~ */
 475 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 476 .ui-li-text-sub {
 477         float: right;
 478         text-align: right;
 479         font-size: @font_size_list_sub_text;
 480         color: @color_list_sub_text_default;
 481
 482         position : absolute;
 483         right : 16 * @unit_base;
 484         top : 16 * @unit_base;
 485
 486         width   : 95%;
 487         .LESStext-ellipsis();
 488
 489         > img {
 490                 position : relative;
 491                 width: @list-smallicon-size;
 492                 height: @list-smallicon-size;
 493                 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
 494         }
 495 }
 496
 497 .ui-li-text-sub2 {
 498         float: right;
 499         text-align: right;
 500         font-size: @font_size_list_sub_text;
 501         color: @color_list_sub_text_default;
 502
 503         position : absolute;
 504         right : 16 * @unit_base;
 505         top : 16 * @unit_base;
 506
 507         width : 60%;
 508         .LESStext-ellipsis();
 509
 510         > img {
 511                 width: @list-smallicon-size;
 512                 height: @list-smallicon-size;
 513                 margin: 0 0 0 @list-li-padding-horizontal;
 514         }
 515 }
 516 /*
 517 li:not(.ui-li-has-multiline) .ui-li-text-sub {
 518         position : absolute;
 519         right : 16 * @unit_base;
 520         top: 22 * @unit_base;
 521         margin-top: 0px;
 522 }*/
 523 .ui-li-has-multiline .ui-li-text-sub {
 524         position : absolute;
 525
 526         text-align: left;
 527         right : auto;
 528         left : 16 * @unit_base;
 529         top: 70 * @unit_base;
 530         margin-top: 0px;
 531
 532         width : 90%;
 533         .LESStext-ellipsis();
 534 }
 535
 536 .ui-li-has-multiline.ui-li-has-right-btn {
 537         .ui-btn-inner a {
 538                 .ui-li-text-sub {
 539                         width : 74%;
 540                 }
 541         }
 542 }
 543
 544 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
 545         .ui-li-text-sub {
 546                 width : 74%;
 547         }
 548 }
 549
 550 .ui-li-icon-sub-right,
 551 .ui-li-icon-sub {
 552         position: absolute;
 553         left: auto;
 554         width: @list-smallicon-size;
 555         height: @list-smallicon-size;
 556         margin: 0 0;
 557 }
 558 .ui-li-icon-sub-right {
 559         right : 16 * @unit_base;
 560 }
 561
 562
 563
 564 // =========
 565 // Dialogue
 566 // =========
 567 .ui-listview {
 568         &> li.ui-li-dialogue {
 569                 margin-left: @style_list_li_dialogue_margin_left;
 570                 margin-right : @style_list_li_dialogue_margin_left;
 571                 border-left: @style_list_li_dialogue_border_left_width @color_dialogue_editor_border solid;
 572                 //margin-left: @style_list_li_dialogue_margin_left;
 573                 border-top-width: 0px;
 574
 575                 .LESSdialogue-border-style;
 576         }
 577
 578         &> li.ui-li-dialogue.ui-body-s,
 579         &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
 580         &> li.ui-li-dialogue.ui-btn-up-s {
 581                 &:not(.ui-li-expanded){
 582                         background : @color_list_dialogue_bg;
 583                 }
 584         }
 585         &> li.ui-li-dialogue.ui-li-expanded {
 586                 padding-left : 44 * @unit_base;
 587                 min-height : 52 * @unit_base;
 588         }
 589
 590
 591         &> li.ui-li-dialogue.ui-li-divider {
 592                 height: 32 * @unit_base;
 593                 padding : 0px;
 594         }
 595
 596         &> li.ui-li-group-title {
 597                 padding-top : 32 * @unit_base;
 598         }
 599
 600         &> li.ui-li-group-title span {
 601                 padding-left : 16 * @unit_base;
 602         }
 603         &> li.ui-li-dialogue-divider {
 604                 .LESSdialogue-divider;
 605         }
 606 }
 607
 608 // =========
 609 // bubble li
 610 // =========
 611 .ui-listview {
 612         .ui-li-bubble-left,
 613                 .ui-li-bubble-right,
 614                 .ui-li-bubble-sos {
 615                 img {
 616                         position: relative;
 617                         min-width: 160 * @unit_base;
 618                         min-height: 160 * @unit_base;
 619                 }
 620         }
 621         .ui-li-bubble-left {
 622                 word-wrap: break-word;
 623                 .LESSborder-radius-topright(@list-li-bubble-corner-radius);
 624                 .LESSborder-radius-bottomright(@list-li-bubble-corner-radius);
 625                 font-size: @list-li-bubble-font-size;
 626                 p, span {
 627                         font-size: @list-li-bubble-font-size;
 628                 }
 629                 //margin: 12px 20% 12px 0%;
 630                 margin-top: 12 * @unit_base;
 631                 margin-bottom: 12 * @unit_base;
 632                 margin-left: 0;
 633                 margin-right: auto;
 634                 max-width: 80%;
 635                 min-width: 30%;
 636                 padding: 16px 22px 16px 16px;
 637         }
 638         .ui-li-bubble-right {
 639                 word-wrap: break-word;
 640                 .LESSborder-radius-topleft(@list-li-bubble-corner-radius);
 641                 .LESSborder-radius-bottomleft(@list-li-bubble-corner-radius);
 642                 margin: 12px 0% 12px 20%;
 643                 padding: 16px 16px 16px 22px;
 644         }
 645         .ui-li-bubble-sos {
 646         }
 647         .ui-li-bubble-date {
 648                 height: 40 * @unit_base;
 649                 font-size: @list-li-bubble-date-font-size;
 650                 margin: 12px 0%;        // no horizontal margin
 651                 padding: 0% 16px;
 652                 padding-top: 15px;
 653                 text-align: @style_list_bubble_date_text_align;
 654         }
 655         span.ui-li-bubble-time {
 656                 margin-left: 12px;
 657                 font-size: @list-li-bubble-time-font-size;
 658                 display: inline-block;
 659         }
 660 }
 661
 662 // Expandable list animation
 663
 664 @-webkit-keyframes ui-expand-show {
 665         from {
 666                 -webkit-transform-origin: 0% 0%;
 667                 -webkit-transform: rotateX(90deg) skewX(30deg) translateZ(0);
 668         } to {
 669                 -webkit-transform-origin: 0% 0%;
 670                 -webkit-transform: rotateX(0deg) skewX(0deg) translateZ(0);
 671         }
 672 }
 673 .ui-listview {
 674         .ui-li-expandable {
 675         }
 676         .ui-li-expandable-shown {
 677                 // Down arrow
 678                 .LESSimg-expanded-icon;
 679         }
 680         .ui-li-expandable-hidden {
 681                 // Right arrow
 682                 .LESSimg-expand-icon;
 683         }
 684         .ui-li-expanded {
 685                 overflow-x: hidden;
 686         }
 687         .ui-li-expand-transition-show {
 688                 visibility: visible;
 689                 -webkit-animation: ui-expand-show 0.4s 1 ease-out;
 690         }
 691         .ui-li-expand-transition-hide {
 692                 visibility: hidden;
 693                 height: 0px !important;
 694                 min-height: 0px !important;
 695                 padding-top: 0px;
 696                 padding-bottom: 0px;
 697                 border: 0px;
 698                 -webkit-transition: all 0.2s ease;
 699                 -moz-transition: all 0.2s ease;
 700                 -o-transition: all 0.2s ease;
 701                 -ms-transition: all 0.2s ease;
 702                 transition: all 0.2s ease;
 703         }
 704 }
 705
 706
 707 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 708         .ui-li-expand-icon {
 709                 background-image: url(images/00_list_expand_closed.png);
 710                 background-size: 100%;
 711                 position: absolute;
 712                 top: 50%;
 713                 width: 64 * @unit_base;
 714                 height: 64 * @unit_base;
 715                 margin-top: -(@size/2);
 716                 right: 16 * @unit_base;
 717         }
 718 }
 719
 720 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 721         .ui-li-expanded-icon {
 722                 background-image: url(images/00_list_expand_opened.png);
 723                 background-size: 100%;
 724                 position: absolute;
 725                 top: 50%;
 726                 width: 64 * @unit_base;
 727                 height: 64 * @unit_base;
 728                 margin-top: -(@size/2);
 729                 right: 16 * @unit_base;
 730         }
 731 }