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-li-bubble-font-size: 19 * @unit_base;
13 @list-li-bubble-time-font-size: 11 * @unit_base;
14 @list-li-bubble-date-font-size: 16 * @unit_base;
16 @list-li-sub-left-width: 187 * @unit_base;
17 @list-li-main-right-padding: 187 * @unit_base;
20 @list-li-email-top-padding: 8 * @unit_base;
21 @list-li-email-subline-top-padding: 4 * @unit_base;
22 @list-li-email-sub-line-height: 40 * @unit_base;
23 @list-email-icon-width: 56 * @unit_base;
24 @list-email-icon-height: 60 * @unit_base;
26 @list-email-icon-top-padding: 16 * @unit_base;
27 @list-email-attach-icon-width: 40 * @unit_base;
28 @list-email-attach-icon-height: 40 * @unit_base;
29 @list-email-warning-icon-width: 30 * @unit_base;
30 @list-email-warning-icon-height: 30 * @unit_base;
31 @list-email-text-padding-left: 60 * @unit_base;
33 /************************/
37 counter-reset: listnumbering;
39 border-top-color: @color_list_border_bottom;
41 li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
42 padding-right: 0 * @unit_base; // Clear default button padding-right
46 border-left-width : 0px;
47 border-right-width : 0px;
49 border-top-width: 0px;
52 border-bottom-width: 1px;
53 border-bottom-style: solid;
54 border-bottom-color: @color_list_border_bottom;
55 margin-left : 13 * @unit_base;
56 margin-right : 13 * @unit_base;
61 background-color: @color_bg;
63 border-bottom-width: 1px;
64 border-bottom-style: solid;
65 border-bottom-color: @color_list_border_bottom;
66 margin-left : 13 * @unit_base;
67 margin-right : 13 * @unit_base;
71 .ui-li:not(.ui-li-divider) {
72 &:not(.ui-li-static) {
73 min-height : 55 * @unit_base;
77 .ui-li.ui-li-has-multiline:not(.ui-li-divider) {
78 &:not(.ui-li-static) {
79 min-height : 64 * @unit_base;
83 li.ui-btn-up-s, li.ui-btn-hover-s {
85 background-color: @color_bg;
90 background-color: @color_list_press;
93 /* listview: fonts for li with a link */
94 li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
95 li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
96 color: @color_list_main_text_unfocus;
99 li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
100 color: @color_list_main_text_focus;
106 margin-left: -8 * @unit_base;
107 margin-right: -8 * @unit_base;
120 .ui-collapsible-heading {
124 font-size : @list-font-size-main;
127 .ui-collapsible-heading,
128 .ui-li.ui-field-contain {
136 .ui-btn { // NOTE: For vertical aligning buttons. It breaks collapsible size. Refactor it!
142 .ui-collapsible-heading,
143 .ui-collapsible > .ui-collapsible-content,
149 font-size : @list-font-size-main;
150 font-weight : normal;
153 display : inline-block;
158 .LESStext-ellipsis();
162 &.ui-field-contain:last-child {
163 border-bottom-width: 1px;
166 &.ui-collapsible-heading>.ui-collapsible-heading-toggle {
173 &>.ui-btn-inner.ui-btn-hastxt {
177 .ui-btn-inner a.ui-link-inherit,
178 .ui-collapsible-heading-toggle > .ui-btn-inner,
181 padding-top : 15 * @unit_base;
182 padding-bottom : 15 * @unit_base;
185 white-space: normal; // default: 1line
187 border-left-width : 0px;
188 border-right-width : 0px;
191 .ui-btn-inner a.ui-link-inherit,
192 .ui-collapsible-heading-toggle {
193 .LESStext-no-ellipsis();
199 margin-top : -20 * @unit_base;
201 display : inline-block;
207 .ui-toggleswitch.ui-toggleswitch-image-style {
209 margin-top : -17 * @unit_base;
215 [data-role="button"] {
227 margin-top : -15 * @unit_base;
229 left : -4 * @unit_base;
231 width : 30 * @unit_base;
232 height : 30 * @unit_base;
235 line-height : 20 * @unit_base;
240 left : 5 * @unit_base;
244 label.ui-btn-icon_only {
254 width : 35 * @unit_base;
255 height : 35 * @unit_base;
258 margin-top : -18 * @unit_base;
265 left : 36 * @unit_base;
269 right : 16 * @unit_base;
273 .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
279 width : 3 * @unit_base;
280 height : 65 * @unit_base;
282 top : 0 * @unit_base;
283 left : -13 * @unit_base;
285 background-color : rgba(0, 0, 0, 1);
289 li.ui-li-thumbnail-right {
290 img.ui-li-bigicon.ui-li-thumb {
294 width : 51 * @unit_base;
295 height : 51 * @unit_base;
297 margin-top : -25 * @unit_base;
301 .ui-li.ui-li-has-multiline {
302 .ui-btn-inner a.ui-link-inherit,
304 padding-top : 7 * @unit_base;
305 padding-bottom : 28 * @unit_base;
309 .LESStext-no-ellipsis();
310 padding-right : 16 * @unit_base; /* ellipsis for normal text */
314 /********************************************/
315 /************ Add ellipsis *****************/
316 /********************************************/
317 .ui-li.ui-li-text-ellipsis {
318 .ui-btn-inner a.ui-link-inherit {
319 .LESStext-ellipsis();
323 .LESStext-ellipsis();
327 .LESStext-ellipsis();
331 /********************************************/
332 /*************** Edit Field *****************/
333 /********************************************/
339 outline-color : @color_list_bg;
340 font-size : 23 * @unit_base;
344 padding-bottom : 0px;
348 /********************************************/
349 /*************** Divider ********************/
350 /********************************************/
352 .ui-listview li.ui-li-divider {
353 background: @color_list_divider_bg;
354 color: @color_list_divider_text;
356 border-bottom-width : 0px;
357 border-top-width : 0px;
361 counter-reset: listnumbering;
364 height: 38 * @unit_base;
366 font-size : @list-font-size-divider;
367 &>.ui-btn-inner>.ui-btn-text { // For buttonMarkup-ed dividers
368 font-size : @list-font-size-divider;
373 margin-top: 0 * @unit_base;
376 font-size : @list-font-size-divider;
377 .ui-btn-inner.ui-btn-hastxt {
383 top : 5 * @unit_base;
384 height : 18 * @unit_base;
385 padding-right : 10 * @unit_base;
391 margin-left : 12 * @unit_base;
392 margin-right : 12 * @unit_base;
398 top : 5 * @unit_base;
399 height : 18 * @unit_base;
400 padding-right : 10 * @unit_base;
403 &[data-style="dialogue"] {
404 height: 20 * @unit_base;
407 padding-top : 20 * @unit_base;
408 padding-bottom : 0 * @unit_base;
409 padding-left : 10 * @unit_base;
411 margin-left : 4 * @unit_base;
412 margin-right : 4 * @unit_base;
415 font-size : 16 * @unit_base;
417 color : @color_dialogue_main_text;
418 background : @color_list_bg;
421 &[data-style="check"] {
422 height: 38 * @unit_base;
424 padding-bottom : 0px;
435 width : 32 * @unit_base;
436 height : 32 * @unit_base;
437 background : @color_list_bg;
442 padding-left : 37 * @unit_base;
446 .ui-divider-normal-line {
447 display : inline-block;
450 top : 23 * @unit_base;
452 height : 2 * @unit_base;
454 background : @color_list_divider_text;
458 background : @color_list_divider_text;
459 color : @color_list_bg;
461 .ui-divider-normal-line {
462 background : @color_list_bg;
467 background : @color_list_divider_text;
472 + li.ui-li-dialogue {
473 border-top-left-radius : 3px;
474 border-top-right-radius : 3px;
478 .ui-divider-expand-div {
481 width : 98 * @unit_base;
482 height : 42 * @unit_base;
483 top : 10 * @unit_base;
486 border-left-width : 1px;
487 border-left-style : solid;
488 border-left-color : @color_list_divider_expand_div;
491 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
492 .ui-btn-inner a.ui-link-inherit,
494 padding-left: 45 * @unit_base;
497 padding-left: 45 * @unit_base;
498 padding-right: 0px; /* ellipsis for sub text */
504 .ui-btn-inner a.ui-link-inherit,
506 padding-left: 36 * @unit_base;
509 padding-left: 36 * @unit_base;
513 .ui-li-has-thumb.ui-li-has-checkbox,
514 .ui-li-has-thumb.ui-li-has-radio {
515 .ui-btn-inner a.ui-link-inherit,
517 padding-left: 78 * @unit_base;
521 padding-left: 78 * @unit_base;
525 .ui-li.ui-li-has-right-circle-btn {
527 padding-right : 48 * @unit_base;
531 .ui-li.ui-li-has-right-btn:not(.ui-swipelist-item) {
533 padding-right : 79 * @unit_base;
537 .ui-li.ui-li-thumbnail-right {
539 padding-right : 52 * @unit_base;
542 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
543 padding-right : 48 * @unit_base;
546 .ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipelist-item) {
547 padding-right : 79 * @unit_base;
550 .ui-li.ui-li-static.ui-li-thumbnail-right {
551 padding-right : 52 * @unit_base;
555 .ui-btn-inner a.ui-link-inherit,
570 .LESStext-ellipsis();
578 max-height: @list-bigicon-size2;
579 max-width: @list-bigicon-size2;
582 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
590 font-size: 16 * @unit_base;
594 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
595 /* ~~~~~~~~~~~~~~ NEW LIST STYLE ~~~~~~~~~ */
596 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
600 font-size: 16 * @unit_base;
601 color: @color_list_sub_text_default;
605 top : 20 * @unit_base;
608 .LESStext-ellipsis();
612 width: @list-smallicon-size;
613 height: @list-smallicon-size;
614 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
621 font-size: 16 * @unit_base;
622 color: @color_list_sub_text_default;
626 top : 16 * @unit_base;
629 .LESStext-ellipsis();
632 width: @list-smallicon-size;
633 height: @list-smallicon-size;
634 margin: 0 0 0 @list-li-padding-horizontal;
638 li:not(.ui-li-has-multiline) .ui-li-text-sub {
640 right : 16 * @unit_base;
641 top: 22 * @unit_base;
645 .ui-li-has-multiline .ui-li-text-sub {
651 top: 35 * @unit_base;
655 .LESStext-ellipsis();
658 .ui-li-has-multiline.ui-li-has-right-btn {
666 .ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
674 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
680 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
686 .ui-li-icon-sub-right,
690 width: @list-smallicon-size;
691 height: @list-smallicon-size;
694 .ui-li-icon-sub-right {
695 right : 8 * @unit_base;
705 margin-left: 4 * @unit_base;
706 margin-right : 4 * @unit_base;
707 padding-left : 10 * @unit_base;
708 padding-right : 10 * @unit_base;
710 border-style : solid;
711 border-color : @color_dialogue_border_right;
721 border-top-width : 1px;
722 border-top-left-radius : 3px;
723 border-top-right-radius : 3px;
726 border-bottom-left-radius : 3px;
727 border-bottom-right-radius : 3px;
731 margin-left : 6 * @unit_base;
734 [data-role="button"]:last-child {
735 margin-right : 10 * @unit_base;
739 &> li.ui-li-dialogue.ui-body-s,
740 &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
741 &> li.ui-li-dialogue.ui-btn-up-s {
742 &:not(.ui-li-expanded){
743 background : @color_list_dialogue_bg;
746 &> li.ui-li-dialogue.ui-li-expanded {
747 padding-left : 26 * @unit_base;
748 background : @color_list_expanded_bg;
751 &> li.ui-li-dialogue.ui-li-divider {
752 height: 32 * @unit_base;
756 &> li.ui-li-group-title {
757 padding-top : 32 * @unit_base;
760 &> li.ui-li-group-title span {
761 padding-left : 16 * @unit_base;
764 &> li.ui-li-dialogue-divider {
765 padding-top : 20 * @unit_base;
766 padding-bottom : 0 * @unit_base;
767 padding-left : 10 * @unit_base;
769 margin-left : 4 * @unit_base;
770 margin-right : 4 * @unit_base;
772 background : @color_list_dialogue_bg;
773 font-size : 16 * @unit_base;
775 color : @color_dialogue_main_text;
784 &.ui-li-bubble-receive,
785 &.ui-li-bubble-left {
786 color: @color_list_bubble_receive_text;
787 > .ui-li-bubble-time {
788 color: @color_list_bubble_time_receive_text;
792 &.ui-li-bubble-right {
793 color: @color_list_bubble_sent_text;
794 > .ui-li-bubble-time {
795 color: @color_list_bubble_time_sent_text;
799 color: @color_list_bubble_sos_text;
800 > .ui-li-bubble-time {
801 color: @color_list_bubble_time_sos_text;
804 &.ui-li-bubble-date {
805 background-color: @color_list_bubble_date_bg;
806 color: @color_list_bubble_date_text;
811 span.ui-li-bubble-time {
815 .ui-li-bubble-receive,
820 display: inline-block;
821 background-clip: padding-box;
823 word-wrap: break-word;
824 font-size: @list-li-bubble-font-size;
826 font-size: @list-li-bubble-font-size;
830 min-width: 160 * @unit_base;
831 min-height: 160 * @unit_base;
834 .ui-li-bubble-receive,
839 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
840 border-image-slice: 57 14 21 48 fill;
841 border-image-width: auto;
842 padding: 9px 14px 21px 48px;
844 > .ui-li-bubble-time {
846 display: inline-block;
847 bottom: 8 * @unit_base;
849 font-size: @list-li-bubble-time-font-size;
853 .ui-li-bubble-right {
857 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
858 border-image-slice: 55 47 20 13 fill;
859 border-image-width: auto;
860 padding: 9px 47px 20px 13px;
862 > .ui-li-bubble-time {
864 display: inline-block;
865 bottom: 8 * @unit_base;
867 font-size: @list-li-bubble-time-font-size;
873 height: 24 * @unit_base;
874 background-image: url(images/00_messagebubble_date_bg.png);
875 background-repeat: repeat-x;
876 background-position: center center;
877 font-size: @list-li-bubble-date-font-size;
878 margin: 20 * @unit_base 6 * @unit_base;
879 border: 0px none red;
881 padding-top: 0.5em; // vertical text alignment to center
884 display: inline-block;
885 background-color: @color_bg;
887 padding-right: 0.5em;
892 // Expandable list animation
895 background-color: @color_list_expandable_expanded_bg;
897 .ui-li-expanded .ui-li-expanded { // 3rd~ more depth
898 background-color: @color_list_expandable_expanded_bg;
900 .ui-li-expandable-shown {
902 .LESSimg-expanded-icon;
904 .ui-li-expandable-hidden {
906 .LESSimg-expand-icon;
911 .ui-li-expand-transition-show {
913 -webkit-transition: all 0.2s ease;
914 -moz-transition: all 0.2s ease;
915 -o-transition: all 0.2s ease;
916 -ms-transition: all 0.2s ease;
917 transition: all 0.2s ease;
919 .ui-li-expand-transition-hide {
921 height: 0px !important;
922 min-height: 0px !important;
925 border-top: 0px !important;
926 border-bottom: 0px !important;
927 -webkit-transition: all 0.2s ease;
928 -moz-transition: all 0.2s ease;
929 -o-transition: all 0.2s ease;
930 -ms-transition: all 0.2s ease;
931 transition: all 0.2s ease;
936 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
938 background-image: url(images/00_button_expand_closed.png);
939 background-size: 100%;
942 width: 37 * @unit_base;
943 height: 37 * @unit_base;
944 margin-top: -(@size/2);
945 right: 18 * @unit_base;
949 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:37*@unit_base) {
950 .ui-li-expanded-icon {
951 background-image: url(images/00_button_expand_opened.png);
952 background-size: 100%;
955 width: 37 * @unit_base;
956 height: 37 * @unit_base;
957 margin-top: -(@size/2);
958 right: 18 * @unit_base;