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

fix(toolbar): position toolbar relative and add z-index

Browse Source
This commit is contained in:
Brandy Carney
2016-06-17 16:15:31 -04:00
parent 927edfffcd
commit 1d8ba4a5e7
9 changed files with 445 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/app/structure.scss
View File

@ -18,7 +18,7 @@ $z-index-navbar-section: 10;
$z-index-page-container: 0;
$z-index-selected-tab: 1;
$z-index-toolbar: 10;
$z-index-toolbar-background: -1;
$z-index-toolbar-background: 0;
$z-index-toolbar-border: 20;
$z-index-list-border: 50;
@ -183,6 +183,11 @@ ion-header {
width: 100%;
}
ion-toolbar {
position: relative;
z-index: $z-index-toolbar;
}
ion-footer {
position: absolute;
bottom: 0;

20
src/components/toolbar/test/colors/main.html
View File

@ -1,9 +1,9 @@
<ion-content>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
@ -24,7 +24,6 @@
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar primary>
<ion-buttons start>
<button showWhen="ios">
@ -42,7 +41,6 @@
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar primary>
<ion-buttons start>
<button cla showWhen="ios"ss="activated">
@ -60,7 +58,6 @@
<ion-title>Primary.activated</ion-title>
</ion-toolbar>
<ion-toolbar secondary>
<ion-buttons start>
<button solid>
@ -80,7 +77,6 @@
</ion-buttons>
</ion-toolbar>
<ion-toolbar secondary>
<ion-buttons start>
<button solid class="activated">
@ -100,7 +96,6 @@
</ion-buttons>
</ion-toolbar>
<ion-toolbar dark>
<ion-buttons start>
<button outline>
@ -119,7 +114,6 @@
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar dark>
<ion-buttons start>
<button outline class="activated">
@ -138,7 +132,6 @@
<ion-title>Dark.activated</ion-title>
</ion-toolbar>
<ion-toolbar danger>
<ion-buttons start>
<button>
@ -155,7 +148,6 @@
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar danger>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
@ -184,7 +176,6 @@
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar light>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
@ -197,7 +188,6 @@
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar transparent>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
@ -209,10 +199,4 @@
<ion-icon name="menu"></ion-icon>
</button>
</ion-toolbar>
<style>
.toolbar {
border-bottom: 1px solid black;
}
</style>
</ion-content>

18
src/components/toolbar/test/scenarios/main.html
View File

@ -1,3 +1,5 @@
<ion-content>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
@ -36,7 +38,6 @@
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button class="activated">
@ -54,7 +55,6 @@
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid>
@ -74,7 +74,6 @@
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<a button solid class="activated">
@ -94,7 +93,6 @@
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline>
@ -113,7 +111,6 @@
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline class="activated">
@ -132,7 +129,6 @@
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
@ -162,7 +158,6 @@
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
@ -175,7 +170,6 @@
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
@ -217,10 +211,4 @@
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<style>
.toolbar {
border-bottom: 1px solid black;
}
</style>
</ion-content>

4
src/components/toolbar/toolbar.scss
View File

@ -1,9 +1,9 @@
@import "../../globals.core";
// Toolbar
// --------------------------------------------------
.toolbar {
display: flex;
overflow: hidden;
@ -67,6 +67,7 @@ ion-buttons div {
pointer-events: auto;
}
// Transparent Toolbar
// --------------------------------------------------
@ -84,6 +85,7 @@ ion-buttons,
transform: translateZ(0);
}
// Navbar
// --------------------------------------------------

2
src/components/virtual-scroll/test/basic/main.html
View File

@ -1,5 +1,4 @@
<ion-header>
<ion-navbar>
<ion-title>Virtual Scroll{{webview}}</ion-title>
<ion-buttons end>
@ -8,7 +7,6 @@
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

6
src/components/virtual-scroll/test/cards/main.html
View File

@ -1,4 +1,8 @@
<ion-toolbar><ion-title>Virtual Scroll: Cards</ion-title></ion-toolbar>
<ion-header>
<ion-toolbar>
<ion-title>Virtual Scroll: Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>

68
src/components/virtual-scroll/test/image-gallery/main.html
View File

@ -1,39 +1,4 @@
<style>
.virtual-header {
width: 100%;
margin-bottom: 5px;
padding: 10px;
background: #eee;
}
.virtual-item {
display: inline-block;
vertical-align: top;
width: 80px;
height: 80px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid gray;
}
.virtual-footer {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
margin-left: 5px;
margin-bottom: 5px;
padding: 10px;
}
.virtual-scroll > :first-child {
border-top: 2px solid blue;
}
.virtual-scroll > :last-child {
background: red;
}
</style>
<ion-header>
<ion-navbar>
<ion-title>Virtual Scroll: Image Gallery</ion-title>
<ion-buttons end>
@ -42,7 +7,6 @@
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
@ -75,3 +39,35 @@
</ion-content>
<style>
.virtual-header {
width: 100%;
margin-bottom: 5px;
padding: 10px;
background: #eee;
}
.virtual-item {
display: inline-block;
vertical-align: top;
width: 80px;
height: 80px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid gray;
}
.virtual-footer {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
margin-left: 5px;
margin-bottom: 5px;
padding: 10px;
}
.virtual-scroll > :first-child {
border-top: 2px solid blue;
}
.virtual-scroll > :last-child {
background: red;
}
</style>

2
src/components/virtual-scroll/test/sliding-item/main.html
View File

@ -1,5 +1,4 @@
<ion-header>
<ion-navbar>
<ion-title>Virtual Scroll{{webview}}</ion-title>
<ion-buttons end>
@ -8,7 +7,6 @@
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

6
src/components/virtual-scroll/test/variable-size/main.html
View File

@ -1,4 +1,8 @@
<ion-toolbar><ion-title>Virtual Scroll: Variable Sizes</ion-title></ion-toolbar>
<ion-header>
<ion-toolbar>
<ion-title>Virtual Scroll: Variable Sizes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>