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 32 * @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 { padding: .4em 8 * @unit_base .5em; } /* wongi_1024 : Button text middle align */
22 .ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; }
23 .ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; }
24 .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999 * @unit_base; }
25 .ui-btn-icon-left .ui-btn-inner { padding-left: 33 * @unit_base; }
26 .ui-header .ui-btn-icon-left .ui-btn-inner,
27 .ui-footer .ui-btn-icon-left .ui-btn-inner,
28 .ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27 * @unit_base; }
29 .ui-btn-icon-right .ui-btn-inner { padding-right: 33 * @unit_base; }
30 .ui-header .ui-btn-icon-right .ui-btn-inner,
31 .ui-footer .ui-btn-icon-right .ui-btn-inner,
32 .ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27 * @unit_base; }
33 .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
34 .ui-header .ui-btn-icon-top .ui-btn-inner,
35 .ui-footer .ui-btn-icon-top .ui-btn-inner,
36 .ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; }
37 .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33 * @unit_base; }
38 .ui-header .ui-btn-icon-bottom .ui-btn-inner,
39 .ui-footer .ui-btn-icon-bottom .ui-btn-inner,
40 .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27 * @unit_base; }
42 /*btn icon positioning*/
43 .ui-btn-icon-notext .ui-icon { display: block; }
45 .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. */
48 .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
49 .ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */
50 .ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */
51 .ui-btn-icon-right .ui-icon { right: 10 * @unit_base; }
52 .ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; }
53 .ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; }
54 .ui-header .ui-btn-icon-left .ui-icon,
55 .ui-footer .ui-btn-icon-left .ui-icon,
56 .ui-bar .ui-btn-icon-left .ui-icon { left: @style-back-btn-left; } /* SLP Default Footer : Jinhyuk */
57 .ui-header .ui-btn-icon-right .ui-icon,
58 .ui-footer .ui-btn-icon-right .ui-icon,
59 .ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; }
60 .ui-header .ui-btn-icon-top .ui-icon,
61 .ui-footer .ui-btn-icon-top .ui-icon,
62 .ui-bar .ui-btn-icon-top .ui-icon { top: 4 * @unit_base; }
63 .ui-header .ui-btn-icon-bottom .ui-icon,
64 .ui-footer .ui-btn-icon-bottom .ui-icon,
65 .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4 * @unit_base; }
67 /*hiding native button,inputs */
68 .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; }
72 /*padding-left : 80px;*/ //wongi_1017
77 .ui-li .ui-btn.ui-btn-icon_only
80 margin-top: -32 * @unit_base;
83 .ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt
87 .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
89 padding-top: 52 * @unit_base;
91 .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt
93 padding-bottom: 52 * @unit_base;
95 /* white theme, delete button padding */
96 .ui-li .ui-btn.ui-btn-edit .ui-btn-inner.ui-btn-hastxt
98 .LESSbutton_edit_padding;
101 /* wongi_1017 : Icons */
103 .ui-btn .ui-icon { width: 64 * @unit_base; height: 64 * @unit_base; }
104 .ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; }
106 /* Padding for Icon with text */
107 .ui-btn .ui-btn-text.ui-btn-text-padding-left { padding-left: 44 * @unit_base; }
108 .ui-btn .ui-btn-text.ui-btn-text-padding-right { padding-right: 48 * @unit_base; }
109 .ui-btn .ui-btn-text.ui-btn-text-padding-top {padding-top: 32 * @unit_base;}
113 background-repeat: no-repeat;
114 vertical-align: middle;
115 background-position: 0% 0%;
116 background-size: 100%;
118 .ui-btn-box.s .ui-icon
122 .ui-btn-box-s.ui-btn-icon-left .ui-icon, .ui-btn-box-s.ui-btn-icon-right .ui-icon
124 margin-top: -64 * @unit_base / 2;
127 .ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon
129 margin-left: -64 * @unit_base / 2;
134 /* Overlap original property */
135 width: 64 * @unit_base; height: 64 * @unit_base;
136 /* margin-top : 50 */
137 /* top : -32 * @unit_base; */
140 .ui-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_normal.png); z-index:0; }
141 .ui-icon-reveal {.tizen-icon-common; background-image: url(images/00_button_reveal.png); }
142 .ui-icon-reveal-left {.tizen-icon-common; background-image: url(images/00_button_reveal_left.png); }
143 .ui-icon-closed {.tizen-icon-common; background-image: url(images/00_button_expand_closed.png); }
144 .ui-icon-opened {.tizen-icon-common; background-image: url(images/00_button_expand_opened.png); }
145 .ui-icon-info {.tizen-icon-common; background-image: url(images/00_button_info.png); }
146 .ui-icon-rename {.tizen-icon-common; background-image: url(images/00_button_rename.png); }
147 .ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call.png); }
148 .ui-icon-warning {.tizen-icon-common; background-image: url(images/00_button_warning.png); }
149 .ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus_normal.png); }
150 .ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_minus_normal.png); }
151 .ui-icon-cancel {.tizen-icon-common; background-image: url(images/00_button_cancel.png); }
152 .ui-icon-send {.tizen-icon-common; background-image: url(images/00_button_send.png); }
153 .ui-icon-favorite {.tizen-icon-common; background-image: url(images/00_winset_icon_favorite_on.png); }
154 .ui-icon-editexpand {.tizen-icon-common; background-image: url(images/00_button_icon_expand.png); top : -@height_buttonEdit/2; }
155 .ui-icon-editminus {.tizen-icon-common; background-image: url(images/00_button_icon_minus.png); top : -@height_buttonEdit/2;}
156 .ui-icon-editplus {.tizen-icon-common; background-image: url(images/00_button_icon_plus.png); top : -@height_buttonEdit/2;}
158 /* Header back btn : Jinjyuk */
159 .ui-btn-up-s .ui-icon-header-back-btn{
160 width: 56 * @unit_base;
161 height: 56 * @unit_base;
163 background-repeat: no-repeat;
164 background-size: 100% 100%;
166 .LESSbtn-arrow-position;
167 background-image: url(images/00_winset_Back.png);
170 .ui-btn-down-s, .ui-btn-hover-s {
171 .ui-icon-header-back-btn{
172 width: 56 * @unit_base;
173 height: 56 * @unit_base;
175 background-repeat: no-repeat;
176 background-size: 100% 100%;
178 .LESSbtn-arrow-position;
179 background-image: url(images/00_winset_Back.png);
184 .ui-btn-down-s, .ui-btn-hover-s, .ui-btn-up-s {
185 .ui-icon-header-back-btn {
186 top : @style-back-btn-arrow-top;
191 .ui-icon-header-back-btn{
192 .LESSbackground-size(48 * @unit_base, 38 * @unit_base);
193 width: 48 * @unit_base;
194 height: 38 * @unit_base;
197 .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; }
198 .ui-btn-down-s .ui-icon-reveal {.tizen-icon-common; background-image: url(images/00_button_reveal_press.png); }
199 .ui-btn-down-s .ui-icon-reveal-left {.tizen-icon-common; background-image: url(images/00_button_reveal_left_press.png); }
200 .ui-btn-down-s .ui-icon-closed {.tizen-icon-common; background-image: url(images/00_button_expand_closed_press.png); }
201 .ui-btn-down-s .ui-icon-opened {.tizen-icon-common; background-image: url(images/00_button_expand_opened_press.png); }
202 .ui-btn-down-s .ui-icon-info {.tizen-icon-common; background-image: url(images/00_button_info_press.png); }
203 .ui-btn-down-s .ui-icon-rename {.tizen-icon-common; background-image: url(images/00_button_rename_press.png); }
204 .ui-btn-down-s .ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call_press.png); }
205 .ui-btn-down-s .ui-icon-warning {.tizen-icon-common; background-image: url(images/00_button_warning_press.png); }
206 .ui-btn-down-s .ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus_press.png); }
207 .ui-btn-down-s .ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_minus_press.png); }
208 .ui-btn-down-s .ui-icon-cancel {.tizen-icon-common; background-image: url(images/00_button_cancel_press.png); }
209 .ui-btn-down-s .ui-icon-send {.tizen-icon-common; background-image: url(images/00_button_send_press.png); }
210 .ui-btn-down-s .ui-icon-favorite {.tizen-icon-common; background-image: url(images/00_winset_icon_favorite_off.png); }
211 .ui-btn-down-s .ui-icon-editexpand {.tizen-icon-common; background-image: url(images/00_button_icon_expand_press.png); top : -@height_buttonEdit/2;}
212 .ui-btn-down-s .ui-icon-editminus {.tizen-icon-common; background-image: url(images/00_button_icon_minus_press.png); top : -@height_buttonEdit/2;}
213 .ui-btn-down-s .ui-icon-editplus {.tizen-icon-common; background-image: url(images/00_button_icon_plus_press.png); top : -@height_buttonEdit/2;}
215 .ui-btn-inner.ui-btn-icon-only
217 padding: 32 * @unit_base 32 * @unit_base;
220 .ui-btn-edit .ui-btn-inner.ui-btn-icon-only
222 padding: @width_buttonEdit/2 @height_buttonEdit/2;
225 /* Circle Icon BG : data-iconbg = "circle" */
226 .ui-btn-corner-all.ui-btn-corner-circle
228 .LESSborder-radius-all(1.0em); //wongi_1018
231 /* No BG button : data-iconbg = "nobg" */
232 .ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
234 background: transparent;
235 background-color: transparent;
239 /* Contact Edit Style */
240 .ui-btn.ui-btn-edit .ui-btn-text
242 color: @color_button_EditText;
245 .ui-btn.ui-btn-edit.ui-btn-hover-s, .ui-btn.ui-btn-edit.ui-btn-up-s, .ui-btn.ui-btn-edit.ui-btn-down-s
246 { font-size: 0.6em; }
248 .ui-btn.ui-btn-edit.ui-btn-down-s .ui-btn-text
250 color: @color_button_EditTextPress;
255 .LESSbutton_edit_style;
258 margin-top: 0 * @unit_base;
261 .ui-btn.ui-btn-edit.ui-btn-down-s
263 .LESSbutton_editpress_style;
268 .LESSbutton_box_style;