/* * jQuery Mobile Framework * Copyright (c) jQuery Project * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. */ @import "config.less"; /* Button colors are defined in config.less /* Edit button size */ @height_buttonEdit: 74 * @unit_base; @width_buttonEdit: @height_buttonEdit; .ui-btn { display: block; text-align: center; cursor:pointer; position: relative; /*margin: .5em 5px;*/ padding: 0; vertical-align: middle; } /* wongi_1018 : For button align. */ .ui-btn:focus, .ui-btn:active { outline: none; } .ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; } .ui-btn-inline { display: inline-block; } .ui-btn-inner { padding: .6em 25 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; } .ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 8 * @unit_base 0.7em; } /* wongi_1024 : Button text middle align */ .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 */ .ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; } .ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; } .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -999 * @unit_base; } .ui-btn-icon-left .ui-btn-inner { padding-left: 33 * @unit_base; } .ui-header .ui-btn-icon-left .ui-btn-inner, .ui-footer .ui-btn-icon-left .ui-btn-inner, .ui-bar .ui-btn-icon-left .ui-btn-inner { padding-left: 27 * @unit_base; } .ui-btn-icon-right .ui-btn-inner { padding-right: 33 * @unit_base; } .ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, .ui-bar .ui-btn-icon-right .ui-btn-inner { padding-right: 27 * @unit_base; } .ui-btn-icon-top .ui-btn-inner { padding-top: 33 * @unit_base; } .ui-header .ui-btn-icon-top .ui-btn-inner, .ui-footer .ui-btn-icon-top .ui-btn-inner, .ui-bar .ui-btn-icon-top .ui-btn-inner { padding-top: 27 * @unit_base; } .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 33 * @unit_base; } .ui-header .ui-btn-icon-bottom .ui-btn-inner, .ui-footer .ui-btn-icon-bottom .ui-btn-inner, .ui-bar .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 27 * @unit_base; } /*btn icon positioning*/ .ui-btn-icon-notext .ui-icon { display: block; } .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. */ .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; margin-left: -9px; } .ui-btn-icon-left .ui-icon { left: /*10px;*/ 0 * @unit_base; } /* wongi_1018 : with 64px icon, left 10 -> 0 for good looking. */ .ui-btn-icon-circle .ui-icon {left: 0 * @unit_base;} /* wongi_1018 : for circle icon center positioning. */ .ui-btn-icon-right .ui-icon { right: 10 * @unit_base; } .ui-btn-icon-top .ui-icon { top: 10 * @unit_base; } .ui-btn-icon-bottom .ui-icon { bottom: 10 * @unit_base; } .ui-header .ui-btn-icon-left .ui-icon, .ui-footer .ui-btn-icon-left .ui-icon, .ui-bar .ui-btn-icon-left .ui-icon { left: 24 * @unit_base; } /* SLP Default Footer : Jinhyuk */ .ui-header .ui-btn-icon-right .ui-icon, .ui-footer .ui-btn-icon-right .ui-icon, .ui-bar .ui-btn-icon-right .ui-icon { right: 4 * @unit_base; } .ui-header .ui-btn-icon-top .ui-icon, .ui-footer .ui-btn-icon-top .ui-icon, .ui-bar .ui-btn-icon-top .ui-icon { top: 4 * @unit_base; } .ui-header .ui-btn-icon-bottom .ui-icon, .ui-footer .ui-btn-icon-bottom .ui-icon, .ui-bar .ui-btn-icon-bottom .ui-icon { bottom: 4 * @unit_base; } /*hiding native button,inputs */ .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; } .ui-btn-text { /*padding-left : 80px;*/ //wongi_1017 margin-left: auto; margin-right: auto; } .ui-li .ui-btn.ui-btn-icon_only { top: 50%; margin-top: -32 * @unit_base; } .ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt { padding: 0.2em 0.5em; } /* wongi_1017 : Icons */ /* icons sizing */ .ui-btn .ui-icon { width: 64 * @unit_base; height: 64 * @unit_base; } .ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; } /* Padding for Icon with text */ .ui-btn .ui-btn-text.ui-btn-text-padding-left {padding-left: 32 * @unit_base;} .ui-btn .ui-btn-text.ui-btn-text-padding-right {padding-right: 48 * @unit_base;} .tizen-icon-common { /* Overlap original property */ background-position:0% 0%; width: 64 * @unit_base; height: 64 * @unit_base; background-repeat: no-repeat; background-size: 100% 100%; margin-top : 50%; top : -32 * @unit_base; z-index : 10; vertical-align:middle; } .ui-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_normal.png); z-index:0; } .ui-icon-reveal {.tizen-icon-common; background-image: url(images/00_button_reveal.png); } .ui-icon-reveal-left {.tizen-icon-common; background-image: url(images/00_button_reveal_left.png); } .ui-icon-closed {.tizen-icon-common; background-image: url(images/00_button_expand_closed.png); } .ui-icon-opened {.tizen-icon-common; background-image: url(images/00_button_expand_opened.png); } .ui-icon-info {.tizen-icon-common; background-image: url(images/00_button_info.png); } .ui-icon-rename {.tizen-icon-common; background-image: url(images/00_button_rename.png); } .ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call.png); } .ui-icon-warning {.tizen-icon-common; background-image: url(images/00_button_warning.png); } .ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus_normal.png); } .ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_minus_normal.png); } .ui-icon-cancel {.tizen-icon-common; background-image: url(images/00_button_cancel.png); } .ui-icon-send {.tizen-icon-common; background-image: url(images/00_button_send.png); } .ui-icon-favorite {.tizen-icon-common; background-image: url(images/00_winset_icon_favorite_on.png); } .ui-icon-editexpand {.tizen-icon-common; background-image: url(images/00_button_icon_expand.png); top : -@height_buttonEdit/2; } .ui-icon-editminus {.tizen-icon-common; background-image: url(images/00_button_icon_minus.png); top : -@height_buttonEdit/2;} .ui-icon-editplus {.tizen-icon-common; background-image: url(images/00_button_icon_plus.png); top : -@height_buttonEdit/2;} /* Header back btn : Jinjyuk */ .ui-btn-up-s .ui-icon-header-back-btn{ width: 56 * @unit_base; height: 56 * @unit_base; left : 24 * @unit_base; top : 10 * @unit_base; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(images/00_winset_Back.png);} .ui-btn-down-s, .ui-btn-hover-s { .ui-icon-header-back-btn{ width: 56 * @unit_base; height: 56 * @unit_base; left : 24 * @unit_base; top : 10 * @unit_base; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(images/00_winset_Back.png);} } .ui-icon-header-back-btn{ .LESSbackground-size(48 * @unit_base, 38 * @unit_base); width: 48 * @unit_base; height: 38 * @unit_base; } /* Pressed images */ .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; } .ui-btn-down-s .ui-icon-reveal {.tizen-icon-common; background-image: url(images/00_button_reveal_press.png); } .ui-btn-down-s .ui-icon-reveal-left {.tizen-icon-common; background-image: url(images/00_button_reveal_left_press.png); } .ui-btn-down-s .ui-icon-closed {.tizen-icon-common; background-image: url(images/00_button_expand_closed_press.png); } .ui-btn-down-s .ui-icon-opened {.tizen-icon-common; background-image: url(images/00_button_expand_opened_press.png); } .ui-btn-down-s .ui-icon-info {.tizen-icon-common; background-image: url(images/00_button_info_press.png); } .ui-btn-down-s .ui-icon-rename {.tizen-icon-common; background-image: url(images/00_button_rename_press.png); } .ui-btn-down-s .ui-icon-call {.tizen-icon-common; background-image: url(images/00_button_call_press.png); } .ui-btn-down-s .ui-icon-warning {.tizen-icon-common; background-image: url(images/00_button_warning_press.png); } .ui-btn-down-s .ui-icon-plus {.tizen-icon-common; background-image: url(images/00_button_plus_press.png); } .ui-btn-down-s .ui-icon-minus {.tizen-icon-common; background-image: url(images/00_button_minus_press.png); } .ui-btn-down-s .ui-icon-cancel {.tizen-icon-common; background-image: url(images/00_button_cancel_press.png); } .ui-btn-down-s .ui-icon-send {.tizen-icon-common; background-image: url(images/00_button_send_press.png); } .ui-btn-down-s .ui-icon-favorite {.tizen-icon-common; background-image: url(images/00_winset_icon_favorite_off.png); } .ui-btn-down-s .ui-icon-editexpand {.tizen-icon-common; background-image: url(images/00_button_icon_expand_press.png); top : -@height_buttonEdit/2;} .ui-btn-down-s .ui-icon-editminus {.tizen-icon-common; background-image: url(images/00_button_icon_minus_press.png); top : -@height_buttonEdit/2;} .ui-btn-down-s .ui-icon-editplus {.tizen-icon-common; background-image: url(images/00_button_icon_plus_press.png); top : -@height_buttonEdit/2;} .ui-btn-inner.ui-btn-icon-only { padding: 32 * @unit_base 32 * @unit_base; } .ui-btn-edit .ui-btn-inner.ui-btn-icon-only { padding: @width_buttonEdit/2 @height_buttonEdit/2; } /* Circle Icon BG : data-iconbg = "circle" */ .ui-btn-corner-all.ui-btn-corner-circle { .LESSborder-radius-all(1.0em); //wongi_1018 } /* No BG button : data-iconbg = "nobg" */ .ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg { background-color: transparent; border: none; } /* Contact Edit Style */ .ui-btn.ui-btn-edit .ui-btn-text { color: @color_button_EditText; } .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 { font-size: 0.6em; } .ui-btn.ui-btn-edit.ui-btn-down-s .ui-btn-text { color: @color_button_EditTextPress; } .ui-btn.ui-btn-edit { background-color: @color_button_normal; position: absolute; top: 0 * @unit_base; margin-top: 0 * @unit_base; left : 950px - 160px - @width_buttonEdit; } .ui-btn.ui-btn-edit.ui-btn-down-s { background-color: @color_button_press; }