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: 44 * @unit_base;
13 @list-font-size-sub: 32 * @unit_base;
14 @list-font-size-divider: 28 * @unit_base; // NOTE: defined in dialogue group
16 @list-dialogue-font-size-main: 38 * @unit_base;
17 @list-dialogue-font-size-sub: 32 * @unit_base;
20 @list-font-weight: normal;
22 @list-li-height: 112 * @unit_base;
23 @list-li-2line-height: 128 * @unit_base;
24 @list-li-3line-height: 160 * @unit_base;
25 @list-li-top-padding: 10 * @unit_base;
26 @list-li-main-line-height: 60 * @unit_base;
27 @list-li-sub-line-height: 48 * @unit_base;
28 @list-li-padding-horizontal: 16 * @unit_base;
29 @list-li-divider-height: 32 * @unit_base;
31 @list-smallicon-size: 32 * @unit_base;
32 @list-bigicon-size: 64 * @unit_base;
33 @list-bigicon-size2: 96 * @unit_base;
34 @list-checkbox-size: 42 * @unit_base;
36 @list-progressbar-height: 16 * @unit_base;
39 @list-li-bubble-font-size: 38 * @unit_base;
40 @list-li-bubble-time-font-size: 26 * @unit_base;
41 @list-li-bubble-date-font-size: @list-li-bubble-time-font-size;
42 @list-li-bubble-corner-radius: 9 * @unit_base; // TODO: fit to 9px (picked from bg images)
44 @list-li-dialogue-width: 16 * @unit_base;
46 @list-li-sub-left-width: 187 * @unit_base;
47 @list-li-main-right-padding: 187 * @unit_base;
50 @list-li-email-top-padding: 8 * @unit_base;
51 @list-li-email-subline-top-padding: 4 * @unit_base;
52 @list-li-email-sub-line-height: 40 * @unit_base;
53 @list-email-icon-width: 56 * @unit_base;
54 @list-email-icon-height: 60 * @unit_base;
56 @list-email-icon-top-padding: 16 * @unit_base;
57 @list-email-attach-icon-width: 40 * @unit_base;
58 @list-email-attach-icon-height: 40 * @unit_base;
59 @list-email-warning-icon-width: 30 * @unit_base;
60 @list-email-warning-icon-height: 30 * @unit_base;
61 @list-email-text-padding-left: 60 * @unit_base;
63 /************************/
67 counter-reset: listnumbering;
68 border-top-width: 1px;
69 border-top-style: solid;
71 // Override default button behavior for listitem
72 li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
73 li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
74 li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
75 font-size: @font_size_list_main_text;
78 li.ui-btn > .ui-btn-hastxt > .ui-btn-text.ui-btn-text-padding-right {
79 padding-right: 0 * @unit_base; // Clear default button padding-right
83 // list item separator line
84 border-bottom-width: 1px;
85 border-bottom-style: solid;
91 margin: -16 * @unit_base;
108 .ui-li.ui-field-contain {
124 text-overflow: ellipsis;
130 &.ui-field-contain:last-child {
131 border-bottom-width: 1px;
139 .ui-btn-inner a.ui-link-inherit,
141 padding: .7em 16*@unit_base;
147 font-weight: @list-font-weight;
148 padding: 0px @list-li-padding-horizontal;
151 font-size: @font_size_list_main_text;
154 counter-reset: listnumbering;
155 font-size: @list-font-size-divider;
156 padding-top: @list-font-size-divider;
158 height : @list-font-size-divider;
164 ol.ui-listview .ui-link-inherit:before,
165 ol.ui-listview .ui-li-static:before,
168 display: inline-block;
171 counter-increment: listnumbering;
172 content: counter(listnumbering) ". ";
175 .ui-li-jsnumbering:before {
176 content: "" !important; /* to avoid chance of duplication */
180 // Detailed li styles
184 border-right-width: 1px;
185 border-left-width: 1px;
189 .ui-btn-inner a.ui-link-inherit,
191 min-height: 60 * @unit_base;
192 padding-left: 100 * @unit_base;
196 .ui-btn-inner a.ui-link-inherit,
203 .ui-btn-inner a.ui-link-inherit,
209 .ui-btn-inner a.ui-link-inherit,
213 &.ui-li-has-count .ui-btn-inner a.ui-link-inherit,
214 &.ui-li-static.ui-li-has-count {
223 text-overflow: ellipsis;
231 margin: -.5em 0 .6em;
232 text-overflow: ellipsis;
241 max-height: @list-bigicon-size2;
242 max-width: @list-bigicon-size2;
250 @media all and (min-width: 480px){
251 .ui-li-aside { width: 45%; }
257 .ui-btn-inner a.ui-link-inherit,
273 .ui-li-divider .ui-li-count,
274 .ui-li-static .ui-li-count {
277 .ui-li-has-alt .ui-li-count {
285 border-left-width: 1px;
298 border-bottom-width: 1px;
314 .ui-listview * .ui-btn-inner > .ui-btn > .ui-btn-inner {
318 .ui-listview-filter {
321 margin: -15px -15px 15px -15px;
329 .ui-listview-filter-inset {
330 margin: -15px -5px -15px -5px;
331 background: transparent;
333 .ui-li.ui-screen-hidden {
340 font-size: @font_size_list_sub_text;
344 /* listview: size for li with a link */
346 .ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
347 .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit,
348 .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
355 // =======================
357 // =======================
359 display: inline-block;
360 text-overflow: ellipsis;
365 .LESSli-reset-position-1line(@height: @list-li-main-line-height, @padding-left: @list-li-padding-horizontal) {
367 height: @height !important;
369 padding-left: @padding-left;
371 .LESSli-reset-position(@height: @list-li-2line-height) {
373 padding: 0 @list-li-padding-horizontal;
377 .LESSli-reset-position-3line(@height: @list-li-3line-height) {
379 padding: 0 @list-li-padding-horizontal;
383 .LESStext-main-1line(@left:@list-li-padding-horizontal) {
385 font-size: @font_size_list_main_text;
392 .LESStext-sub-1line() {
396 font-size: @font_size_list_sub_text;
397 color: @color_list_sub_text_default;
402 .LESStext-sub-setting() {
404 color: @color_list_sub_text_settings;
408 .LESStext-email-sub1-setting() {
410 color: @color_list_sub_text_settings;
414 .LESStext-sub-1line-left(@left:@list-li-padding-horizontal) {
415 .ui-li-text-sub-left {
416 font-size: @font_size_list_sub_text;
419 width: @list-li-sub-left-width;
420 line-height: @list-li-main-line-height;
426 .LESStext-main-1line-right(@left:@list-li-main-right-padding) {
427 .ui-li-text-main-right {
428 font-size: @font_size_list_main_text;
432 padding-left: @list-li-padding-horizontal;
433 border-left: 1px rgba(68, 68, 68, 255) solid;
436 .LESStext-main-1line-right-setting() {
437 .ui-li-text-main-right {
438 color: @color_list_sub_text_settings;
443 .LESStext-main-2line(@left:@list-li-padding-horizontal, @top: @list-li-top-padding) {
446 font-size: @font_size_list_main_text;
447 line-height: @list-li-main-line-height;
450 text-overflow: ellipsis;
456 .LESStext-sub-2line-left(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
459 font-size: @font_size_list_sub_text;
460 line-height: @list-li-sub-line-height;
461 color: @color_list_sub_text_default;
464 text-overflow: ellipsis;
471 .LESStext-sub-2line-right(@right:@list-li-padding-horizontal, @top: @list-li-top-padding) {
474 font-size: @font_size_list_sub_text;
475 line-height: @list-li-sub-line-height;
476 color: @color_list_sub_text_default;
479 text-overflow: ellipsis;
486 .LESStext-main-3line(@left:@list-li-padding-horizontal, @top: @list-li-top-padding) {
489 font-size: @font_size_list_main_text;
490 line-height: @list-li-sub-line-height;
493 text-overflow: ellipsis;
500 .LESStext-email-main-3line(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding) {
503 font-size: @font_size_list_main_text;
504 line-height: @list-li-main-line-height;
507 text-overflow: ellipsis;
513 .LESStext-sub-3line-left1(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
516 font-size: @font_size_list_sub_text;
517 line-height: @list-li-sub-line-height;
518 color: @color_list_sub_text_default;
521 text-overflow: ellipsis;
527 .LESStext-sub-3line-left2(@left:@list-li-padding-horizontal, @top: @list-li-top-padding+@list-li-main-line-height) {
530 font-size: @font_size_list_sub_text;
531 line-height: @list-li-sub-line-height;
532 color: @color_list_sub_text_default;
535 text-overflow: ellipsis;
542 .LESStext-email-sub-3line-sub1(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top:@list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding) {
545 font-size: @font_size_list_sub_text;
546 line-height: @list-li-email-sub-line-height;
547 color: @color_list_name_text;
550 text-overflow: ellipsis;
556 .LESStext-email-sub-3line-sub2(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top:@list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height) {
559 font-size: @font_size_list_sub_text;
560 line-height: @list-li-email-sub-line-height;
561 color: @color_list_contents_text;
564 text-overflow: ellipsis;
570 .LESStext-email-sub-3line-sub3(@right:@list-li-padding-horizontal, @top: @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height) {
573 font-size: @font_size_list_sub_text;
574 line-height: @list-li-email-sub-line-height;
575 color: @color_list_sub_text_default;
578 text-overflow: ellipsis;
587 .LESSsubicon-right(@right:@list-li-padding-horizontal, @top: @list-li-top-padding) { // NOTE: This can be changed according to checkbox implementation!
593 width: @list-smallicon-size;
594 height: @list-smallicon-size;
599 .LESSsubicon-right-resize(@right:@list-li-padding-horizontal, @top: @list-li-top-padding, @width:@list-smallicon-size, @height:@list-smallicon-size ) { // NOTE: This can be changed according to checkbox implementation!
600 .ui-checkbox.favorite,
601 .ui-icon-checkbox-off,
602 .ui-icon-checkbox-on,
603 .ui-icon-checkbox-off-press,
604 .ui-icon-checkbox-on-press,
608 .ui-icon-radio-off-press,
609 .ui-icon-radio-on-press {
619 .ui-checkbox.favorite .ui-btn.ui-btn-icon-left .ui-btn-inner .ui-btn-text {
620 margin-left: @list-email-text-padding-left;
625 .LESSsubicon-attach-resize(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding, @width:@list-email-attach-icon-width, @height:@list-email-attach-icon-height ) {
626 img.ui-li-icon-attach {
637 .LESSsubicon-warning-resize(@left:2 * @list-li-padding-horizontal + @list-checkbox-size, @top: @list-li-email-top-padding, @width:@list-email-attach-icon-width, @height:@list-email-attach-icon-height ) {
638 img.ui-li-icon-warning {
649 .LESSbtn-right(@right:@list-li-padding-horizontal, @top: 50%) {
657 .LESSbtn-email(@right:@list-li-padding-horizontal, @top: 24%) {
664 .LESScheckbox-right(@right:@list-li-padding-horizontal, @top: 50%) { // NOTE: This can be changed according to checkbox implementation!
669 margin: -1.1em 65*@unit_base 0 @list-li-padding-horizontal;
672 .LESStoggleswitch-right(@right:@list-li-padding-horizontal, @top: 50%) { // NOTE: This can be changed according to checkbox implementation!
677 margin: -1.1em 0 0 @list-li-padding-horizontal;
680 .LESScheckbox-left(@left:@list-li-padding-horizontal, @top: 50%) { // checkbox + radio
682 .ui-icon-checkbox-off,
683 .ui-icon-checkbox-on,
684 .ui-icon-checkbox-off-press,
685 .ui-icon-checkbox-on-press,
689 .ui-icon-radio-off-press,
690 .ui-icon-radio-on-press {
695 margin: -1.1em 0 0 -8*@unit_base;
698 .LESSimg-bigicon(@size:@list-bigicon-size) {
704 .LESSimg-bigicon-left(@left:@list-li-padding-horizontal, @size:@list-bigicon-size) {
710 margin-top: -(@size/2);
714 .LESSimg-bigicon-right(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
715 .LESSimg-bigicon(@size);
720 margin-top: -(@size/2);
726 .LESSimg-expand-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
728 background-image: url(images/00_button_expand_closed.png);
729 background-size: 100%;
732 width: 64 * @unit_base;
733 height: 64 * @unit_base;
734 margin-top: -(@size/2);
735 right: 16 * @unit_base;
739 .LESSimg-expanded-icon(@right:@list-li-padding-horizontal, @size:@list-bigicon-size) {
740 .ui-li-expanded-icon {
741 background-image: url(images/00_button_expand_opened.png);
742 background-size: 100%;
745 width: 64 * @unit_base;
746 height: 64 * @unit_base;
747 margin-top: -(@size/2);
748 right: 16 * @unit_base;
754 /* 1.11 Hidden style with 2 button */
759 padding-right : 16px;
768 &> span.ui-btn-hastxt {
773 &> div.ui-btn:nth-child(1) {
777 &> div.ui-btn:nth-child(2) {
783 &> li.ui-li-1line-sub,
784 &> li.ui-li-1line-setting {
785 .LESStext-main-1line;
788 &> li.ui-li-1line-setting {
789 .LESStext-sub-setting;
791 &> li.ui-li-1line-btn1,
792 &> li.ui-li-1line-btn2 {
793 .LESStext-main-1line;
796 &> li.ui-li-1line-toggle {
797 .LESStext-main-1line;
798 .LESStoggleswitch-right;
801 &> li.ui-li-1line-bigicon1,
802 &> li.ui-li-1line-bigicon2,
803 &> li.ui-li-1line-bigicon4,
804 &> li.ui-li-1line-bigicon5,
805 &> li.ui-li-1line-bigicon6 {
806 .LESStext-main-1line(2 * @list-li-padding-horizontal + @list-bigicon-size);
807 .LESSimg-bigicon-left;
809 &> li.ui-li-1line-bigicon2 {
812 &> li.ui-li-1line-bigicon6 {
813 .LESStoggleswitch-right;
816 &> li.ui-li-1line-check1,
817 &> li.ui-li-1line-check2,
818 &> li.ui-li-1line-radio1,
819 &> li.ui-li-1line-radio3,
820 &> li.ui-li-1line-radio5 {
821 .LESSli-reset-position-1line(@list-li-main-line-height, 2 * @list-li-padding-horizontal + @list-checkbox-size);
823 .LESStext-main-1line;
825 &> li.ui-li-1line-check3,
826 &> li.ui-li-1line-check4,
827 &> li.ui-li-1line-radio4 {
828 .LESSli-reset-position-1line(@list-li-main-line-height, 3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size);
830 .LESSimg-bigicon-left(74 * @unit_base);
831 .LESStext-main-1line;
833 &> li.ui-li-1line-bigicon4,
834 &> li.ui-li-1line-bigicon5,
835 &> li.ui-li-1line-check2,
836 &> li.ui-li-1line-check4,
837 &> li.ui-li-1line-radio3,
838 &> li.ui-li-1line-radio5 {
841 &> li.ui-li-1line-radio5 {
842 .LESSimg-bigicon-right(96 * @unit_base);
845 /* For Contacts list : wongi_1108 */
846 &> li.ui-li-1line-radio6 {
847 .LESStext-main-1line;
848 .LESSimg-bigicon-right(16 * @unit_base);
855 &> li.ui-li-2line-setting,
856 &> li.ui-li-2line-toggle-setting {
857 .LESSli-reset-position;
858 .LESStext-main-2line;
859 .LESStext-sub-2line-left;
860 .LESStoggleswitch-right;
862 &> li.ui-li-2line-sub-main,
863 &> li.ui-li-2line-sub-main-bigicon1 {
864 .LESSli-reset-position;
865 .LESStext-main-2line(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
866 .LESStext-sub-2line-left(@list-li-padding-horizontal, @list-li-top-padding);
867 .LESSimg-bigicon-right;
869 &> li.ui-li-2line-2sub {
870 .LESSli-reset-position;
871 .LESStext-main-2line;
872 .LESStext-sub-2line-left;
873 .LESStext-sub-2line-right;
875 &> li.ui-li-2line-btn1,
876 &> li.ui-li-2line-btn2,
877 &> li.ui-li-2line-btn-setting,
878 &> li.ui-li-2line-bigicon0 {
879 .LESSli-reset-position;
880 .LESStext-main-2line;
881 .LESStext-sub-2line-left;
885 width: @list-smallicon-size;
886 height: @list-smallicon-size;
887 margin: 0 0 0 @list-li-padding-horizontal;
891 &> li.ui-li-2line-star1 {
892 .LESSli-reset-position;
893 .LESStext-main-2line;
894 .LESStext-sub-2line-left;
895 .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding);
896 .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-top-padding+@list-li-main-line-height);
898 &> li.ui-li-2line-star2 {
899 .LESSli-reset-position;
900 .LESStext-main-2line;
901 .LESStext-sub-2line-left;
902 .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding);
905 width: @list-smallicon-size;
906 height: @list-smallicon-size;
907 margin: 0 @list-li-padding-horizontal 0 0;
912 &> li.ui-li-2line-bigicon1,
913 &> li.ui-li-2line-bigicon2,
914 &> li.ui-li-2line-bigicon3,
915 &> li.ui-li-2line-bigicon4,
916 &> li.ui-li-2line-colorbar3,
917 &> li.ui-li-2line-bigicon-pgbar2 {
918 .LESSli-reset-position;
919 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding);
920 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
922 .LESSimg-bigicon-left;
924 &> li.ui-li-2line-bigicon2 {
925 .LESStext-sub-2line-right;
928 &> li.ui-li-2line-setting,
929 &> li.ui-li-2line-toggle-setting,
930 &> li.ui-li-2line-btn-setting,
931 &> li.ui-li-2line-bigicon3 {
932 .LESStext-sub-setting;
935 &> li.ui-li-2line-check1,
936 &> li.ui-li-2line-check2,
937 &> li.ui-li-2line-radio1 {
938 .LESSli-reset-position;
940 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-top-padding);
941 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-top-padding+@list-li-main-line-height);
944 &> li.ui-li-2line-check3,
945 &> li.ui-li-2line-radio2,
946 &> li.ui-li-2line-icon-bigicon-btn {
947 .LESSli-reset-position;
949 .LESSimg-bigicon-left(2*@list-li-padding-horizontal + @list-checkbox-size);
950 .LESStext-main-2line(3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size, @list-li-top-padding);
951 .LESStext-sub-2line-left(3 * @list-li-padding-horizontal + @list-checkbox-size + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
955 &> li.ui-li-2line-colorbar1,
956 &> li.ui-li-2line-colorbar2,
957 &> li.ui-li-2line-colorbar3 {
962 width: 10 * @unit_base;
963 height: 20 * @unit_base;
964 background-color: @color_list_colorbar;
967 &> li.ui-li-2line-colorbar1 {
968 .LESSli-reset-position;
969 .LESStext-main-2line;
970 .LESStext-sub-2line-left;
971 .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-top-padding+@list-li-main-line-height);
975 right: @list-li-padding-horizontal;
976 top: @list-li-top-padding;
977 margin: 0 0 0 @list-li-padding-horizontal;
978 max-height: 60*@unit_base;
982 width: @list-smallicon-size;
983 height: @list-smallicon-size;
984 margin: 0 0 0 @list-li-padding-horizontal;
988 &> li.ui-li-2line-colorbar2 {
989 .LESSli-reset-position;
990 .LESStext-main-2line;
991 .LESStext-sub-2line-left;
995 width: @list-smallicon-size;
996 height: @list-smallicon-size;
997 margin: 0 0 0 @list-li-padding-horizontal;
1001 &> li.ui-li-2line-bigicon8 {
1002 .LESSli-reset-position;
1003 .LESSimg-bigicon-left;
1004 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding);
1005 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-top-padding+@list-li-main-line-height);
1006 .LESSsubicon-right(@list-li-padding-horizontal, @list-li-top-padding + @list-li-main-line-height + 8*@unit_base);
1008 &> li.ui-li-2line-thumb1,
1009 &> li.ui-li-2line-thumb2,
1010 &> li.ui-li-2line-thumb3 {
1011 .LESSli-reset-position;
1012 .LESStext-main-2line;
1013 .LESStext-sub-2line-left;
1014 .LESSimg-bigicon-right(@list-li-padding-horizontal,@list-bigicon-size2);
1017 width: @list-smallicon-size;
1018 height: @list-smallicon-size;
1019 margin: 0 0 0 @list-li-padding-horizontal;
1024 width: @list-smallicon-size;
1025 height: @list-smallicon-size;
1026 margin: 0 @list-li-padding-horizontal 0 0;
1030 &> li.ui-li-2line-bigicon-pgbar1 {
1031 .LESSli-reset-position;
1032 .LESSimg-bigicon-left;
1033 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, 0);
1034 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-main-line-height+@list-progressbar-height);
1035 .LESStext-sub-2line-right(2 * @list-li-padding-horizontal + 134*@unit_base, @list-li-main-line-height+@list-progressbar-height);
1038 max-width: 134 * @unit_base;
1041 left: 2 * @list-li-padding-horizontal + @list-bigicon-size;
1042 top: @list-li-main-line-height;
1043 height: @list-progressbar-height;
1044 width: 468 * @unit_base;
1047 &> li.ui-li-2line-bigicon-pgbar3 {
1048 .LESSli-reset-position;
1049 .LESSimg-bigicon-left;
1050 .LESStext-main-2line(2 * @list-li-padding-horizontal + @list-bigicon-size, 0);
1051 .LESStext-sub-2line-left(2 * @list-li-padding-horizontal + @list-bigicon-size, @list-li-main-line-height+@list-progressbar-height);
1052 .LESStext-sub-2line-right(@list-li-padding-horizontal, @list-li-main-line-height+@list-progressbar-height);
1054 left: 2 * @list-li-padding-horizontal + @list-bigicon-size;
1055 top: @list-li-main-line-height;
1056 height: @list-progressbar-height;
1057 width: 608 * @unit_base;
1061 &> li.ui-li-2line-sub-main,
1062 &> li.ui-li-2line-setting {
1068 &> li.ui-li-2line-2sub,
1080 &> li.ui-li-2line-btn1,
1081 &> li.ui-li-2line-colorbar3,
1082 &> li.ui-li-2line-thumb1,
1083 &> li.ui-li-2line-thumb2 {
1092 &> li.ui-li-2line-btn2,
1093 &> li.ui-li-2line-toggle-setting,
1094 &> li.ui-li-2line-btn-setting,
1095 &> li.ui-li-2line-bigicon0,
1096 &> li.ui-li-2line-bigicon1,
1097 &> li.ui-li-2line-bigicon3,
1098 &> li.ui-li-2line-check1,
1099 &> li.ui-li-2line-radio1,
1100 &> li.ui-li-2line-sub-main-bigicon1 {
1106 &> li.ui-li-2line-star1,
1107 &> li.ui-li-2line-colorbar1 {
1118 &> li.ui-li-2line-star2 {
1126 &> li.ui-li-2line-bigicon2 {
1137 &> li.ui-li-2line-bigicon4,
1138 &> li.ui-li-2line-check2,
1139 &> li.ui-li-2line-check3,
1140 &> li.ui-li-2line-radio2,
1141 &> li.ui-li-2line-colorbar3,
1142 &> li.ui-li-2line-icon-bigicon-btn {
1148 &> li.ui-li-2line-bigicon8 {
1156 &> li.ui-li-2line-bigicon-pgbar1 {
1167 &> li.ui-li-2line-bigicon-pgbar2 {
1173 &> li.ui-li-2line-bigicon-pgbar3 {
1184 &> li.ui-li-2line-thumb3 {
1193 font-size: 36 * @unit_base;
1194 padding: 16 * @unit_base;
1197 font-size: 48 * @unit_base;
1198 margin-top: 0 * @unit_base;
1199 margin-bottom: 0 * @unit_base;
1204 display: inline-block;
1205 width: 224 * @unit_base;
1212 &> li.ui-li-email-name1-btn,
1213 &> li.ui-li-email-name2-btn,
1214 &> li.ui-li-email-name1,
1215 &> li.ui-li-email-name2,
1216 &> li.ui-li-email-name1-btn-warning,
1217 &> li.ui-li-email-name2-btn-warning,
1218 &> li.ui-li-email-name1-warning,
1219 &> li.ui-li-email-name2-warning,
1220 &> li.ui-li-email-name1-btn-attach,
1221 &> li.ui-li-email-name2-btn-attach,
1222 &> li.ui-li-email-name1-attach,
1223 &> li.ui-li-email-name2-attach,
1224 &> li.ui-li-email-name1-btn-warning-attach,
1225 &> li.ui-li-email-name2-btn-warning-attach,
1226 &> li.ui-li-email-name1-warning-attach,
1227 &> li.ui-li-email-name2-warning-attach {
1232 width: 10 * @unit_base;
1233 height: 20 * @unit_base;
1234 background-color: @color_list_colorbar;
1236 .LESSli-reset-position-3line;
1238 .LESSsubicon-right-resize(@list-li-padding-horizontal, @list-li-email-top-padding, @list-email-icon-width, @list-email-icon-height);
1239 .LESStext-email-sub-3line-sub2(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height);
1240 .LESStext-email-sub-3line-sub3(@list-li-padding-horizontal, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-sub-line-height);
1243 &> li.ui-li-email-name1-btn,
1244 &> li.ui-li-email-name2-btn,
1245 &> li.ui-li-email-name1,
1246 &> li.ui-li-email-name2 {
1247 .LESStext-email-main-3line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1248 .LESStext-email-sub-3line-sub1(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1250 &> li.ui-li-email-name1-btn-warning,
1251 &> li.ui-li-email-name2-btn-warning,
1252 &> li.ui-li-email-name1-warning,
1253 &> li.ui-li-email-name2-warning {
1254 .LESStext-email-main-3line(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1255 .LESStext-email-sub-3line-sub1(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1256 .LESSsubicon-warning-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding + @list-li-main-line-height, @list-email-warning-icon-width, @list-email-warning-icon-height);
1258 &> li.ui-li-email-name1-btn-attach,
1259 &> li.ui-li-email-name2-btn-attach,
1260 &> li.ui-li-email-name1-attach,
1261 &> li.ui-li-email-name2-attach {
1262 .LESStext-email-main-3line(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1263 .LESStext-email-sub-3line-sub1(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1264 .LESSsubicon-attach-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding, @list-email-attach-icon-width, @list-email-attach-icon-height);
1266 &> li.ui-li-email-name1-btn-warning-attach,
1267 &> li.ui-li-email-name2-btn-warning-attach,
1268 &> li.ui-li-email-name1-warning-attach,
1269 &> li.ui-li-email-name2-warning-attach {
1270 .LESStext-email-main-3line(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding);
1271 .LESStext-email-sub-3line-sub1(5 * @list-li-padding-horizontal + @list-checkbox-size, @list-li-email-top-padding + @list-li-main-line-height + @list-li-email-subline-top-padding);
1272 .LESSsubicon-attach-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding, @list-email-attach-icon-width, @list-email-attach-icon-height);
1273 .LESSsubicon-warning-resize(2 * @list-li-padding-horizontal + @list-checkbox-size, @list-email-icon-top-padding + @list-li-main-line-height, @list-email-warning-icon-width, @list-email-warning-icon-height);
1276 &> li.ui-li-email-name1-btn,
1277 &> li.ui-li-email-name2-btn,
1278 &> li.ui-li-email-name1-btn-warning,
1279 &> li.ui-li-email-name2-btn-warning,
1280 &> li.ui-li-email-name1-btn-attach,
1281 &> li.ui-li-email-name2-btn-attach,
1282 &> li.ui-li-email-name1-btn-warning-attach,
1283 &> li.ui-li-email-name2-btn-warning-attach {
1284 .LESSbtn-email(2 * @list-li-padding-horizontal + @list-email-icon-width);
1286 &> li.ui-li-email-name1-btn,
1287 &> li.ui-li-email-name1,
1288 &> li.ui-li-email-name1-btn-warning,
1289 &> li.ui-li-email-name1-warning,
1290 &> li.ui-li-email-name1-btn-attach,
1291 &> li.ui-li-email-name1-attach,
1292 &> li.ui-li-email-name1-btn-warning-attach,
1293 &> li.ui-li-email-name1-warning-attach {
1294 .LESStext-email-sub1-setting;
1299 &> li.ui-li-1line-leftsub1 {
1300 .LESStext-sub-1line-left;
1301 .LESStext-main-1line-right;
1303 &> li.ui-li-1line-leftsub2 {
1304 .LESSli-reset-position-1line;
1305 .LESStext-sub-1line-left;
1306 .LESStext-main-1line-right;
1307 .LESSimg-bigicon-right(16 * @unit_base);
1310 .LESSli-reset-position;
1311 .LESStext-main-2line;
1312 .LESStext-sub-2line-left;
1313 .LESStext-sub-setting;
1319 &> li.ui-li-4-2-10 {
1320 .LESSli-reset-position;
1321 .LESStext-main-2line(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
1322 .LESStext-sub-2line-left(@list-li-padding-horizontal, @list-li-top-padding);
1327 .LESScheckbox-right;
1330 &> li.ui-li-4-2-11 {
1331 .LESStext-sub-1line-left;
1332 .LESStext-main-1line-right;
1334 .ui-li-text-main-right
1336 display: inline-block;
1341 &> li.ui-li-3line-dgroup1 {
1342 .LESSli-reset-position-3line;
1343 .LESStext-main-3line(@list-li-padding-horizontal, @list-li-top-padding);
1344 .LESStext-sub-3line-left1(@list-li-padding-horizontal, @list-li-top-padding + @list-li-sub-line-height);
1345 .LESStext-sub-3line-left2(@list-li-padding-horizontal, @list-li-top-padding + 2 * @list-li-sub-line-height);
1348 // Special dialogue for Phonebook
1363 span.contact_name_field {
1364 position : absolute;
1365 font-size : @list-dialogue-font-size-main;
1366 color : @color_dialogue_main_text;
1372 span.contact_subname_field {
1373 position : absolute;
1374 font-size : @list-dialogue-font-size-sub;
1375 color : @color_dialogue_sub_text;
1380 span.companyname_field {
1381 position : absolute;
1382 font-size : @list-dialogue-font-size-sub;
1383 color : @color_dialogue_sub_text;
1389 // Dialogue Editor for Phonebook
1390 &> div.ui-li-dialogue-editor-photo
1403 &> li.ui-li-dialogue-editor-1
1405 border-left: @list-li-dialogue-width rgba(68, 68, 68, 255) solid;
1406 border-top-width: 0px; //wongi_1201 //for phonebook
1412 &> .ui-field-contain
1426 /* wongi_1215 : Default Text */
1427 &>div.ui-input-default-text {
1433 color: @color_dialogue_editor_default_text;
1436 &>div.ui-input-default-text.ui-input-default-hidden {
1442 &> li.ui-li-dialogue-editor-1.ui-li-expanded
1444 background-color: @color_dialogue_editor_bg;
1447 &> li.ui-li-dialogue-editor-2
1449 padding : 0px !important;
1451 border-left: @list-li-dialogue-width @color_dialogue_editor_border solid;
1452 border-top-width: 0px;
1457 &> div.ui-li-dialogue-editor-border
1459 border-right: 1px @color_dialogue_editor_border solid;
1464 &> div div.ui-li-dialogue-editor-2-label
1473 &> .ui-field-contain
1490 /* wongi_1215 : Default Text */
1491 &>div.ui-input-default-text {
1496 color: @color_dialogue_editor_default_text;
1499 &>div.ui-input-default-text.ui-input-default-hidden {
1506 &> li.ui-li-dialogue {
1507 border-left: @list-li-dialogue-width @color_dialogue_editor_border solid;
1508 border-top-width: 0px;
1511 &> li.ui-li-dialogue.ui-li-divider {
1512 height: 32 * @unit_base;
1516 &> li.ui-li-divider {
1517 height: 32 * @unit_base;
1521 &> li.ui-li-group-title {
1522 padding-top : 32 * @unit_base;
1525 &> li.ui-li-group-title span {
1526 padding-left : 16 * @unit_base;
1529 &> li.ui-li-3-button {
1531 padding-right : 8px;
1535 &> li.ui-li-3-button div.ui-btn {
1541 position : absolute;
1544 .ui-btn-inner.ui-btn-hastxt {
1545 padding-top : 0.6em;
1549 &> li.ui-li-3-button div.ui-btn:nth-child(1) {
1553 &> li.ui-li-3-button div.ui-btn:nth-child(2) {
1557 &> li.ui-li-3-button div.ui-btn:nth-child(3) {
1567 .ui-li-bubble-right,
1571 min-width: 160 * @unit_base;
1572 min-height: 160 * @unit_base;
1575 .ui-li-bubble-left {
1576 word-wrap: break-word;
1577 .LESSborder-radius-topright(@list-li-bubble-corner-radius);
1578 .LESSborder-radius-bottomright(@list-li-bubble-corner-radius);
1579 font-size: @list-li-bubble-font-size;
1581 font-size: @list-li-bubble-font-size;
1583 //margin: 12px 20% 12px 0%;
1584 margin-top: 12 * @unit_base;
1585 margin-bottom: 12 * @unit_base;
1590 padding: 16px 22px 16px 16px;
1592 .ui-li-bubble-right {
1593 word-wrap: break-word;
1594 .LESSborder-radius-topleft(@list-li-bubble-corner-radius);
1595 .LESSborder-radius-bottomleft(@list-li-bubble-corner-radius);
1596 margin: 12px 0% 12px 20%;
1597 padding: 16px 16px 16px 22px;
1601 .ui-li-bubble-date {
1603 font-size: @list-li-bubble-date-font-size;
1604 margin: 12px 0%; // no horizontal margin
1608 span.ui-li-bubble-time {
1610 font-size: @list-li-bubble-time-font-size;
1611 display: inline-block;
1615 // Expandable list animation
1619 .ui-li-expandable-shown {
1621 .LESSimg-expanded-icon;
1623 .ui-li-expandable-hidden {
1625 .LESSimg-expand-icon;
1631 -webkit-transition: all 0.2s ease;
1632 -moz-transition: all 0.2s ease;
1633 -o-transition: all 0.2s ease;
1634 transition: all 0.2s ease;
1636 .ui-li-expand-transition-show {
1637 visibility: visible;
1639 .ui-li-expand-transition-hide {
1643 padding-bottom: 0px;
1648 /* Odd iPad positioning issue. */
1649 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
1650 .ui-li .ui-btn-text {