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 : -17 * @unit_base;
201 display : inline-block;
208 [data-role="button"] {
220 margin-top : -15 * @unit_base;
222 left : -4 * @unit_base;
224 width : 30 * @unit_base;
225 height : 30 * @unit_base;
228 line-height : 20 * @unit_base;
233 left : 5 * @unit_base;
237 label.ui-btn-icon_only {
247 width : 35 * @unit_base;
248 height : 35 * @unit_base;
251 margin-top : -18 * @unit_base;
258 left : 36 * @unit_base;
262 right : 16 * @unit_base;
266 .ui-li-color-bar + img.ui-li-bigicon:nth-child(2) {
272 width : 3 * @unit_base;
273 height : 65 * @unit_base;
275 top : 0 * @unit_base;
276 left : -13 * @unit_base;
278 background-color : rgba(0, 0, 0, 1);
282 li.ui-li-thumbnail-right {
283 img.ui-li-bigicon.ui-li-thumb {
287 width : 51 * @unit_base;
288 height : 51 * @unit_base;
290 margin-top : -25 * @unit_base;
294 .ui-li.ui-li-has-multiline {
295 .ui-btn-inner a.ui-link-inherit,
297 padding-top : 7 * @unit_base;
298 padding-bottom : 28 * @unit_base;
302 .LESStext-no-ellipsis();
303 padding-right : 16 * @unit_base; /* ellipsis for normal text */
307 /********************************************/
308 /************ Add ellipsis *****************/
309 /********************************************/
310 .ui-li.ui-li-text-ellipsis {
311 .ui-btn-inner a.ui-link-inherit {
312 .LESStext-ellipsis();
316 .LESStext-ellipsis();
320 .LESStext-ellipsis();
324 /********************************************/
325 /*************** Edit Field *****************/
326 /********************************************/
332 outline-color : @color_list_bg;
333 font-size : 23 * @unit_base;
337 padding-bottom : 0px;
341 /********************************************/
342 /*************** Divider ********************/
343 /********************************************/
345 .ui-listview li.ui-li-divider {
346 background: @color_list_divider_bg;
347 color: @color_list_divider_text;
349 border-bottom-width : 0px;
350 border-top-width : 0px;
354 counter-reset: listnumbering;
357 height: 38 * @unit_base;
359 font-size : @list-font-size-divider;
360 &>.ui-btn-inner>.ui-btn-text { // For buttonMarkup-ed dividers
361 font-size : @list-font-size-divider;
366 margin-top: 0 * @unit_base;
369 font-size : @list-font-size-divider;
370 .ui-btn-inner.ui-btn-hastxt {
376 top : 5 * @unit_base;
377 height : 18 * @unit_base;
378 padding-right : 10 * @unit_base;
384 margin-left : 12 * @unit_base;
385 margin-right : 12 * @unit_base;
391 top : 5 * @unit_base;
392 height : 18 * @unit_base;
393 padding-right : 10 * @unit_base;
396 &[data-style="dialogue"] {
397 height: 20 * @unit_base;
400 padding-top : 20 * @unit_base;
401 padding-bottom : 0 * @unit_base;
402 padding-left : 10 * @unit_base;
404 margin-left : 4 * @unit_base;
405 margin-right : 4 * @unit_base;
408 font-size : 16 * @unit_base;
410 color : @color_dialogue_main_text;
411 background : @color_list_bg;
414 &[data-style="check"] {
415 height: 38 * @unit_base;
417 padding-bottom : 0px;
428 width : 32 * @unit_base;
429 height : 32 * @unit_base;
430 background : @color_list_bg;
435 padding-left : 37 * @unit_base;
439 .ui-divider-normal-line {
440 display : inline-block;
443 top : 23 * @unit_base;
445 height : 2 * @unit_base;
447 background : @color_list_divider_text;
451 background : @color_list_divider_text;
452 color : @color_list_bg;
454 .ui-divider-normal-line {
455 background : @color_list_bg;
460 background : @color_list_divider_text;
465 + li.ui-li-dialogue {
466 border-top-left-radius : 3px;
467 border-top-right-radius : 3px;
471 .ui-divider-expand-div {
474 width : 98 * @unit_base;
475 height : 42 * @unit_base;
476 top : 10 * @unit_base;
479 border-left-width : 1px;
480 border-left-style : solid;
481 border-left-color : @color_list_divider_expand_div;
484 .ui-li-has-thumb:not(.ui-li-thumbnail-right) {
485 .ui-btn-inner a.ui-link-inherit,
487 padding-left: 45 * @unit_base;
490 padding-left: 45 * @unit_base;
491 padding-right: 0px; /* ellipsis for sub text */
497 .ui-btn-inner a.ui-link-inherit,
499 padding-left: 36 * @unit_base;
502 padding-left: 36 * @unit_base;
506 .ui-li-has-thumb.ui-li-has-checkbox,
507 .ui-li-has-thumb.ui-li-has-radio {
508 .ui-btn-inner a.ui-link-inherit,
510 padding-left: 78 * @unit_base;
514 padding-left: 78 * @unit_base;
518 .ui-li.ui-li-has-right-circle-btn {
520 padding-right : 48 * @unit_base;
524 .ui-li.ui-li-has-right-btn:not(.ui-swipe) {
526 padding-right : 79 * @unit_base;
530 .ui-li.ui-li-thumbnail-right {
532 padding-right : 52 * @unit_base;
535 .ui-li.ui-li-static.ui-li-has-right-circle-btn {
536 padding-right : 48 * @unit_base;
539 .ui-li.ui-li-static.ui-li-has-right-btn:not(.ui-swipe) {
540 padding-right : 79 * @unit_base;
543 .ui-li.ui-li-static.ui-li-thumbnail-right {
544 padding-right : 52 * @unit_base;
548 .ui-btn-inner a.ui-link-inherit,
563 .LESStext-ellipsis();
571 max-height: @list-bigicon-size2;
572 max-width: @list-bigicon-size2;
575 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
583 font-size: 16 * @unit_base;
587 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
588 /* ~~~~~~~~~~~~~~ NEW LIST STYLE ~~~~~~~~~ */
589 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
593 font-size: 16 * @unit_base;
594 color: @color_list_sub_text_default;
598 top : 20 * @unit_base;
601 .LESStext-ellipsis();
605 width: @list-smallicon-size;
606 height: @list-smallicon-size;
607 margin: 0 @list-li-padding-horizontal 0 @list-li-padding-horizontal;
614 font-size: 16 * @unit_base;
615 color: @color_list_sub_text_default;
619 top : 16 * @unit_base;
622 .LESStext-ellipsis();
625 width: @list-smallicon-size;
626 height: @list-smallicon-size;
627 margin: 0 0 0 @list-li-padding-horizontal;
631 li:not(.ui-li-has-multiline) .ui-li-text-sub {
633 right : 16 * @unit_base;
634 top: 22 * @unit_base;
638 .ui-li-has-multiline .ui-li-text-sub {
644 top: 35 * @unit_base;
648 .LESStext-ellipsis();
651 .ui-li-has-multiline.ui-li-has-right-btn {
659 .ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
667 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
673 .ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
679 .ui-li-icon-sub-right,
683 width: @list-smallicon-size;
684 height: @list-smallicon-size;
687 .ui-li-icon-sub-right {
688 right : 8 * @unit_base;
698 margin-left: 4 * @unit_base;
699 margin-right : 4 * @unit_base;
700 padding-left : 10 * @unit_base;
701 padding-right : 10 * @unit_base;
703 border-style : solid;
704 border-color : @color_dialogue_border_right;
710 border-bottom-width : 0px;
714 border-top-width : 1px;
715 border-top-left-radius : 3px;
716 border-top-right-radius : 3px;
719 border-bottom-left-radius : 3px;
720 border-bottom-right-radius : 3px;
724 margin-left : 6 * @unit_base;
727 [data-role="button"]:last-child {
728 margin-right : 10 * @unit_base;
738 .ui-li-text-sub, .ui-toggle-switch {
739 right : 10 * @unit_base;
741 &.ui-li-has-checkbox,
743 padding-left : 36 * @unit_base;
745 .ui-checkbox, .ui-radio {
749 &.ui-li-has-multiline.ui-li-static {
751 padding-left : 10 * @unit_base;
754 padding-right : 10 * @unit_base;
756 &.ui-li-has-checkbox,
759 padding-left : 42 * @unit_base;
765 &> li.ui-li-dialogue.ui-body-s,
766 &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
767 &> li.ui-li-dialogue.ui-btn-up-s {
768 &:not(.ui-li-expanded){
769 background : @color_list_dialogue_bg;
772 &> li.ui-li-dialogue.ui-li-expanded {
773 padding-left : 26 * @unit_base;
774 background : @color_list_expanded_bg;
777 &> li.ui-li-dialogue.ui-li-divider {
778 height: 32 * @unit_base;
782 &> li.ui-li-group-title {
783 padding-top : 32 * @unit_base;
786 &> li.ui-li-group-title span {
787 padding-left : 16 * @unit_base;
790 &> li.ui-li-dialogue-divider {
791 padding-top : 20 * @unit_base;
792 padding-bottom : 0 * @unit_base;
793 padding-left : 10 * @unit_base;
795 margin-left : 4 * @unit_base;
796 margin-right : 4 * @unit_base;
798 background : @color_list_dialogue_bg;
799 font-size : 16 * @unit_base;
801 color : @color_dialogue_main_text;
807 li.ui-li-dialogue-edit{
808 padding-left : 116 * @unit_base;
809 padding-top : 12 * @unit_base;
810 padding-bottom : 12 * @unit_base;
814 left : 10 * @unit_base;
815 width : 91 * @unit_base;
816 padding-right : 8 * @unit_base;
817 display : inline-block;
819 margin-top : -13 * @unit_base;
821 border-right-color : rgba(185, 184, 178, 1);
822 border-right-width : 1px;
823 border-right-style : solid;
827 font-size : 22 * @unit_base;
828 background : transparent;
829 outline-color : transparent;
836 > .ui-li.ui-li-dialogue-edit.ui-li-has-right-btn {
837 padding-right : 110 * @unit_base;
846 &.ui-li-bubble-receive,
847 &.ui-li-bubble-left {
848 color: @color_list_bubble_receive_text;
849 > .ui-li-bubble-time {
850 color: @color_list_bubble_time_receive_text;
854 &.ui-li-bubble-right {
855 color: @color_list_bubble_sent_text;
856 > .ui-li-bubble-time {
857 color: @color_list_bubble_time_sent_text;
861 color: @color_list_bubble_sos_text;
862 > .ui-li-bubble-time {
863 color: @color_list_bubble_time_sos_text;
866 &.ui-li-bubble-date {
867 background-color: @color_list_bubble_date_bg;
868 color: @color_list_bubble_date_text;
873 span.ui-li-bubble-time {
877 .ui-li-bubble-receive,
882 display: inline-block;
883 background-clip: padding-box;
885 word-wrap: break-word;
886 font-size: @list-li-bubble-font-size;
888 font-size: @list-li-bubble-font-size;
892 min-width: 160 * @unit_base;
893 min-height: 160 * @unit_base;
896 .ui-li-bubble-receive,
900 margin-right: 1.6rem;
901 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
902 border-image-slice: 57 14 21 48 fill;
903 border-image-width: auto;
904 padding: 9px 14px 21px 48px;
906 > .ui-li-bubble-time {
908 display: inline-block;
909 bottom: 8 * @unit_base;
911 font-size: @list-li-bubble-time-font-size;
915 .ui-li-bubble-right {
918 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
919 border-image-slice: 55 47 20 13 fill;
920 border-image-width: auto;
921 padding: 9px 47px 20px 13px;
923 > .ui-li-bubble-time {
925 display: inline-block;
926 bottom: 8 * @unit_base;
928 font-size: @list-li-bubble-time-font-size;
934 height: 24 * @unit_base;
935 background-image: url(images/00_messagebubble_date_bg.png);
936 background-repeat: repeat-x;
937 background-position: center center;
938 font-size: @list-li-bubble-date-font-size;
939 margin: 20 * @unit_base 6 * @unit_base;
940 border: 0px none red;
942 padding-top: 0.5em; // vertical text alignment to center
945 display: inline-block;
946 background-color: @color_bg;
948 padding-right: 0.5em;
953 @-webkit-keyframes addliitem {
955 -webkit-transform: scale(0.5);
956 -moz-transform: scale(0.5);
960 -webkit-transform: scale(1);
961 -moz-transform: scale(1);
967 -webkit-animation-name: addliitem;
968 -moz-animation-name: addliitem;
969 -webkit-animation-duration: 0.5s;
970 -moz-animation-duration: 0.5s;
971 -webkit-transition-timing-function: linear;
972 -moz-transition-timing-function: linear;
975 @-webkit-keyframes removeliitem {
977 -webkit-transform: scale(1);
978 -moz-transform: scale(1);
982 -webkit-transform: scale(0.5);
983 -moz-transform: scale(0.5);
989 -webkit-animation-name: removeliitem;
990 -moz-animation-name: removeliitem;
991 -webkit-animation-duration: 0.5s;
992 -moz-animation-duration: 0.5s;
993 -webkit-transition-timing-function: linear;
994 -moz-transition-timing-function: linear;