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