2 * jQuery Mobile Framework
3 * Copyright (c) jQuery Project
4 * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
9 /* Button colors are defined in config.less
11 /* Edit button size */
12 @height_buttonEdit: 74 * @unit_base;
13 @width_buttonEdit: @height_buttonEdit;
15 .ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .2em 0px; padding: 0; */ vertical-align: middle; } /* wongi_1018 : For button align. */
16 .ui-btn:focus, .ui-btn:active { outline: none; }
17 .ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; }
18 .ui-btn-inline { display: inline-block; }
19 .ui-btn-inner { padding: .5em 9 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
20 .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 0 0.7em; } /* wongi_1024 : Button text middle align */
21 .ui-header .ui-btn-inner.ui-btn-icon-only , .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner.ui-btn-icon-only
23 padding: .4em 8 * @unit_base .5em;
24 } /* wongi_1024 : Button text middle align */
26 .ui-btn-icon-notext { width: 36 * @unit_base; height: 36 * @unit_base; }
27 .ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; }
28 .ui-btn-icon-notext .ui-btn-inner .ui-icon { margin-left: -16 * @unit_base; margin-top: -16 * @unit_base; }
29 .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999 * @unit_base; }
30 .ui-btn-icon-left .ui-btn-inner { padding-left: 33 * @unit_base; }
31 .ui-header .ui-btn-icon-left .ui-btn-inner,
32 .ui-footer .ui-btn-icon-left .ui-btn-inner,
33 .ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27 * @unit_base; }
34 .ui-btn-icon-right .ui-btn-inner { padding-right: 33 * @unit_base; }
35 .ui-header .ui-btn-icon-right .ui-btn-inner,
36 .ui-footer .ui-btn-icon-right .ui-btn-inner,
37 .ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27 * @unit_base; }
38 .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
39 .ui-header .ui-btn-icon-top .ui-btn-inner,
40 .ui-footer .ui-btn-icon-top .ui-btn-inner,
41 .ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
42 .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33 * @unit_base; }
43 .ui-header .ui-btn-icon-bottom .ui-btn-inner,
44 .ui-footer .ui-btn-icon-bottom .ui-btn-inner,
45 .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27 * @unit_base; }
47 /*btn icon positioning*/
48 .ui-btn-icon-notext .ui-icon { display: block; }
49 .ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon, .ui-btn-icon-circle .ui-icon { position: absolute; /*top: 50%; margin-top: -9px;*/ } /* wongi_1018 : do not use. No more use 18px default icons. */
52 .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
53 .ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */
54 .ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */
55 .ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
56 .ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
57 .ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
58 .ui-header .ui-btn-icon-right .ui-icon,
59 .ui-footer .ui-btn-icon-right .ui-icon,
60 .ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; }
61 .ui-header .ui-btn-icon-top .ui-icon,
62 .ui-footer .ui-btn-icon-top .ui-icon,
63 .ui-bar .ui-btn-icon-top .ui-icon { top: 4 * @unit_base; }
64 .ui-header .ui-btn-icon-bottom .ui-icon,
65 .ui-footer .ui-btn-icon-bottom .ui-icon,
66 .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4 * @unit_base; }
68 /*hiding native button,inputs */
69 .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: transparent; font-size: 1 * @unit_base; border: none; line-height: 999 * @unit_base; }
73 /*padding-left : 80px;*/ //wongi_1017
76 padding:0 1px; /* Webkit width(ellipsis) problem workaround */
79 .ui-li .ui-btn.ui-btn-icon_only
82 margin-top: (-32 * 1/2) * @unit_base;
85 .ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt
89 .ui-btn-icon-nobg.ui-btn-down-s .ui-btn-inner
91 background: transparent ! important;
93 .ui-btn.ui-btn-box-s.ui-btn-down-s .ui-btn-inner
95 .LESSbutton_inner_pressstyle;
98 .ui-header .ui-btn-box-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon),
99 .ui-header .ui-btn-box-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon) .ui-btn-inner,
100 .ui-header .ui-btn.ui-btn-box-s.ui-btn-down-s:not(.ui-input-cancel):not(.ui-btn-search-front-icon) .ui-btn-inner,
101 .ui-btn.ui-btn-back.ui-btn-up-s .ui-btn-inner,
102 .ui-btn.ui-btn-back.ui-btn-hover-s .ui-btn-inner,
103 .ui-btn.ui-btn-back.ui-btn-down-s .ui-btn-inner
105 background: transparent;
110 .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
112 padding-top: 52 * @unit_base;
114 .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt
116 padding-bottom: 52 * @unit_base;
119 /* wongi_1017 : Icons */
121 .ui-btn .ui-icon { width: 32 * @unit_base ; height: 32 * @unit_base; }
122 .ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
124 /* Padding for Icon with text */
125 .ui-btn .ui-btn-text.ui-btn-text-padding-left { padding-left: 44 * @unit_base; }
126 .ui-btn .ui-btn-text.ui-btn-text-padding-right { padding-right: 48 * @unit_base; }
127 .ui-btn .ui-btn-text.ui-btn-text-padding-top {padding-top: 32 * @unit_base;}
131 background-repeat: no-repeat;
132 vertical-align: middle;
133 background-position: 0% 0%;
134 background-size: 100%;
136 .ui-btn-box.s .ui-icon
140 .ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
142 margin-top: -32 * @unit_base / 2;
145 .ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
147 margin-left: -32 * @unit_base / 2;
152 /* Overlap original property */
153 width: 32 * @unit_base; height: 32 * @unit_base;
154 /* margin-top : 50 */
155 /* top : -32 * @unit_base; */
157 .tizen-smallicon-common
159 width: 20 * @unit_base ! important;
160 height: 20 * @unit_base ! important;
161 top: 50% ! important;
162 left: 50% ! important;
163 margin-top: -20 * @unit_base / 2 ! important;
164 margin-left: -20 * @unit_base / 2 ! important;
167 .ui-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_normal.png); z-index:0; }
168 .ui-icon-arrow-l {.tizen-icon-common; background-image: url(images/controls/button/00_button_left.png); }
169 .ui-icon-arrow-r {.tizen-icon-common; background-image: url(images/controls/button/00_button_right.png); }
170 .ui-icon-arrow-u {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_opened.png); }
171 .ui-icon-arrow-d {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_closed.png); }
172 .ui-icon-delete {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_cancel.png); }
173 .ui-icon-plus {.tizen-icon-common; background-image: url(images/controls/button/00_button_plus.png); }
174 .ui-icon-minus {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_minus.png); }
175 .ui-icon-check {.tizen-icon-common; background-image: url(images/controls/button/00_button_check.png); }
176 .ui-icon-gear {.tizen-icon-common; background-image: url(images/controls/button/00_button_gear.png); }
177 .ui-icon-refresh {.tizen-icon-common; background-image: url(images/controls/button/00_button_refresh.png); }
178 .ui-icon-forward {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_send.png); }
179 .ui-icon-back {.tizen-icon-common; background-image: url(images/controls/button/00_button_back.png); }
180 .ui-icon-grid {.tizen-icon-common; background-image: url(images/controls/button/00_button_grid.png); }
181 .ui-icon-star {.tizen-icon-common; background-image: url(images/controls/button/00_button_star.png); }
182 .ui-icon-alert {.tizen-icon-common; background-image: url(images/controls/button/00_button_warning.png); }
183 .ui-icon-info {.tizen-icon-common; background-image: url(images/controls/button/00_button_info.png); }
184 .ui-icon-home {.tizen-icon-common; background-image: url(images/controls/button/00_button_home.png); }
185 .ui-icon-search {.tizen-icon-common; background-image: url(images/controls/button/00_button_search.png); }
186 .ui-icon-call {.tizen-icon-common; background-image: url(images/controls/button/00_button_call.png); }
187 .ui-icon-rename {.tizen-icon-common; background-image: url(images/controls/button/00_button_rename.png); }
188 .ui-icon-scrolltop {.tizen-smallicon-common; background-image: url(images/controls/button/00_icon_jump.png); }
189 .ui-icon-scrollleft {.tizen-smallicon-common; background-image: url(images/controls/button/00_icon_jump_left.png); }
191 .ui-icon-expandable-divider-opened {
192 width: 42 * @unit_base;
193 height: 42 * @unit_base;
196 right : 28 * @unit_base;
197 top : 0 * @unit_base;
199 background-repeat: no-repeat;
200 background-size: 100% 100%;
202 background-image: url(images/00_indexlist_icon_opened.png);
206 .ui-icon-expandable-divider-closed {
207 width: 42 * @unit_base;
208 height: 42 * @unit_base;
211 right : 28 * @unit_base;
212 top : 0 * @unit_base;
214 background-repeat: no-repeat;
215 background-size: 100% 100%;
217 background-image: url(images/00_indexlist_icon_closed.png);
223 .ui-btn-down-s .ui-icon-bg, .ui-btn-down-s.ui-tizen-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_press.png); z-index:0; }
224 .ui-btn-down-s .ui-icon-arrow-l {.tizen-icon-common; background-image: url(images/controls/button/00_button_left_press.png); }
225 .ui-btn-down-s .ui-icon-arrow-r {.tizen-icon-common; background-image: url(images/controls/button/00_button_right_press.png); }
226 .ui-btn-down-s .ui-icon-arrow-u {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_opened_press.png); }
227 .ui-btn-down-s .ui-icon-arrow-d {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_closed_press.png); }
228 .ui-btn-down-s .ui-icon-delete {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_cancel_press.png); }
229 .ui-btn-down-s .ui-icon-plus {.tizen-icon-common; background-image: url(images/controls/button/00_button_plus_press.png); }
230 .ui-btn-down-s .ui-icon-minus {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_minus_press.png); }
231 .ui-btn-down-s .ui-icon-check {.tizen-icon-common; background-image: url(images/controls/button/00_button_check_press.png); }
232 .ui-btn-down-s .ui-icon-gear {.tizen-icon-common; background-image: url(images/controls/button/00_button_gear_press.png); }
233 .ui-btn-down-s .ui-icon-refresh {.tizen-icon-common; background-image: url(images/controls/button/00_button_refresh_press.png); }
234 .ui-btn-down-s .ui-icon-forward {.tizen-icon-common; background-image: url(images/controls/button/00_button_expand_send_press.png); }
235 .ui-btn-down-s .ui-icon-back {.tizen-icon-common; background-image: url(images/controls/button/00_button_back_press.png); }
236 .ui-btn-down-s .ui-icon-grid {.tizen-icon-common; background-image: url(images/controls/button/00_button_grid_press.png); }
237 .ui-btn-down-s .ui-icon-star {.tizen-icon-common; background-image: url(images/controls/button/00_button_star_press.png); }
238 .ui-btn-down-s .ui-icon-alert {.tizen-icon-common; background-image: url(images/controls/button/00_button_warning_press.png); }
239 .ui-btn-down-s .ui-icon-info {.tizen-icon-common; background-image: url(images/controls/button/00_button_info_press.png); }
240 .ui-btn-down-s .ui-icon-home {.tizen-icon-common; background-image: url(images/controls/button/00_button_home_press.png); }
241 .ui-btn-down-s .ui-icon-search {.tizen-icon-common; background-image: url(images/controls/button/00_button_search_press.png); }
242 .ui-btn-down-s .ui-icon-call {.tizen-icon-common; background-image: url(images/controls/button/00_button_call_press.png); }
243 .ui-btn-down-s .ui-icon-rename {.tizen-icon-common; background-image: url(images/controls/button/00_button_rename_press.png); }
244 .ui-btn-down-s .ui-icon-scrolltop {.tizen-smallicon-common; background-image: url(images/controls/button/00_icon_jump.png); }
245 .ui-btn-down-s .ui-icon-scrollleft {.tizen-smallicon-common; background-image: url(images/controls/button/00_icon_jump_left.png); }
247 .ui-btn-inner.ui-btn-icon-only
249 padding: 16 * @unit_base 16 * @unit_base;
252 .ui-btn-icon-only .ui-btn-text
258 .ui-btn.ui-btn-corner-all
260 .LESSborder-radius-allimportant(1.2em);
263 /* No BG button : data-iconbg = "nobg" */
264 .ui-btn.ui-btn-icon-nobg
269 .ui-btn-corner-circle
271 .LESSborder-radius-allimportant( 1em );
275 .LESSborder-radius-allimportant( 1.2em );
277 .ui-btn-round .ui-btn-inner
279 .LESSborder-radius-allimportant( 1.2em );
281 .ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
283 background: transparent;
284 background-color: transparent;
288 /* Contact Edit Style */
289 .ui-btn.ui-btn-edit .ui-btn-text
291 color: @color_button_EditText;
293 .ui-btn.ui-btn-edit .ui-btn-inner
295 .LESSbutton_edit_style;
300 .LESSbutton_box_style;