From a9c0880367b855cc63f60a577a1f9d794029d951 Mon Sep 17 00:00:00 2001 From: Jinhyuk Jun Date: Mon, 17 Dec 2012 15:02:29 +0900 Subject: [PATCH] add divider for tabbar Change-Id: I50093a9625542b1ae828814a30ba3ef431cc4a9a --- .../widgets/tabbar/tabbar_footer_more.html | 2 +- .../tizen/common/jquery.mobile.tizen.tabbar.less | 106 +++++++++++++++------ src/themes/tizen/tizen-white/style.less | 2 +- 3 files changed, 80 insertions(+), 30 deletions(-) diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html index cceab6c..86c7076 100755 --- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html +++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html @@ -11,7 +11,7 @@ -
+

Tabbar text with title

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less index 8e8e36c..4af67ae 100755 --- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less +++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less @@ -7,16 +7,29 @@ background : @color_bg; z-index : 1000; &.ui-portrait-tabbar { - height : 55 * @unit_base; + /* portrait style */ } &.ui-landscape-tabbar { - height : 55 * @unit_base; + /* landscape style */ } a.ui-btn { background : @color_bg; color : @color_tabbar_btn_normal; + padding-top : 19 * @unit_base; + padding-bottom : 19 * @unit_base; + .ui-btn-inner { + padding-top : 0px; + padding-bottom : 0px; + border-left : 1px solid; + border-color : @color_bar_divider_line; + border-radius : 0px; + -0-border-radius : 0px; + -ms-border-radius : 0px; + -webkit-border-radius : 0px; + } + .ui-icon { width: 32 * @unit_base; height: 32 * @unit_base; @@ -55,9 +68,6 @@ } .ui-btn-inner { - padding-top : 44 * @unit_base; - padding-bottom : 3 * @unit_base; - font-size : 15 * @unit_base; font-weight : bold; @@ -68,20 +78,16 @@ } } - &.ui-tabbar-noicons { - .ui-btn-inner { - padding-top : 19 * @unit_base; - padding-bottom : 18 * @unit_base; - } - } - &.ui-tabbar-notext { - .ui-btn-inner { - padding-top : 50 * @unit_base; - padding-bottom : 5 * @unit_base; + a.ui-btn { + padding-top : 11 * @unit_base; + padding-bottom : 10 * @unit_base; + } + .ui-btn-inner { + height : 34 * @unit_base; .ui-icon { - top : 11 * @unit_base; + top : 0px; } } } @@ -97,40 +103,53 @@ .ui-tabbar { &.ui-tabbar-noicons { - .ui-btn-inner { + a.ui-btn { padding-top : 15 * @unit_base; padding-bottom : 13 * @unit_base; } } &.ui-tabbar-notext { - .ui-btn-inner { - padding-top : 47 * @unit_base; - padding-bottom : 0 * @unit_base; + a.ui-btn { + padding-top : 7 * @unit_base; + padding-bottom : 5 * @unit_base; } } &.ui-portrait-tabbar { - height : 47 * @unit_base; + /* portrait style */ } - &.ui-landscape-tabbar { - height : 40 * @unit_base; + /* landscape style */ } } } .ui-header.ui-bar-s { &.ui-title-tabbar-multiline { - height : 75 * @unit_base; .ui-tabbar { - height : 75 * @unit_base; - .ui-btn-inner { - padding-top : 45 * @unit_base; + a.ui-btn { + padding-top : 11 * @unit_base; padding-bottom : 10 * @unit_base; + .ui-btn-inner { + height : 54 * @unit_base; + .ui-btn-text { + padding-top : 0px; + line-height : 85 * @unit_base; + } + .ui-icon { + top : 0px; + } + } } } } + + li:first-child { + .ui-btn-inner { + border-left-width : 0px; + } + } } @@ -141,9 +160,24 @@ margin-left : auto; margin-right : auto; + a.ui-btn { + padding-top : 16 * @unit_base; + padding-bottom : 16 * @unit_base; + } .ui-btn-inner { .ui-icon { - top : 7 * @unit_base; + top : 0px; + } + } + &.ui-tabbar-notext { + a.ui-btn { + padding-top : 8 * @unit_base; + padding-bottom : 7 * @unit_base; + } + } + li:first-child { + .ui-btn-inner { + border-left-width : 0px; } } } @@ -156,6 +190,22 @@ margin-left : 56 * @unit_base; } + .ui-btn-back ~ .ui-tabbar { + li:last-child { + .ui-btn-inner { + border-right : 1px solid; + border-right-color : @color_bar_divider_line; + } + } + } + [data-icon="naviframe-more"] ~ .ui-tabbar { + li:first-child { + .ui-btn-inner { + border-left : 1px solid; + border-left-color : @color_bar_divider_line; + } + } + } } .ui-tabbar-s.ui-navbar-noicons { diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less index 9bd6968..3d26c77 100755 --- a/src/themes/tizen/tizen-white/style.less +++ b/src/themes/tizen/tizen-white/style.less @@ -20,7 +20,7 @@ /*************************************************************************** Tabbar ***************************************************************************/ -@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */ +@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(210,210,200,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */ @color_tabbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P : Tab pressed */ @color_tabbar_btn_normal : rgba(153, 153, 153, 1); /* B052L6 : Tab Normal */ -- 2.7.4