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

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

@ -148,52 +148,21 @@
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar transparent>
<ion-buttons end> <ion-buttons end>
<button #button1 (click)="buttonClick(button1)"> <button #button1 (click)="buttonClick(button1)">
<icon star></icon> <icon star></icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Right side menu toggle</ion-title> <ion-title>Transparent</ion-title>
<button menuToggle right> <button menuToggle right>
<icon menu></icon> <icon menu></icon>
</button> </button>
</ion-toolbar> </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> <style>
.toolbar { .toolbar {
border-bottom: 1px solid black; border-bottom: 1px solid black;
background: #eee !important;
} }
</style> </style>

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

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

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

@ -66,6 +66,15 @@ ion-buttons div {
pointer-events: auto; 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 // TODO this is a temp hack to fix segment overlapping ion-nav-item
ion-buttons, ion-buttons,
.bar-button-menutoggle { .bar-button-menutoggle {