3 /***************************************************************************
5 ***************************************************************************/
7 background : @color_bg;
12 &.ui-landscape-tabbar {
17 background : @color_bg;
18 color : @color_tabbar_btn_normal;
20 padding-top : 19 * @unit_base;
21 padding-bottom : 19 * @unit_base;
25 border-left : 1px solid;
26 border-color : @color_bar_divider_line;
28 -0-border-radius : 0px;
29 -ms-border-radius : 0px;
30 -webkit-border-radius : 0px;
34 width: 32 * @unit_base;
35 height: 32 * @unit_base;
37 background-repeat: no-repeat;
38 background-size: 100% 100%;
44 background: @color_bg;
46 a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
47 color : @color_tabbar_btn_pressed;
49 a.ui-btn-hover-s.ui-btn-down-s {
50 &:not(.ui-state-persist) {
51 color : @color_tabbar_btn_pressed;
52 background: @color_tabbar_btn_tab_press;
57 &:not(.ui-tabbar-persist) {
59 background: @color_bg;
61 a.ui-btn-active, .ui-btn-show-style {
62 color : @color_tabbar_btn_pressed;
64 a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
65 color : @color_tabbar_btn_pressed;
66 background: @color_tabbar_btn_tab_press;
71 font-size : 15 * @unit_base;
75 top : 10 * @unit_base;
77 margin-left : -16 * @unit_base;
83 padding-top : 11 * @unit_base;
84 padding-bottom : 10 * @unit_base;
88 height : 34 * @unit_base;
96 /* title font size when title tabbar */
97 .ui-header.ui-bar-s.ui-title-tabbar {
99 font-size : 22 * @unit_base;
100 margin-top : 8 * @unit_base;
101 margin-bottom : 0 * @unit_base;
105 &.ui-tabbar-noicons {
107 padding-top : 15 * @unit_base;
108 padding-bottom : 13 * @unit_base;
114 padding-top : 7 * @unit_base;
115 padding-bottom : 5 * @unit_base;
119 &.ui-portrait-tabbar {
122 &.ui-landscape-tabbar {
123 /* landscape style */
128 .ui-header.ui-bar-s {
129 &.ui-title-tabbar-multiline {
132 padding-top : 11 * @unit_base;
133 padding-bottom : 10 * @unit_base;
135 height : 54 * @unit_base;
138 line-height : 85 * @unit_base;
150 border-left-width : 0px;
156 .ui-footer.ui-bar-s {
158 height : 49 * @unit_base;
164 padding-top : 16 * @unit_base;
165 padding-bottom : 16 * @unit_base;
174 padding-top : 8 * @unit_base;
175 padding-bottom : 7 * @unit_base;
180 border-left-width : 0px;
185 .ui-tabbar.ui-tabbar-margin-back {
186 margin-right : 56 * @unit_base;
189 .ui-tabbar.ui-tabbar-margin-more {
190 margin-left : 56 * @unit_base;
193 .ui-btn-back ~ .ui-tabbar {
196 border-right : 1px solid;
197 border-right-color : @color_bar_divider_line;
201 [data-icon="naviframe-more"] ~ .ui-tabbar {
204 border-left : 1px solid;
205 border-left-color : @color_bar_divider_line;
211 .ui-tabbar-s.ui-navbar-noicons {
212 font-size : 22 * @unit_base;
215 /* Scrollable tabbar */
225 display : inline-block;
226 margin-left : -8 * @unit_base;
231 li.tabbar-scroll-li:first-child {
241 width : 10 * @unit_base;
242 height : 55 * @unit_base;
243 background : -webkit-linear-gradient(left, rgba(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%);
246 .ui-tabbar-divider-left {
248 border-top-right-radius : 10 * @unit_base;
249 border-bottom-right-radius : 10 * @unit_base;
250 background : -webkit-linear-gradient(left, rgba(153, 153, 153, 1) 0%,rgba(246,248,239,1) 100%);
253 .ui-tabbar-divider-right {
255 border-top-left-radius : 10 * @unit_base;
256 border-bottom-left-radius : 10 * @unit_base;
257 background : -webkit-linear-gradient(right, rgba(153, 153, 153, 1) 0%,rgba(246,248,239,1) 100%);