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;
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;
706 border-top-width : 0px;
711 border-bottom-width : 0px;
715 border-top-width : 1px;
716 border-top-left-radius : 3px;
717 border-top-right-radius : 3px;
720 border-bottom-left-radius : 3px;
721 border-bottom-right-radius : 3px;
725 margin-left : 6 * @unit_base;
728 [data-role="button"]:last-child {
729 margin-right : 10 * @unit_base;
739 .ui-li-text-sub, .ui-toggle-switch {
740 right : 10 * @unit_base;
742 &.ui-li-has-checkbox,
744 padding-left : 36 * @unit_base;
746 .ui-checkbox, .ui-radio {
750 &.ui-li-has-multiline.ui-li-static {
752 padding-left : 10 * @unit_base;
755 padding-right : 10 * @unit_base;
757 &.ui-li-has-checkbox,
760 padding-left : 42 * @unit_base;
766 li.ui-li-divider + .ui-li-dialogue {
767 border-top-width : 1px;
770 &> li.ui-li-dialogue.ui-body-s,
771 &> li.ui-li-dialogue.ui-btn-hover-up-s:not(.ui-btn-down-s),
772 &> li.ui-li-dialogue.ui-btn-up-s {
773 &:not(.ui-li-expanded){
774 background : @color_list_dialogue_bg;
777 &> li.ui-li-dialogue.ui-li-expanded {
778 padding-left : 26 * @unit_base;
779 background : @color_list_expanded_bg;
782 &> li.ui-li-dialogue.ui-li-divider {
783 height: 32 * @unit_base;
787 &> li.ui-li-group-title {
788 padding-top : 32 * @unit_base;
791 &> li.ui-li-group-title span {
792 padding-left : 16 * @unit_base;
795 &> li.ui-li-dialogue-divider {
796 padding-top : 20 * @unit_base;
797 padding-bottom : 0 * @unit_base;
798 padding-left : 10 * @unit_base;
800 margin-left : 4 * @unit_base;
801 margin-right : 4 * @unit_base;
803 background : @color_list_dialogue_bg;
804 font-size : 16 * @unit_base;
806 color : @color_dialogue_main_text;
812 li.ui-li-dialogue-edit{
813 padding-left : 116 * @unit_base;
814 padding-top : 12 * @unit_base;
815 padding-bottom : 12 * @unit_base;
819 left : 10 * @unit_base;
820 width : 91 * @unit_base;
821 padding-right : 8 * @unit_base;
822 display : inline-block;
824 margin-top : -13 * @unit_base;
826 border-right-color : rgba(185, 184, 178, 1);
827 border-right-width : 1px;
828 border-right-style : solid;
832 font-size : 22 * @unit_base;
833 background : transparent;
834 outline-color : transparent;
841 > .ui-li.ui-li-dialogue-edit.ui-li-has-right-btn {
842 padding-right : 110 * @unit_base;
851 &.ui-li-bubble-receive,
852 &.ui-li-bubble-left {
853 color: @color_list_bubble_receive_text;
854 > .ui-li-bubble-time {
855 color: @color_list_bubble_time_receive_text;
859 &.ui-li-bubble-right {
860 color: @color_list_bubble_sent_text;
861 > .ui-li-bubble-time {
862 color: @color_list_bubble_time_sent_text;
866 color: @color_list_bubble_sos_text;
867 > .ui-li-bubble-time {
868 color: @color_list_bubble_time_sos_text;
871 &.ui-li-bubble-date {
872 background-color: @color_list_bubble_date_bg;
873 color: @color_list_bubble_date_text;
878 span.ui-li-bubble-time {
882 .ui-li-bubble-receive,
887 display: inline-block;
888 background-clip: padding-box;
890 word-wrap: break-word;
891 font-size: @list-li-bubble-font-size;
893 font-size: @list-li-bubble-font-size;
897 min-width: 160 * @unit_base;
898 min-height: 160 * @unit_base;
901 .ui-li-bubble-receive,
905 margin-right: 1.6rem;
906 border-image-source: url(images/00_messagebubble_bg_receive.9.png);
907 border-image-slice: 57 14 21 48 fill;
908 border-image-width: auto;
909 padding: 9px 14px 21px 48px;
911 > .ui-li-bubble-time {
913 display: inline-block;
914 bottom: 8 * @unit_base;
916 font-size: @list-li-bubble-time-font-size;
920 .ui-li-bubble-right {
923 border-image-source: url(images/00_messagebubble_bg_sent.9.png);
924 border-image-slice: 55 47 20 13 fill;
925 border-image-width: auto;
926 padding: 9px 47px 20px 13px;
928 > .ui-li-bubble-time {
930 display: inline-block;
931 bottom: 8 * @unit_base;
933 font-size: @list-li-bubble-time-font-size;
939 height: 24 * @unit_base;
940 background-image: url(images/00_messagebubble_date_bg.png);
941 background-repeat: repeat-x;
942 background-position: center center;
943 font-size: @list-li-bubble-date-font-size;
944 margin: 20 * @unit_base 6 * @unit_base;
945 border: 0px none red;
947 padding-top: 0.5em; // vertical text alignment to center
950 display: inline-block;
951 background-color: @color_bg;
953 padding-right: 0.5em;
958 @-webkit-keyframes addliitem {
960 -webkit-transform: scale(0.5);
961 -moz-transform: scale(0.5);
965 -webkit-transform: scale(1);
966 -moz-transform: scale(1);
972 -webkit-animation-name: addliitem;
973 -moz-animation-name: addliitem;
974 -webkit-animation-duration: 0.5s;
975 -moz-animation-duration: 0.5s;
976 -webkit-transition-timing-function: linear;
977 -moz-transition-timing-function: linear;
980 @-webkit-keyframes removeliitem {
982 -webkit-transform: scale(1);
983 -moz-transform: scale(1);
987 -webkit-transform: scale(0.5);
988 -moz-transform: scale(0.5);
994 -webkit-animation-name: removeliitem;
995 -moz-animation-name: removeliitem;
996 -webkit-animation-duration: 0.5s;
997 -moz-animation-duration: 0.5s;
998 -webkit-transition-timing-function: linear;
999 -moz-transition-timing-function: linear;