2 * jQuery Mobile Framework
3 * Copyright (c) jQuery Project
4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
7 /*** less definitions ***/
12 @list-font-size-main: 22 * @unit_base;
13 @list-font-size-sub: 16 * @unit_base;
14 @list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group
16 @list-font-weight: normal;
18 @list-smallicon-size: 17 * @unit_base;
19 @list-li-padding-horizontal: 8 * @unit_base;
21 @list-bigicon-size: 64 * @unit_base;
22 @list-bigicon-size2: 72 * @unit_base;
25 @list-li-bubble-font-size: 19 * @unit_base;
26 @list-li-bubble-time-font-size: 11 * @unit_base;
27 @list-li-bubble-date-font-size: 16 * @unit_base;
29 @list-li-sub-left-width: 187 * @unit_base;
30 @list-li-main-right-padding: 187 * @unit_base;
33 @list-li-email-top-padding: 8 * @unit_base;
34 @list-li-email-subline-top-padding: 4 * @unit_base;
35 @list-li-email-sub-line-height: 40 * @unit_base;
36 @list-email-icon-width: 56 * @unit_base;
37 @list-email-icon-height: 60 * @unit_base;
39 @list-email-icon-top-padding: 16 * @unit_base;
40 @list-email-attach-icon-width: 40 * @unit_base;
41 @list-email-attach-icon-height: 40 * @unit_base;
42 @list-email-warning-icon-width: 30 * @unit_base;
43 @list-email-warning-icon-height: 30 * @unit_base;
44 @list-email-text-padding-left: 60 * @unit_base;
46 /************************/
50 counter-reset: listnumbering;
52 border-top-color: @color_list_border_bottom;
54 li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
55 padding-right: 0 * @unit_base; // Clear default button padding-right
59 border-left-width : 0px;
60 border-right-width : 0px;
62 border-top-width: 0px;
65 border-bottom-width: 1px;
66 border-bottom-style: solid;
67 border-bottom-color: @color_list_border_bottom;
68 margin-left : 13 * @unit_base;
69 margin-right : 13 * @unit_base;
74 background-color: @color_bg;
76 border-bottom-width: 1px;
77 border-bottom-style: solid;
78 border-bottom-color: @color_list_border_bottom;
79 margin-left : 13 * @unit_base;
80 margin-right : 13 * @unit_base;
84 &> .ui-li:not(.ui-li-divider) {
85 &:not(.ui-li-static) {
86 min-height : 55 * @unit_base;
90 &> .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
91 &:not(.ui-li-static) {
92 min-height : 64 * @unit_base;
96 li.ui-btn-up-s, li.ui-btn-hover-s {
98 background-color: @color_bg;
103 background-color: @color_list_press;
106 /* listview: fonts for li with a link */
107 li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
108 li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
109 color: @color_list_main_text_unfocus;
112 li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
113 color: @color_list_main_text_focus;
119 margin-left: -16 * @unit_base;
120 margin-right: -16 * @unit_base;
136 font-size : @list-font-size-main;
139 .ui-li.ui-field-contain {
151 font-size : @list-font-size-main;
152 font-weight : normal;
156 display : inline-block;
165 .LESStext-ellipsis();
169 &.ui-field-contain:last-child {
170 border-bottom-width: 1px;
179 &>.ui-btn-inner.ui-btn-hastxt {
183 .ui-btn-inner a.ui-link-inherit,
185 padding-top : 15 * @unit_base;
186 padding-bottom : 15 * @unit_base;
189 white-space: normal; // default: 1line
191 border-left-width : 0px;
192 border-right-width : 0px;
195 .ui-btn-inner a.ui-link-inherit {
196 .LESStext-no-ellipsis();
202 margin-top : -20 * @unit_base;
204 display : inline-block;
210 .ui-toggleswitch.ui-toggleswitch-image-style {
212 margin-top : -17 * @unit_base;
218 [data-role="button"] {
230 margin-top : -15 * @unit_base;
232 left : -4 * @unit_base;
234 width : 30 * @unit_base;
235 height : 30 * @unit_base;
238 line-height : 20 * @unit_base;
243 left : 5 * @unit_base;
247 label.ui-btn-icon_only {
257 width : 35 * @unit_base;
258 height : 35 * @unit_base;
261 margin-top : -18 * @unit_base;
268 left : 36 * @unit_base;
272 right : 16 * @unit_base;
276 .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
282 width : 3 * @unit_base;
283 height : 65 * @unit_base;
285 top : 0 * @unit_base;
286 left : -13 * @unit_base;
288 background-color : rgba(0, 0, 0, 1);
292 li.ui-li-thumbnail-right {
293 img.ui-li-bigicon.ui-li-thumb {
297 width : 51 * @unit_base;
298 height : 51 * @unit_base;
300 margin-top : -25 * @unit_base;
304 .ui-li.ui-li-has-multiline {
305 .ui-btn-inner a.ui-link-inherit,
307 padding-top : 7 * @unit_base;
308 padding-bottom : 28 * @unit_base;
312 .LESStext-no-ellipsis();
313 padding-right : 16 * @unit_base; /* ellipsis for normal text */
317 /********************************************/
318 /************ Add ellipsis *****************/
319 /********************************************/
320 .ui-li.ui-li-text-ellipsis {
321 .ui-btn-inner a.ui-link-inherit {
322 .LESStext-ellipsis();
326 .LESStext-ellipsis();
330 .LESStext-ellipsis();
334 /********************************************/
335 /*************** Edit Field *****************/
336 /********************************************/
342 outline-color : @color_list_bg;
343 font-size : 23 * @unit_base;
347 padding-bottom : 0px;
351 /********************************************/
352 /*************** Divider ********************/
353 /********************************************/
355 .ui-listview li.ui-li-divider {
356 background: @color_list_divider_bg;
357 color: @color_list_divider_text;
359 border-bottom-width : 0px;
360 border-top-width : 0px;
364 counter-reset: listnumbering;
367 height: 38 * @unit_base;
369 font-size : @list-font-size-divider;
370 &>.ui-btn-inner>.ui-btn-text { // For buttonMarkup-ed dividers
371 font-size : @list-font-size-divider;
376 margin-top: 0 * @unit_base;
379 font-size : @list-font-size-divider;
380 .ui-btn-inner.ui-btn-hastxt {
386 top : 5 * @unit_base;
387 height : 18 * @unit_base;
388 padding-right : 10 * @unit_base;
393 &[data-style="dialogue"] {
394 height: 20 * @unit_base;
397 padding-top : 20 * @unit_base;
398 padding-bottom : 0 * @unit_base;
399 padding-left : 10 * @unit_base;
401 margin-left : 4 * @unit_base;
402 margin-right : 4 * @unit_base;
405 font-size : 16 * @unit_base;
407 color : @color_dialogue_main_text;
408 background : @color_list_bg;
411 &[data-style="check"] {
412 height: 38 * @unit_base;
414 padding-bottom : 0px;
425 width : 32 * @unit_base;
426 height : 32 * @unit_base;
427 background : @color_list_bg;
432 padding-left : 37 * @unit_base;
436 .ui-divider-normal-line {
437 display : inline-block;
440 top : 23 * @unit_base;
442 height : 2 * @unit_base;
444 background : @color_list_divider_text;
448 background : @color_list_divider_text;
449 color : @color_list_bg;
451 .ui-divider-normal-line {
452 background : @color_list_bg;
457 background : @color_list_divider_text;
462 + li.ui-li-dialogue {
463 border-top-left-radius : 3px;
464 border-top-right-radius : 3px;
468 .ui-divider-expand-div {
471 width : 98 * @unit_base;
472 height : 42 * @unit_base;
473 top : 10 * @unit_base;
476 border-left-width : 1px;
477 border-left-style : solid;
478 border-left-color : @color_list_divider_expand_div;
481 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
482 .ui-btn-inner a.ui-link-inherit,
484 padding-left: 45 * @unit_base;
487 padding-left: 45 * @unit_base;
488 padding-right: 0px; /* ellipsis for sub text */
494 .ui-btn-inner a.ui-link-inherit,
496 padding-left: 36 * @unit_base;
499 padding-left: 36 * @unit_base;
503 .ui-li-has-thumb.ui-li-has-checkbox,
504 .ui-li-has-thumb.ui-li-has-radio {
505 .ui-btn-inner a.ui-link-inherit,
507 padding-left: 78 * @unit_base;
511 padding-left: 78 * @unit_base;
515 .ui-li.ui-li-has-right-circle-btn {
517 padding-right : 48 * @unit_base;
521 .ui-li.ui-li-has-right-btn:not(.ui-swipelist-item) {
523 padding-right : 79 * @unit_base;
527 .ui-li.ui-li-thumbnail-right {
529 padding-right : 52 * @unit_base;
532 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
533 padding-right : 48 * @unit_base;
536 .ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipelist-item) {
537 padding-right : 79 * @unit_base;
540 .ui-li.ui-li-static.ui-li-thumbnail-right {
541 padding-right : 52 * @unit_base;
545 .ui-btn-inner a.ui-link-inherit,
560 .LESStext-ellipsis();
568 max-height: @list-bigicon-size2;
569 max-width: @list-bigicon-size2;
572 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
580 font-size: 16 * @unit_base;
584 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
585 /* ~~~~~~~~~~~~~~ NEW LIST STYLE ~~~~~~~~~ */
586 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
590 font-size: 16 * @unit_base;
591 color: @color_list_sub_text_default;
595 top : 20 * @unit_base;
598 .LESStext-ellipsis();
602 width: @list-smallicon-size;
603 height: @list-smallicon-size;
604 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
611 font-size: 16 * @unit_base;
612 color: @color_list_sub_text_default;
616 top : 16 * @unit_base;
619 .LESStext-ellipsis();
622 width: @list-smallicon-size;
623 height: @list-smallicon-size;
624 margin: 0 0 0 @list-li-padding-horizontal;
628 li:not(.ui-li-has-multiline) .ui-li-text-sub {
630 right : 16 * @unit_base;
631 top: 22 * @unit_base;
635 .ui-li-has-multiline .ui-li-text-sub {
641 top: 35 * @unit_base;
645 .LESStext-ellipsis();
648 .ui-li-has-multiline.ui-li-has-right-btn {
656 .ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
664 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
670 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
676 .ui-li-icon-sub-right,
680 width: @list-smallicon-size;
681 height: @list-smallicon-size;
684 .ui-li-icon-sub-right {
685 right : 8 * @unit_base;
694 &> li.ui-li-dialogue {
695 margin-left: 4 * @unit_base;
696 margin-right : 4 * @unit_base;
697 padding-left : 10 * @unit_base;
698 padding-right : 10 * @unit_base;
700 border-style : solid;
701 border-color : @color_dialogue_border_right;
711 border-top-width : 1px;
712 border-top-left-radius : 3px;
713 border-top-right-radius : 3px;
716 border-bottom-left-radius : 3px;
717 border-bottom-right-radius : 3px;
721 margin-left : 6 * @unit_base;
724 [data-role="button"]:last-child {
725 margin-right : 10 * @unit_base;
729 &> li.ui-li-dialogue.ui-body-s,
730 &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
731 &> li.ui-li-dialogue.ui-btn-up-s {
732 &:not(.ui-li-expanded){
733 background : @color_list_dialogue_bg;
736 &> li.ui-li-dialogue.ui-li-expanded {
737 padding-left : 26 * @unit_base;
738 background : @color_list_expanded_bg;
741 &> li.ui-li-dialogue.ui-li-divider {
742 height: 32 * @unit_base;
746 &> li.ui-li-group-title {
747 padding-top : 32 * @unit_base;
750 &> li.ui-li-group-title span {
751 padding-left : 16 * @unit_base;
754 &> li.ui-li-dialogue-divider {
755 padding-top : 20 * @unit_base;
756 padding-bottom : 0 * @unit_base;
757 padding-left : 10 * @unit_base;
759 margin-left : 4 * @unit_base;
760 margin-right : 4 * @unit_base;
762 background : @color_list_dialogue_bg;
763 font-size : 16 * @unit_base;
765 color : @color_dialogue_main_text;
774 &.ui-li-bubble-receive,
775 &.ui-li-bubble-left {
776 color: @color_list_bubble_receive_text;
777 > .ui-li-bubble-time {
778 color: @color_list_bubble_time_receive_text;
782 &.ui-li-bubble-right {
783 color: @color_list_bubble_sent_text;
784 > .ui-li-bubble-time {
785 color: @color_list_bubble_time_sent_text;
789 color: @color_list_bubble_sos_text;
790 > .ui-li-bubble-time {
791 color: @color_list_bubble_time_sos_text;
794 &.ui-li-bubble-date {
795 background-color: @color_list_bubble_date_bg;
796 color: @color_list_bubble_date_text;
801 span.ui-li-bubble-time {
805 .ui-li-bubble-receive,
810 display: inline-block;
811 background-clip: padding-box;
813 word-wrap: break-word;
814 font-size: @list-li-bubble-font-size;
816 font-size: @list-li-bubble-font-size;
820 min-width: 160 * @unit_base;
821 min-height: 160 * @unit_base;
824 .ui-li-bubble-receive,
829 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
830 border-image-slice: 57 14 21 48 fill;
831 border-image-width: auto;
832 padding: 9px 14px 21px 48px;
834 > .ui-li-bubble-time {
836 display: inline-block;
837 bottom: 8 * @unit_base;
839 font-size: @list-li-bubble-time-font-size;
843 .ui-li-bubble-right {
847 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
848 border-image-slice: 55 47 20 13 fill;
849 border-image-width: auto;
850 padding: 9px 47px 20px 13px;
852 > .ui-li-bubble-time {
854 display: inline-block;
855 bottom: 8 * @unit_base;
857 font-size: @list-li-bubble-time-font-size;
863 height: 24 * @unit_base;
864 background-image: url(images/00_messagebubble_date_bg.png);
865 background-repeat: repeat-x;
866 background-position: center center;
867 font-size: @list-li-bubble-date-font-size;
868 margin: 20 * @unit_base 6 * @unit_base;
869 border: 0px none red;
871 padding-top: 0.5em; // vertical text alignment to center
872 text-align: @style_list_bubble_date_text_align;
874 display: inline-block;
875 background-color: @color_bg;
877 padding-right: 0.5em;
882 // Expandable list animation
885 background-color: @color_list_expandable_expanded_bg;
887 &> .ui-li-expanded .ui-li-expanded { // 3rd~ more depth
888 background-color: @color_list_expandable_expanded_bg;
890 .ui-li-expandable-shown {
892 .LESSimg-expanded-icon;
894 .ui-li-expandable-hidden {
896 .LESSimg-expand-icon;
901 .ui-li-expand-transition-show {
903 -webkit-transition: all 0.2s ease;
904 -moz-transition: all 0.2s ease;
905 -o-transition: all 0.2s ease;
906 -ms-transition: all 0.2s ease;
907 transition: all 0.2s ease;
909 .ui-li-expand-transition-hide {
911 height: 0px !important;
912 min-height: 0px !important;
915 border-top: 0px !important;
916 border-bottom: 0px !important;
917 -webkit-transition: all 0.2s ease;
918 -moz-transition: all 0.2s ease;
919 -o-transition: all 0.2s ease;
920 -ms-transition: all 0.2s ease;
921 transition: all 0.2s ease;
926 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
928 background-image: url(images/00_button_expand_closed.png);
929 background-size: 100%;
932 width: 37 * @unit_base;
933 height: 37 * @unit_base;
934 margin-top: -(@size/2);
935 right: 18 * @unit_base;
939 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
940 .ui-li-expanded-icon {
941 background-image: url(images/00_button_expand_opened.png);
942 background-size: 100%;
945 width: 37 * @unit_base;
946 height: 37 * @unit_base;
947 margin-top: -(@size/2);
948 right: 18 * @unit_base;