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

iOS tab bar updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-21 13:05:45 -05:00
parent 1df6ca08cb
commit ff2b75bc6f
5 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/app/colors.scss
View File

@@ -56,3 +56,11 @@ $colors: (
) !default;
// Placeholder Colors
// --------------------------------------------------
// Default colors which are meant to be overridden
$placeholder-background: #f9f9f9 !default;

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

@@ -5,7 +5,7 @@
$tab-bar-ios-item-padding: 0px 10px !default;
$tab-bar-ios-item-font-size: 10px !default;
$tab-bar-ios-item-icon-size: 30px !default;
$tab-bar-ios-height: 49px !default;
$tab-bar-ios-height: 50px !default;
.tabs[mode="ios"] {
@@ -22,11 +22,15 @@ $tab-bar-ios-height: 49px !default;
.tab-button-text {
font-size: $tab-bar-ios-item-font-size;
min-height: $tab-bar-ios-item-font-size + 1;
}
.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;
&:before {
vertical-align: top;
}

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

@@ -2,8 +2,10 @@
// Tabs
// --------------------------------------------------
$tab-bar-background-color: #f7f7f8 !default;
$tab-bar-background-color: $placeholder-background !default;
$tab-button-text-inactive: #8c8c8c !default;
$tab-button-text-active: get-color(primary, base) !default;
$tab-button-padding: 10px !default;
$tab-button-min-width: 80px !default;
$tab-button-max-width: 160px !default;
@@ -72,6 +74,8 @@ button.tab-button {
cursor: pointer;
user-select: none;
color: $tab-button-text-inactive;
border: 0;
border-radius: 0;
background: none;
@@ -119,10 +123,6 @@ button.tab-button {
display: none;
}
button.tab-button:hover {
opacity: 0.8;
}
button.tab-button[aria-selected="true"] {
// Default color is primary
color: get-color(primary, base);

6
ionic/components/tabs/test/advanced/tabs.html
View File

@@ -1,5 +1,7 @@
<ion-tabs>
<ion-tab tab-title="Tab 1" tab-icon="ion-home" [root]="tab1Root"></ion-tab>
<ion-tab tab-title="Tab 2" tab-icon="ion-star" [root]="tab2Root"></ion-tab>
<ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="tab1Root"></ion-tab>
<ion-tab tab-title="Star" tab-icon="ion-ios-star-outline" [root]="tab2Root"></ion-tab>
<ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline" [root]="tab2Root"></ion-tab>
<ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline" [root]="tab2Root"></ion-tab>
</ion-tabs>

3
ionic/components/toolbar/toolbar.scss
View File

@@ -9,8 +9,7 @@ $toolbar-order: (
secondary: 40
);
$toolbar-background: #f4f4f4 !default;
$toolbar-background: $placeholder-background !default;
$toolbar-button-text-color: #007aff !default;
$toolbar-title-text-color: #000 !default;