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;
}
.ui-btn-inner {
- padding-top : 44 * @unit_base;
- padding-bottom : 3 * @unit_base;
-
font-size : 15 * @unit_base;
font-weight : bold;
}
}
- &.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;
}
}
}
.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;
+ }
+ }
}
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;
}
}
}
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 {
font-size : 22 * @unit_base;
-}
\ No newline at end of file
+}
+
+/* Scrollable tabbar */
+
+.ui-tabbar {
+ .tabbar-scroll-ul {
+ margin-top : 0px;
+ margin-bottom : 0px;
+ padding-left : 0px;
+
+ .tabbar-scroll-li {
+ position : relative;
+ display : inline-block;
+ margin-left : -8 * @unit_base;
+ a {
+ width : 100%;
+ }
+ }
+ li.tabbar-scroll-li:first-child {
+ margin-left : 0px;
+ }
+ }
+}
+
+.ui-tabbar-divider {
+ position : absolute;
+
+ top : 0px;
+ width : 10 * @unit_base;
+ height : 55 * @unit_base;
+ background : -webkit-linear-gradient(left, rgba(0, 0, 155, 1) 0%,rgba(246,248,239,1) 100%);
+}
+
+.ui-tabbar-divider-left {
+ left : 0px;
+ border-top-right-radius : 10 * @unit_base;
+ border-bottom-right-radius : 10 * @unit_base;
+ background : -webkit-linear-gradient(left, rgba(246, 248, 239, 1) 0%,rgba(246,248,239,1) 100%);
+}
+
+.ui-tabbar-divider-right {
+ right : 0px;
+ border-top-left-radius : 10 * @unit_base;
+ border-bottom-left-radius : 10 * @unit_base;
+ background : -webkit-linear-gradient(right, rgba(246, 248, 239, 1) 0%,rgba(246,248,239,1) 100%);
+}