javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

tabs redo

Browse Source
This commit is contained in:
Adam Bradley
2015-07-21 21:12:37 -05:00
parent ec1aa92b66
commit 996fae5b6c
3 changed files with 16 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ionic/components/tabs/extensions/ios.scss
View File

@@ -11,9 +11,7 @@ $tab-bar-ios-height: 50px !default;
.tabs[mode="ios"] {
.tab-bar {
// iOS's UITabBar is at most 49px high
max-height: $tab-bar-ios-height;
height: $tab-bar-ios-height;
min-height: $tab-bar-ios-height;
}
.tab-button {
@@ -32,23 +30,22 @@ $tab-bar-ios-height: 50px !default;
.tab-button-icon {
font-size: $tab-bar-ios-item-icon-size;
height: $tab-bar-ios-item-icon-size;
min-width: $tab-bar-ios-item-icon-size;
margin-bottom: 2px;
min-width: $tab-bar-ios-item-icon-size + 5;
&:before {
vertical-align: top;
}
}
&[tab-bar-placement="bottom"] > .tab-bar-container {
&[tab-bar-placement="bottom"] .tab-bar-container {
@include hairline(top, $toolbar-ios-border-color);
}
&[tab-bar-placement="top"] > .tab-bar-container {
&[tab-bar-placement="top"] .tab-bar-container {
@include hairline(bottom, $toolbar-ios-border-color);
}
&[tab-bar-placement="top"] > .toolbar-container .toolbar {
&[tab-bar-placement="top"] .toolbar-container .toolbar {
@include hairline(bottom, none);
}

16
ionic/components/tabs/extensions/material.scss
View File

@@ -2,7 +2,7 @@
// Material Design Tabs
// --------------------------------------------------
$tab-bar-md-item-padding: 0 10px !default;
$tab-bar-md-item-padding: 2px 10px !default;
$tab-bar-md-item-font-size: 1.4rem !default;
$tab-bar-md-item-icon-size: 26px !default;
$tab-bar-md-item-height: 4.8rem !default;
@@ -21,19 +21,7 @@ $tab-bar-md-item-height: 4.8rem !default;
.tab-button-icon {
font-size: $tab-bar-md-item-icon-size;
}
.has-title.has-icon {
.tab-button-icon {
padding-top: 10px;
padding-bottom: 6px;
}
.tab-button-text {
padding-bottom: 15px;
}
min-width: $tab-bar-md-item-icon-size + 5;
}
}

20
ionic/components/tabs/tabs.scss
View File

@@ -46,7 +46,7 @@ ion-tab {
order: $flex-order-tab-bar-bottom;
}
[tab-bar-placement="top"] > .tab-bar-container {
[tab-bar-placement="top"] .tab-bar-container {
order: $flex-order-tab-bar-top;
}
@@ -74,25 +74,19 @@ button.tab-button {
cursor: pointer;
user-select: none;
color: $tab-button-text-inactive;
border: 0;
border-radius: 0;
background: none;
}
[tab-bar-icons="bottom"] > .tab-bar-container button.tab-button {
[tab-bar-icons="bottom"] button.tab-button {
.tab-button-icon {
order: 10;
}
.tab-button-icon {
margin-top: 2px;
margin-bottom: 0;
}
}
[tab-bar-icons="left"] > .tab-bar-container button.tab-button {
[tab-bar-icons="left"] button.tab-button {
flex-direction: row;
.tab-button-icon {
@@ -101,7 +95,7 @@ button.tab-button {
}
}
[tab-bar-icons="right"] > .tab-bar-container button.tab-button {
[tab-bar-icons="right"] button.tab-button {
flex-direction: row;
.tab-button-icon {
@@ -111,6 +105,11 @@ button.tab-button {
}
}
.tab-button-text {
margin-top: 3px;
margin-bottom: 2px;
}
.tab-button-text,
.tab-button-icon {
align-self: center;
@@ -130,7 +129,6 @@ button.tab-button {
display: block;
}
.has-title-only,
.has-title-only .tab-button-text {
white-space: normal;
}