1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
@import "config.less";
.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
//.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 2.313em; }
//.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 2.313em; }
//.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
//.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }
.ui-icon-radio-off {
background-color: transparent;
}
//font size: 42....
@checkbox-icon-left: (16*@unit_base); //16
@checkbox-radio-all-height: (80*@unit_base); //on-off style is the biggest.
@checkbox-radio-size-width: (42*@unit_base);
@checkbox-radio-size-height: (42*@unit_base);
@favorite-size-width: (64*@unit_base);
@favorite-size-height: (64*@unit_base);
@checkbox-radio-icon-internal-bottom: (-@checkbox-radio-size-height/2); //-icon size/2 (42/2)
@favorite-icon-internal-bottom: (-@favorite-size-height/2); //-icon size/2 (64/2)
@icon-left-margin: (16*@unit_base);
@checkbox-radio-label-left: (@checkbox-radio-size-width + 2*@icon-left-margin); //16+42+16
@favorite-label-left: (@favorite-size-width + 2*@icon-left-margin); //16+64+16
.ui-checkbox, .ui-radio {
height: @checkbox-radio-all-height;
position: relative;
margin: 0;
z-index: 1;
//clear btn basic setting
.LESSclear-btn-basic-setting();
input {
position: absolute;
left: -10000px;
height: 100%;
outline: 0 !important;
z-index: 0;
}
.ui-btn {
height: 100%;
margin: 0;
text-align: left;
z-index: 2;
}
.ui-btn.ui-btn-icon-left {
display: block;
.ui-btn-inner {
display: inline-block;
line-height: @checkbox-radio-all-height;
padding: 0 16*@unit_base 0 16*@unit_base;
.ui-btn-text {
display: inline-block;
vertical-align: middle;
margin-left: 40 * @unit_base;
}
.ui-icon {
position: absolute;
top: 50%;
left: 16 * @unit_base;
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
margin-top: @checkbox-radio-icon-internal-bottom;
}
}
}
}
.ui-checkbox.favorite {
input {
position: absolute;
left: -10000px;
height: 100%;
outline: 0 !important;
z-index: 1;
}
.ui-btn.ui-btn-icon-left {
display: block;
.ui-btn-inner {
display: inline-block;
line-height: @checkbox-radio-all-height;
padding: 0 0 0 16*@unit_base;
.ui-btn-text {
display: inline-block;
vertical-align: middle;
margin-left: @favorite-label-left;
}
.ui-icon {
position: absolute;
top: 50%;
width: @favorite-size-width;
height: @favorite-size-height;
margin-top: @favorite-icon-internal-bottom;
}
}
}
}
/* put img inside of checkbox(normal, favorite, on&off style) */
@checkbox-radio-size-width: (42*@unit_base);
@checkbox-radio-size-height: (42*@unit_base);
@favorite-size-width: (64*@unit_base);
@favorite-size-height: (64*@unit_base);
.ui-icon-checkbox-off, .ui-icon-checkbox-on,
.favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
.ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press,
.ui-icon-radio-off, .ui-icon-radio-on,
.ui-icon-radio-on-press, .ui-icon-radio-off-press {
background-size: 100% 100%;
background-color: transparent;
}
.ui-icon-checkbox-off {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_check_bg.png);
}
.ui-icon-checkbox-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
background-repeat: no-repeat;
}
.ui-icon-checkbox-off-press {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_check_bg_press.png);
}
.ui-icon-checkbox-on-press {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_check_checking.png), url(images/00_check_bg_press.png);
background-repeat: no-repeat;
}
.favorite {
.ui-icon-checkbox-off,
.ui-icon-checkbox-off-press {
width: @favorite-size-width;
height: @favorite-size-height;
background-image: url(images/00_winset_icon_favorite_off.png);
}
.ui-icon-checkbox-on,
.ui-icon-checkbox-on-press {
width: @favorite-size-width;
height: @favorite-size-height;
background-image: url(images/00_winset_icon_favorite_on.png);
}
}
.ui-icon-radio-off {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_button_radio_normal2.png);
}
.ui-icon-radio-on {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_button_radio_normal1.png);
}
.ui-icon-radio-on-press {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_button_radio_press2.png);
}
.ui-icon-radio-off-press {
width: @checkbox-radio-size-width;
height: @checkbox-radio-size-height;
background-image: url(images/00_button_radio_press1.png);
}
|
