javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toolbar): place iOS border on ion-header/footer

Browse Source
This commit is contained in:
Adam Bradley
2016-06-17 22:19:51 -05:00
parent 8be0a9ffb3
commit 48c1ffd4f9
3 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/content/content.ts
View File

@ -488,7 +488,7 @@ export class Content extends Ion {
this._scrollEle.style.paddingBottom = (this._paddingBottom > 0 ? this._paddingBottom + 'px' : ''); this._scrollEle.style.paddingBottom = (this._paddingBottom > 0 ? this._paddingBottom + 'px' : '');
} }
if (this._tabbarOnTop && this._tabs) { if (this._tabbarOnTop !== null && this._tabs) {
if (this._tabbarOnTop) { if (this._tabbarOnTop) {
this._tabs.setTabbarPosition(this._headerHeight, -1); this._tabs.setTabbarPosition(this._headerHeight, -1);

2
src/components/searchbar/test/toolbar/main.html
View File

@ -1,7 +1,7 @@
<ion-header> <ion-header>
<ion-navbar> <ion-navbar>
<ion-title>Test</ion-title> <ion-title>Searchbar Toolbars</ion-title>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>

46
src/components/toolbar/toolbar.ios.scss
View File

@ -37,29 +37,43 @@ $navbar-ios-height: $toolbar-ios-height !default;
} }
// iOS Header Toolbar
// --------------------------------------------------
ion-header {
border: 0;
border-bottom-width: 1px;
border-style: solid;
border-color: $toolbar-ios-border-color;
}
&.hairlines ion-header {
border-bottom-width: $hairlines-width;
}
// iOS Footer Toolbar
// --------------------------------------------------
ion-footer {
border: 0;
border-top-width: 1px;
border-style: solid;
border-color: $toolbar-ios-border-color;
}
&.hairlines ion-footer {
border-top-width: $hairlines-width;
}
// iOS Toolbar Background // iOS Toolbar Background
// -------------------------------------------------- // --------------------------------------------------
.toolbar-background { .toolbar-background {
border-bottom-width: 1px;
border-style: solid;
border-color: $toolbar-ios-border-color;
background: $toolbar-ios-background; background: $toolbar-ios-background;
} }
&.hairlines .toolbar-background {
border-bottom-width: $hairlines-width;
}
.toolbar[position=bottom] .toolbar-background {
border-top-width: 1px;
border-bottom-width: 0;
}
&.hairlines .toolbar[position=bottom] .toolbar-background {
border-top-width: $hairlines-width;
}
// iOS Toolbar Content // iOS Toolbar Content
// -------------------------------------------------- // --------------------------------------------------