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

iOS tab-bar hairline

Browse Source
This commit is contained in:
Adam Bradley
2015-07-24 15:08:09 -05:00
parent c8d03793a3
commit 82c650e2e5
4 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/nav-bar/extensions/ios.scss
View File

@ -3,14 +3,10 @@
// --------------------------------------------------
$navbar-ios-height: 4.4rem !default;
$navbar-ios-border-color: #c4c4c4 !default;
.nav[mode="ios"] .navbar-container {
min-height: $navbar-ios-height;
// navbar on top, border on bottom (default)
@include hairline(bottom, $navbar-ios-border-color);
}
.navbar[mode="ios"] {

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

@ -12,6 +12,12 @@ $tab-bar-ios-height: 50px !default;
.tab-bar {
min-height: $tab-bar-ios-height;
border-top: 1px solid $toolbar-ios-border-color;
}
&[tab-bar-placement="top"] .tab-bar {
border-top: none;
border-bottom: 1px solid $toolbar-ios-border-color;
}
.tab-button {
@ -37,16 +43,16 @@ $tab-bar-ios-height: 50px !default;
}
}
&[tab-bar-placement="bottom"] .tab-bar-container {
@include hairline(top, $toolbar-ios-border-color);
}
.hairlines .tabs[mode="ios"] {
.tab-bar {
border-top-width: 0.5px;
}
&[tab-bar-placement="top"] .tab-bar-container {
@include hairline(bottom, $toolbar-ios-border-color);
}
&[tab-bar-placement="top"] .toolbar-container .toolbar {
@include hairline(bottom, none);
&[tab-bar-placement="top"] .tab-bar {
border-bottom-width: 0.5px;
}
}

5
ionic/components/toolbar/extensions/ios.scss
View File

@ -16,6 +16,7 @@ $toolbar-ios-title-font-size: 1.7rem !default;
.toolbar[mode="ios"] {
border-bottom: 1px solid $toolbar-ios-border-color;
.toolbar-title {
order: map-get($toolbar-order-ios, title);
@ -54,3 +55,7 @@ $toolbar-ios-title-font-size: 1.7rem !default;
}
}
.hairlines .toolbar[mode="ios"] {
border-bottom-width: 0.5px;
}

1
ionic/platform/registry.ts
View File

@ -5,6 +5,7 @@ Platform.register({
name: 'core',
settings: {
backButtonText: 'Back',
backButtonIcon: 'ion-ios-arrow-back',
mode: 'ios',
iconMode: 'ios',
viewTransition: 'ios'