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                         text-overflow: ellipsis;
 153                         overflow: hidden;
 154                         white-space: nowrap;
 155                 }
 156         }
 157         &:last-child,
 158         &.ui-field-contain:last-child {
 159                 border-bottom-width: 1px;
 160         }
 161         &>.ui-btn-inner {
 162                 display: block;
 163                 position: relative;
 164                 padding: 0;
 165                 border-width:0;
 166         }
 167
 168         &>.ui-btn-inner.ui-btn-hastxt {
 169                 padding: 0px 0px;
 170         }
 171
 172         .ui-btn-inner a.ui-link-inherit,
 173         &.ui-li-static {
 174                 padding-top : 30 * @unit_base;
 175                 padding-bottom : 30 * @unit_base;
 176                 padding-left : 16 * @unit_base;
 177                 padding-right : 16 * @unit_base;
 178                 display: block;
 179
 180                 overflow:hidden;
 181                 white-space : nowrap;
 182                 text-overflow : ellipsis;
 183         }
 184
 185         .ui-toggleswitch {
 186                 &:last-child {
 187                         top : 50%;
 188                         margin-top : -40 * @unit_base;
 189
 190                         display : inline-block;
 191                         position : absolute;
 192
 193                         right : 16 * @unit_base;
 194                 }
 195         }
 196
 197         [data-role="button"] {
 198                 &:last-child {
 199                         position : absolute;
 200                         right : 16 * @unit_base;
 201                 }
 202         }
 203
 204         .ui-radio,
 205         .ui-checkbox {
 206                 &:first-child{
 207                         position : absolute;
 208                         top      : 50%;
 209                         margin-top : -30 * @unit_base;
 210
 211                         left : 16 * @unit_base;
 212
 213                         width : 60 * @unit_base;
 214                         height : 60 * @unit_base;
 215
 216                         .ui-btn-inner {
 217                                 padding : 10 * @unit_base 10 * @unit_base 10 * @unit_base 10 * @unit_base;
 218                                 line-height : 40 * @unit_base;
 219
 220                                 color : transparent;
 221
 222                                 .ui-icon {
 223                                         left : 5 * @unit_base;
 224                                 }
 225                         }
 226                 }
 227         }
 228
 229         img.ui-li-bigicon {
 230                 position : absolute;
 231
 232                 top : 50%;
 233                 margin-top : -36 * @unit_base;
 234
 235                 &:first-child {
 236                         left : 16 * @unit_base;
 237                 }
 238
 239                 &:nth-child(2) {
 240                         left : 92 * @unit_base;
 241                 }
 242
 243                 &:last-child {
 244                         right : 16 * @unit_base;
 245                 }
 246         }
 247
 248         .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
 249                 left : 16 * @unit_base;
 250         }
 251
 252         .ui-li-color-bar {
 253                 position : absolute;
 254                 width  : 12 * @unit_base;
 255                 height : 20 * @unit_base;
 256
 257                 top : 0 * @unit_base;
 258                 left : 0 * @unit_base;
 259
 260                 background-color : rgba(0, 0, 0, 1);
 261         }
 262 }
 263
 264 li.ui-li-thumbnail-right {
 265         img.ui-li-bigicon.ui-li-thumb {
 266                 left : auto;
 267                 right : 16 * @unit_base;
 268         }
 269 }
 270
 271 .ui-li.ui-li-has-multiline {
 272         .ui-btn-inner a.ui-link-inherit,
 273         &.ui-li-static {
 274                 padding-top : 10 * @unit_base;
 275                 padding-bottom : 58 * @unit_base;
 276
 277                 min-height : 60 * @unit_base;
 278         }
 279
 280         a {
 281                 overflow:hidden;
 282                 white-space : nowrap;
 283                 text-overflow : ellipsis;
 284                 padding-right : 16 * @unit_base; /* ellipsis for normal text */
 285         }
 286 }
 287
 288
 289 /********************************************/
 290 /*************** Divider ********************/
 291 /********************************************/
 292 .ui-li-divider {
 293         cursor: default;
 294
 295         counter-reset: listnumbering;
 296         font-weight: bold;
 297         font-size: @list-font-size-divider;
 298         padding-left: 16 * @unit_base;
 299         padding-top: 8 * @unit_base;
 300         padding-bottom: 8 * @unit_base;
 301 }
 302
 303 .ui-listview .ui-li-divider {
 304         &[data-style="dialogue"] {
 305                 height: 32 * @unit_base;
 306                 padding : 0px;
 307
 308                 .LESSdialogue-divider;
 309                 background : @color_bg;
 310         }
 311
 312         &[data-style="check"] {
 313                 height: 60 * @unit_base;
 314                 padding-top : 0px;
 315                 padding-bottom : 0px;
 316
 317                 padding-left : 92 * @unit_base;
 318                 line-height : 60 * @unit_base;
 319         }
 320
 321         &[data-style="checkexpandable"] {
 322                 height: 60 * @unit_base;
 323                 padding-top : 0px;
 324                 padding-bottom : 0px;
 325
 326                 padding-left : 92 * @unit_base;
 327                 line-height : 60 * @unit_base;
 328         }
 329
 330         &[data-style="expandable"] {
 331                 height: 60 * @unit_base;
 332                 padding-top : 0px;
 333                 padding-bottom : 0px;
 334
 335                 line-height : 60 * @unit_base;
 336         }
 337 }
 338
 339 .ui-divider-expand-div {
 340         position : absolute;
 341
 342         width : 98 * @unit_base;
 343         height : 42 * @unit_base;
 344         top : 10 * @unit_base;
 345         right : 0px;
 346
 347         border-left-width : 1px;
 348         border-left-style : solid;
 349         border-left-color : @color_list_divider_expand_div;
 350 }
 351
 352
 353 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
 354         .ui-btn-inner a.ui-link-inherit,
 355         &.ui-li-static  {
 356                 min-height: 60 * @unit_base;
 357                 padding-left: 104 * @unit_base;
 358         }
 359         .ui-li-text-sub {
 360                 padding-left: 104 * @unit_base;
 361                 padding-right: 16 * @unit_base; /* ellipsis for sub text */
 362         }
 363 }
 364
 365 .ui-li-has-checkbox,
 366 .ui-li-has-radio{
 367         .ui-btn-inner a.ui-link-inherit,
 368         &.ui-li-static  {
 369                 min-height: 60 * @unit_base;
 370                 padding-left: 92 * @unit_base;
 371         }
 372         .ui-li-text-sub {
 373                 padding-left: 92 * @unit_base;
 374         }
 375 }
 376
 377 .ui-li-has-thumb.ui-li-has-checkbox,
 378 .ui-li-has-thumb.ui-li-has-radio {
 379         .ui-btn-inner a.ui-link-inherit,
 380         &.ui-li-static  {
 381                 min-height: 60 * @unit_base;
 382                 padding-left: 180 * @unit_base;
 383         }
 384
 385         .ui-li-text-sub {
 386                 padding-left: 180 * @unit_base;
 387         }
 388 }
 389
 390 .ui-li.ui-li-has-right-circle-btn {
 391         .ui-btn-inner a {
 392                 padding-right : 96 * @unit_base;
 393         }
 394 }
 395
 396 .ui-li.ui-li-has-right-btn {
 397         .ui-btn-inner a {
 398                 padding-right : 256 * @unit_base;
 399         }
 400 }
 401
 402 .ui-li.ui-li-thumbnail-right {
 403         .ui-btn-inner a {
 404                 padding-right : 104 * @unit_base;
 405         }
 406 }
 407 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
 408         padding-right : 96 * @unit_base;
 409 }
 410
 411 .ui-li.ui-li-static.ui-li-has-right-btn {
 412         padding-right : 256 * @unit_base;
 413 }
 414
 415 .ui-li.ui-li-static.ui-li-thumbnail-right {
 416         padding-right : 104 * @unit_base;
 417 }
 418
 419 .ui-li-has-icon {
 420         .ui-btn-inner a.ui-link-inherit,
 421         &.ui-li-static {
 422                 min-height: 20px;
 423                 padding-left: 40px;
 424         }
 425         .ui-li-text-sub {
 426                 padding-left: 40px;
 427         }
 428 }
 429
 430 .ui-li-heading {
 431         font-size: 16px;
 432         font-weight: bold;
 433         display: block;
 434         margin: .6em 0;
 435         text-overflow: ellipsis;
 436         overflow: hidden;
 437         white-space: nowrap;
 438 }
 439
 440 .ui-li-thumb,
 441 .ui-li-icon {
 442         position: absolute;
 443         left: 1px;
 444         top: 0;
 445         max-height: @list-bigicon-size2;
 446         max-width: @list-bigicon-size2;
 447 }
 448
 449 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
 450         border-top: 0px;
 451 }
 452
 453 .ui-li-sub,
 454 .ui-li-sub-setting {
 455         float: right;
 456         text-align: right;
 457         font-size: @font_size_list_sub_text;
 458         margin: .3em 0;
 459 }
 460
 461 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 462 /* ~~~~~~~~~~~~~~              NEW   LIST   STYLE                   ~~~~~~~~~ */
 463 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 464 .ui-li-text-sub {
 465         float: right;
 466         text-align: right;
 467         font-size: @font_size_list_sub_text;
 468         color: @color_list_sub_text_default;
 469
 470         position : absolute;
 471         right : 16 * @unit_base;
 472         top : 16 * @unit_base;
 473
 474         overflow:hidden;
 475         white-space : nowrap;
 476         text-overflow : ellipsis;
 477         width   : 95%;
 478
 479         > img {
 480                 position : relative;
 481                 width: @list-smallicon-size;
 482                 height: @list-smallicon-size;
 483                 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
 484         }
 485 }
 486
 487 .ui-li-text-sub2 {
 488         float: right;
 489         text-align: right;
 490         font-size: @font_size_list_sub_text;
 491         color: @color_list_sub_text_default;
 492
 493         position : absolute;
 494         right : 16 * @unit_base;
 495         top : 16 * @unit_base;
 496
 497         overflow:hidden;
 498         white-space : nowrap;
 499         text-overflow : ellipsis;
 500         width : 60%;
 501
 502         > img {
 503                 width: @list-smallicon-size;
 504                 height: @list-smallicon-size;
 505                 margin: 0 0 0 @list-li-padding-horizontal;
 506         }
 507 }
 508 /*
 509 li:not(.ui-li-has-multiline) .ui-li-text-sub {
 510         position : absolute;
 511         right : 16 * @unit_base;
 512         top: 22 * @unit_base;
 513         margin-top: 0px;
 514 }*/
 515 .ui-li-has-multiline .ui-li-text-sub {
 516         position : absolute;
 517
 518         text-align: left;
 519         right : auto;
 520         left : 16 * @unit_base;
 521         top: 70 * @unit_base;
 522         margin-top: 0px;
 523
 524         overflow:hidden;
 525         white-space : nowrap;
 526         text-overflow : ellipsis;
 527
 528         /* ellipsis for multiline list */
 529         width : 90%;
 530 }
 531
 532 .ui-li-icon-sub-right,
 533 .ui-li-icon-sub {
 534         position: absolute;
 535         left: auto;
 536         width: @list-smallicon-size;
 537         height: @list-smallicon-size;
 538         margin: 0 0;
 539 }
 540 .ui-li-icon-sub-right {
 541         right : 16 * @unit_base;
 542 }
 543
 544
 545
 546 // =========
 547 // Dialogue
 548 // =========
 549 .ui-listview {
 550         &> li.ui-li-dialogue {
 551                 margin-left: @style_list_li_dialogue_margin_left;
 552                 margin-right : @style_list_li_dialogue_margin_left;
 553                 border-left: @style_list_li_dialogue_border_left_width @color_dialogue_editor_border solid;
 554                 //margin-left: @style_list_li_dialogue_margin_left;
 555                 border-top-width: 0px;
 556
 557                 .LESSdialogue-border-style;
 558         }
 559
 560         &> li.ui-li-dialogue.ui-body-s,
 561         &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
 562         &> li.ui-li-dialogue.ui-btn-up-s {
 563                 &:not(.ui-li-expanded){
 564                         background : @color_list_dialogue_bg;
 565                 }
 566         }
 567         &> li.ui-li-dialogue.ui-li-expanded {
 568                 padding-left : 44 * @unit_base;
 569                 min-height : 52 * @unit_base;
 570         }
 571
 572
 573         &> li.ui-li-dialogue.ui-li-divider {
 574                 height: 32 * @unit_base;
 575                 padding : 0px;
 576         }
 577
 578         &> li.ui-li-group-title {
 579                 padding-top : 32 * @unit_base;
 580         }
 581
 582         &> li.ui-li-group-title span {
 583                 padding-left : 16 * @unit_base;
 584         }
 585         &> li.ui-li-dialogue-divider {
 586                 .LESSdialogue-divider;
 587         }
 588 }
 589
 590 // =========
 591 // bubble li
 592 // =========
 593 .ui-listview {
 594         .ui-li-bubble-left,
 595                 .ui-li-bubble-right,
 596                 .ui-li-bubble-sos {
 597                 img {
 598                         position: relative;
 599                         min-width: 160 * @unit_base;
 600                         min-height: 160 * @unit_base;
 601                 }
 602         }
 603         .ui-li-bubble-left {
 604                 word-wrap: break-word;
 605                 .LESSborder-radius-topright(@list-li-bubble-corner-radius);
 606                 .LESSborder-radius-bottomright(@list-li-bubble-corner-radius);
 607                 font-size: @list-li-bubble-font-size;
 608                 p, span {
 609                         font-size: @list-li-bubble-font-size;
 610                 }
 611                 //margin: 12px 20% 12px 0%;
 612                 margin-top: 12 * @unit_base;
 613                 margin-bottom: 12 * @unit_base;
 614                 margin-left: 0;
 615                 margin-right: auto;
 616                 max-width: 80%;
 617                 min-width: 30%;
 618                 padding: 16px 22px 16px 16px;
 619         }
 620         .ui-li-bubble-right {
 621                 word-wrap: break-word;
 622                 .LESSborder-radius-topleft(@list-li-bubble-corner-radius);
 623                 .LESSborder-radius-bottomleft(@list-li-bubble-corner-radius);
 624                 margin: 12px 0% 12px 20%;
 625                 padding: 16px 16px 16px 22px;
 626         }
 627         .ui-li-bubble-sos {
 628         }
 629         .ui-li-bubble-date {
 630                 height: 40 * @unit_base;
 631                 font-size: @list-li-bubble-date-font-size;
 632                 margin: 12px 0%;        // no horizontal margin
 633                 padding: 0% 16px;
 634                 padding-top: 15px;
 635                 text-align: @style_list_bubble_date_text_align;
 636         }
 637         span.ui-li-bubble-time {
 638                 margin-left: 12px;
 639                 font-size: @list-li-bubble-time-font-size;
 640                 display: inline-block;
 641         }
 642 }
 643
 644 // Expandable list animation
 645
 646 @-webkit-keyframes ui-expand-show {
 647         from {
 648                 -webkit-transform-origin: 0% 0%;
 649                 -webkit-transform: rotateX(90deg) skewX(30deg) translateZ(0);
 650         } to {
 651                 -webkit-transform-origin: 0% 0%;
 652                 -webkit-transform: rotateX(0deg) skewX(0deg) translateZ(0);
 653         }
 654 }
 655 .ui-listview {
 656         .ui-li-expandable {
 657         }
 658         .ui-li-expandable-shown {
 659                 // Down arrow
 660                 .LESSimg-expanded-icon;
 661         }
 662         .ui-li-expandable-hidden {
 663                 // Right arrow
 664                 .LESSimg-expand-icon;
 665         }
 666         .ui-li-expanded {
 667                 overflow: hidden;
 668         }
 669         .ui-li-expand-transition-show {
 670                 visibility: visible;
 671                 -webkit-animation: ui-expand-show 0.4s 1 ease-out;
 672         }
 673         .ui-li-expand-transition-hide {
 674                 visibility: hidden;
 675                 height: 0px !important;
 676                 min-height: 0px !important;
 677                 padding-top: 0px;
 678                 padding-bottom: 0px;
 679                 border: 0px;
 680                 -webkit-transition: all 0.2s ease;
 681                 -moz-transition: all 0.2s ease;
 682                 -o-transition: all 0.2s ease;
 683                 transition: all 0.2s ease;
 684         }
 685 }
 686
 687
 688 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 689         .ui-li-expand-icon {
 690                 background-image: url(images/00_button_expand_closed.png);
 691                 background-size: 100%;
 692                 position: absolute;
 693                 top: 50%;
 694                 width: 64 * @unit_base;
 695                 height: 64 * @unit_base;
 696                 margin-top: -(@size/2);
 697                 right: 16 * @unit_base;
 698         }
 699 }
 700
 701 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
 702         .ui-li-expanded-icon {
 703                 background-image: url(images/00_button_expand_opened.png);
 704                 background-size: 100%;
 705                 position: absolute;
 706                 top: 50%;
 707                 width: 64 * @unit_base;
 708                 height: 64 * @unit_base;
 709                 margin-top: -(@size/2);
 710                 right: 16 * @unit_base;
 711         }
 712 }