4 /***************************************************************************
7 ***************************************************************************/
11 background : @color_bar_naviframe_bg; /* Header Background */
12 color: @color_bar_title_text;
13 font-family: Helvetica, Arial, sans-serif;
15 font-size : 28 * @unit_base;
18 color: @color_bar_title_text;
22 > .ui-btn.ui-btn-back,
23 > .ui-btn.ui-btn-footer-down {
24 background : transparent;
29 .ui-icon-header-back-btn {
32 right : 13 * @unit_base;
37 > .ui-btn.ui-btn-footer-down {
54 min-height : 55 * @unit_base;
57 display: inline-block;
58 color : @color_bar_title_text;
59 min-height : 28 * @unit_base;
60 max-height : 34 * @unit_base; /* temporary UX strange */
61 font-size : 28 * @unit_base;
62 font-weight : 500; /* tizen font weight tuning */
63 text-overflow: ellipsis;
66 outline: 0 !important;
69 margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
73 /* header button position : need to press area more... */
75 .ui-btn-inner.ui-btn-icon-only {
76 .LESSbox-boxsizing( border-box );
84 >.ui-btn:not(.ui-btn-icon-notext) {
85 .ui-btn-inner.ui-btn-icon-only {
90 >.ui-btn:not(.ui-btn-icon_only) {
91 width : 53 * @unit_base;
92 height : 18 * @unit_base;
94 bottom : 10 * @unit_base;
100 > .ui-btn.ui-btn-back,
101 > .ui-btn.ui-btn-footer-down {
102 right : 13 * @unit_base;
103 .ui-icon-header-back-btn {
109 display: inline-block;
110 height: 16 * @unit_base;
111 width: 16 * @unit_base;
112 margin-left: 8 * @unit_base;
117 top : 36 * @unit_base;
118 left : 8 * @unit_base;
120 font-size : 12 * @unit_base;
123 height: 16 * @unit_base;
124 width: 16 * @unit_base;
125 margin-left: 8 * @unit_base;
131 top : 16 * @unit_base;
134 height : 34 * @unit_base;
135 width : 34 * @unit_base;
137 background: transparent;
138 color : @color_bar_title_button_text;
140 &.ui-title-tabbar >.ui-btn {
141 // NOTE: there is an issue that when tabbar and button are
142 // used together in the header, the lower part of buttons is
143 // hidden by the tabbar. (N_SE-22253) Although No specification
144 // for this case is found in the GUI guide, this one is added
145 // to resolve this issue.
149 > .ui-btn.ui-btn-icon_only {
150 -o-border-radius : 0px;
151 -ms-border-radius : 0px;
152 -moz-border-radius : 0px;
153 -webkit-border-radius : 0px;
158 right : 11 * @unit_base;
162 right : 56 * @unit_base;
165 > .ui-btn:not(.ui-btn-icon_only):nth-child(2) {
166 right : 7 * @unit_base;
169 > .ui-btn:not(.ui-btn-icon_only):nth-child(3) {
170 right : 62 * @unit_base;
173 > img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3) {
174 right : 7 * @unit_base;
177 > img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3) + .ui-btn:not(.ui-btn-icon_only) {
178 right : 62 * @unit_base;
181 > img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4) {
182 right : 7 * @unit_base;
185 > img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4) + .ui-btn:not(.ui-btn-icon_only) {
186 right : 62 * @unit_base;
188 > .ui-btn.ui-btn-down-s {
189 background : @color_bar_btn_press;
190 color : @color_bar_title_button_text_press;
193 &.ui-title-multiline {
195 min-height : 24 * @unit_base;
196 max-height : 24 * @unit_base; /* temporary UX strange */
197 font-size : 22 * @unit_base;
199 margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
205 .ui-footer.ui-bar-s {
206 height : 49 * @unit_base;
209 >.ui-btn.ui-btn-back,
210 >.ui-btn.ui-btn-footer-down,
211 >[data-icon="naviframe-more"] {
212 background : transparent;
215 width : 56 * @unit_base;
216 height : 49 * @unit_base;
218 -webkit-box-shadow : none /* temp code */
222 >.ui-btn.ui-btn-back,
223 >.ui-btn.ui-btn-footer-down {
227 >.ui-btn.ui-btn-footer-down {
229 right : 13 * @unit_base;
233 [data-icon="naviframe-more"] {
235 left : 0 * @unit_base;
236 top : 0 * @unit_base;
241 .ui-icon-naviframe-more {
242 left : 13 * @unit_base;
243 top : 8 * @unit_base;
249 background: transparent;
253 >[data-role="button"] {
254 font-size : 15 * @unit_base;
256 color : @color_tabbar_btn_normal;
259 [data-role="controlgroup"] {
262 margin-top : 6 * @unit_base; /* temp value */
263 margin-bottom : 6 * @unit_base; /* temp value */
264 padding-left : 58 * @unit_base;
265 padding-right : 58 * @unit_base;
268 [data-role="button"] {
269 background : transparent;
271 border-style : solid;
272 border-color : @color_bar_divider_line;
273 border-top-width : 0px;
274 border-bottom-width : 0px;
275 border-left-width : 1px;
276 border-right-width : 1px;
278 .LESSborder-radius-all(0);
283 margin-left : -4 * @unit_base;
284 margin-right : -5 * @unit_base;
286 .LESSborder-radius-all(0);
288 &.ui-btn-down-s, .ui-btn-active-s {
289 .LESSborder-radius-all(0);
291 background : @color_bg;
293 color : @color_bar_title_text;
299 .LESSborder-radius-all(0);
304 font-size : 17 * @unit_base;
305 color : rgba(58, 58, 58, 1);
309 border-right-width : 0px;
313 border-left-width : 0px;
318 > [data-role="button"]:not([data-icon="naviframe-more"]) {
319 top : 6 * @unit_base;
323 margin-top : 8 * @unit_base;
324 margin-bottom : 8 * @unit_base;
326 > h1, h2, h3, h4, h5, h6 {
327 display: inline-block;
331 /***************************************************************************
332 Content Top calculate
333 ***************************************************************************/
339 /***************************************************************************
340 Content Top calculate
341 ***************************************************************************/
345 border: 1px solid #2a2a2a;
346 background: @color_bg;
350 font-family: Helvetica, Arial, sans-serif;
352 .ui-link-inherit { color: #fff; }
357 &:hover { color: #2489CE; }
358 &:active { color: #2489CE; }
359 &:visited { color: #2489CE; }
366 padding: 1 * @unit_base;
368 .ui-btn-box-s.ui-btn-up-s {
369 .LESSbutton_box_style;
370 .LESSborder-radius-all( 0.3rem );
371 .LESSbutton_text1_style;
374 .ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
375 .LESSborder-radius-all( 1.2rem );
378 .ui-btn-box-s .ui-btn-inner {
380 border-color: @color_button_inner_border;
381 .LESSborder-radius-all( 0.3rem );
382 .LESSbox-boxsizing( border-box );
383 .LESSbutton_inner_box_style;
387 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
388 .LESSborder-radius-all( 1.2rem );
391 .ui-ctxpopup .ui-btn-box-s{
394 background: transparent !important;
398 color: white !important;
401 background: @color_ctxbutton_press !important;
405 color: white !important;
406 .LESSborder-radius-all( 0 );
409 background: transparent ! important;
415 .ui-ctxpopup .ui-btn-down-s {
416 background: @color_ctxbutton_press !important;
419 .ui-header .ui-btn-box-s,
420 .ui-footer .ui-btn-box-s,
421 .ui-btn-back.ui-btn-up-s,
422 .ui-btn-back.ui-btn-hover-s,
423 .ui-btn-back.ui-btn-down-s,
424 .ui-btn-footer-down.ui-btn-up-s,
425 .ui-btn-footer-down.ui-btn-hover-s,
426 .ui-btn-footer-down.ui-btn-down-s,
427 .ui-popup-container .ui-btn-box-s {
429 .LESSborder-radius-all( 0.9 rem );
432 .ui-btn-box-s.ui-btn-hover-s {
433 .LESSbutton_hover_style;
434 .LESSbutton_text1_style;
435 .LESSborder-radius-allimportant( 0.3em );
437 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
438 .LESSborder-radius-allimportant( 1em );
440 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
441 .LESSborder-radius-allimportant( 1.2em );
443 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
444 .LESSborder-radius-allimportant( 1.2em );
446 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
447 .LESSbutton_down_style;
453 font-family: Helvetica, Arial, sans-serif;
454 text-decoration: none;
459 /* links within "buttons"
460 -----------------------------------------------------------------------------------------------------------*/
463 text-decoration: none !important;
467 /* Active class used as the "on" state across all themes
468 -----------------------------------------------------------------------------------------------------------*/
470 /* button default color for active state */
473 color: @color_button_text_normal;
475 text-decoration: none;
476 background: @color_button_press;
478 //font-family: Helvetica, Arial, sans-serif;
481 color: @color_button_text_normal;
485 /* button inner top highlight
486 -----------------------------------------------------------------------------------------------------------*/
495 /* corner rounding classes
496 -----------------------------------------------------------------------------------------------------------*/
499 .LESSborder-radius-topleft(.3em);
502 .LESSborder-radius-topright(.3em);
505 .LESSborder-radius-bottomleft(.3em);
508 .LESSborder-radius-bottomright(.3em);
511 .LESSborder-radius-topleft(.3em);
512 .LESSborder-radius-topright(.3em);
515 .LESSborder-radius-bottomleft(.3em);
516 .LESSborder-radius-bottomright(.3em);
519 .LESSborder-radius-topright(.3em);
520 .LESSborder-radius-bottomright(.3em);
523 .LESSborder-radius-topleft(.3em);
524 .LESSborder-radius-bottomleft(.3em);
527 //.LESSborder-radius-all(.3em);
530 .LESSborder-radius-all(0);
533 /***************************************************************************
535 ***************************************************************************/
536 .ui-header, .ui-footer {
537 .ui-btn .ui-btn-icon-only .ui-icon {
538 width: 32 * @unit_base;
539 height: 32 * @unit_base;
544 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn,
545 .ui-btn-footer-down .ui-btn-inner .ui-icon {
546 width: 32 * @unit_base;
547 height: 32 * @unit_base;
549 background-repeat: no-repeat;
550 background-size: 100% 100%;
554 .ui-btn-up-s { /* less parsing problem : divide css */
555 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
556 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
557 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
558 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
559 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
560 .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_web_web.png); }
564 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
565 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
566 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
567 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
568 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
569 .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_web_web.png); }
573 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
574 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
575 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
576 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
577 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
578 .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_press_web.png); }
582 -----------------------------------------------------------------------------------------------------------*/
584 filter: Alpha(Opacity=30);
590 cursor: default !important;
591 pointer-events: none;