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

feat(toolbar): added transparent toolbar example and styling

Browse Source 
Removed the inline styling changing the background of the test
toolbars. Closes #743
This commit is contained in:
Brandy Carney
2015-12-15 17:03:51 -05:00
parent f97e9eaa19
commit ee0bc1b592
3 changed files with 16 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
ionic/components/toolbar/test/colors/main.html
View File

@ -148,52 +148,21 @@
</ion-toolbar>
<ion-toolbar>
<ion-toolbar transparent>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<icon star></icon>
</button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-title>Transparent</ion-title>
<button menuToggle right>
<icon menu></icon>
</button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button2 (click)="buttonClick(button2)">
<icon search></icon>
</button>
</ion-buttons>
<ion-segment secondary>
<ion-segment-button>
Something
</ion-segment-button>
<ion-segment-button>
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button>
Light
</ion-segment-button>
<ion-segment-button>
Toolbar
</ion-segment-button>
<ion-segment-button>
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<style>
.toolbar {
border-bottom: 1px solid black;
background: #eee !important;
}
</style>

1
ionic/components/toolbar/test/scenarios/main.html
View File

@ -194,6 +194,5 @@
<style>
.toolbar {
border-bottom: 1px solid black;
background: #eee !important;
}
</style>

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

@ -66,6 +66,15 @@ ion-buttons div {
pointer-events: auto;
}
// Transparent Toolbar
// --------------------------------------------------
.toolbar[transparent] .toolbar-background {
background: transparent;
border-color: transparent;
}
// TODO this is a temp hack to fix segment overlapping ion-nav-item
ion-buttons,
.bar-button-menutoggle {