From 1d8ba4a5e7f1f084f7af549911f786c7377f858f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 17 Jun 2016 16:15:31 -0400
Subject: [PATCH] fix(toolbar): position toolbar relative and add z-index

---
 src/components/app/structure.scss             |   9 +-
 src/components/toolbar/test/colors/main.html  | 418 ++++++++---------
 .../toolbar/test/scenarios/main.html          | 438 +++++++++---------
 src/components/toolbar/toolbar.scss           |   4 +-
 .../virtual-scroll/test/basic/main.html       |   2 -
 .../virtual-scroll/test/cards/main.html       |   6 +-
 .../test/image-gallery/main.html              |  68 ++-
 .../test/sliding-item/main.html               |   2 -
 .../test/variable-size/main.html              |   6 +-
 9 files changed, 466 insertions(+), 487 deletions(-)

diff --git a/src/components/app/structure.scss b/src/components/app/structure.scss
index 38057775239..a161e4d8441 100644
--- a/src/components/app/structure.scss
+++ b/src/components/app/structure.scss
@@ -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;
@@ -250,4 +255,4 @@ ion-content.js-scroll > scroll-content {
 [nav-portal],
 [tab-portal] {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/src/components/toolbar/test/colors/main.html b/src/components/toolbar/test/colors/main.html
index 73fe3069dfd..73adba1f529 100644
--- a/src/components/toolbar/test/colors/main.html
+++ b/src/components/toolbar/test/colors/main.html
@@ -1,218 +1,202 @@
 
-<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>
-  </button>
-  <ion-buttons start>
-    <button showWhen="ios">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button>
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary>
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Default</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar primary>
-  <ion-buttons start>
-    <button showWhen="ios">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button>
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary>
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Primary</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar primary>
-  <ion-buttons start>
-    <button cla showWhen="ios"ss="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button class="activated">
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary class="activated">
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Primary.activated</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar secondary>
-  <ion-buttons start>
-    <button solid>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button solid>
-      <ion-icon name="contact"></ion-icon>
-      Solid
-    </button>
-  </ion-buttons>
-  <ion-title>Secondary</ion-title>
-  <ion-buttons end>
-    <button solid danger>
-      Help
-      <ion-icon name="help-circle"></ion-icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
-
-
-<ion-toolbar secondary>
-  <ion-buttons start>
-    <button solid class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button solid class="activated">
-      <ion-icon name="contact"></ion-icon>
-      Solid
-    </button>
-  </ion-buttons>
-  <ion-title>Secondary Activated</ion-title>
-  <ion-buttons end>
-    <button solid danger class="activated">
-      Help
-      <ion-icon name="help-circle"></ion-icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
-
-
-<ion-toolbar dark>
-  <ion-buttons start>
-    <button outline>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button outline>
-      <ion-icon name="star"></ion-icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Dark</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar dark>
-  <ion-buttons start>
-    <button outline class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button outline class="activated">
-      <ion-icon name="star"></ion-icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Dark.activated</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar danger>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="contact"></ion-icon>
-      Clear
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button>
-      Edit
-      <ion-icon name="create"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Danger</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar danger>
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Danger</ion-title>
-</ion-toolbar>
-
-<ion-toolbar light>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="contact"></ion-icon>
-      Clear
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button>
-      Edit
-      <ion-icon name="create"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Light</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar light>
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Light</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar transparent>
-  <ion-buttons end>
-    <button #button1 (click)="buttonClick(button1)">
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Transparent</ion-title>
-  <button menuToggle right>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-</ion-toolbar>
-
-
-<style>
-  .toolbar {
-    border-bottom: 1px solid black;
-  }
-</style>
+<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>
+    </button>
+    <ion-buttons start>
+      <button showWhen="ios">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary>
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Default</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar primary>
+    <ion-buttons start>
+      <button showWhen="ios">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary>
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Primary</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar primary>
+    <ion-buttons start>
+      <button cla showWhen="ios"ss="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button class="activated">
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary class="activated">
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Primary.activated</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar secondary>
+    <ion-buttons start>
+      <button solid>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button solid>
+        <ion-icon name="contact"></ion-icon>
+        Solid
+      </button>
+    </ion-buttons>
+    <ion-title>Secondary</ion-title>
+    <ion-buttons end>
+      <button solid danger>
+        Help
+        <ion-icon name="help-circle"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar secondary>
+    <ion-buttons start>
+      <button solid class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button solid class="activated">
+        <ion-icon name="contact"></ion-icon>
+        Solid
+      </button>
+    </ion-buttons>
+    <ion-title>Secondary Activated</ion-title>
+    <ion-buttons end>
+      <button solid danger class="activated">
+        Help
+        <ion-icon name="help-circle"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar dark>
+    <ion-buttons start>
+      <button outline>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button outline>
+        <ion-icon name="star"></ion-icon>
+        Star
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary outline>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Dark</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar dark>
+    <ion-buttons start>
+      <button outline class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button outline class="activated">
+        <ion-icon name="star"></ion-icon>
+        Star
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary outline class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Dark.activated</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar danger>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="contact"></ion-icon>
+        Clear
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button>
+        Edit
+        <ion-icon name="create"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Danger</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar danger>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Danger</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar light>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="contact"></ion-icon>
+        Clear
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button>
+        Edit
+        <ion-icon name="create"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Light</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar light>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Light</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar transparent>
+    <ion-buttons end>
+      <button #button1 (click)="buttonClick(button1)">
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Transparent</ion-title>
+    <button menuToggle right>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+  </ion-toolbar>
+</ion-content>
diff --git a/src/components/toolbar/test/scenarios/main.html b/src/components/toolbar/test/scenarios/main.html
index 7fe453ae2c9..c1a75dea0c5 100644
--- a/src/components/toolbar/test/scenarios/main.html
+++ b/src/components/toolbar/test/scenarios/main.html
@@ -1,226 +1,214 @@
-<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>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button>
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary>
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button>
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary>
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Defaults</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button class="activated">
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary class="activated">
-      <ion-icon name="more"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Defaults.activated</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button solid>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button solid>
-      <ion-icon name="contact"></ion-icon>
-      Solid
-    </button>
-  </ion-buttons>
-  <ion-title>Solid</ion-title>
-  <ion-buttons end>
-    <button solid secondary>
-      Help
-      <ion-icon name="help-circle"></ion-icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <a button solid class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </a>
-    <button solid class="activated">
-      <ion-icon name="contact"></ion-icon>
-      Solid
-    </button>
-  </ion-buttons>
-  <ion-title>Solid Activated</ion-title>
-  <ion-buttons end>
-    <button solid secondary class="activated">
-      Help
-      <ion-icon name="help-circle"></ion-icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button outline>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button outline>
-      <ion-icon name="star"></ion-icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline>
-      <ion-icon name="contact"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Outline</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button outline class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-    <button outline class="activated">
-      <ion-icon name="star"></ion-icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline class="activated">
-      <ion-icon name="contact"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Outline.activated</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="contact"></ion-icon>
-      Clear
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <a button href="#">Edit
-      <ion-icon name="create"></ion-icon>
-    </a>
-  </ion-buttons>
-  <ion-title>Icon/Color Attr</ion-title>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button>
-      Go Back
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <a button href="#">
-      Edit
-    </a>
-  </ion-buttons>
-  <ion-title>Text Only</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <button menuToggle>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-buttons start>
-    <button>
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Left side menu toggle</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons end>
-    <button #button1 (click)="buttonClick(button1)">
-      <ion-icon name="star"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Right side menu toggle</ion-title>
-  <button menuToggle right>
-    <ion-icon name="menu"></ion-icon>
-  </button>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-buttons end>
-    <button #button2 (click)="buttonClick(button2)">
-      <ion-icon name="search"></ion-icon>
-    </button>
-  </ion-buttons>
-  <ion-segment secondary>
-    <ion-segment-button value="something">
-      Something
-    </ion-segment-button>
-    <ion-segment-button value="else">
-      Else
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-<ion-toolbar>
-  <ion-segment>
-    <ion-segment-button value="light">
-      Light
-    </ion-segment-button>
-    <ion-segment-button value="toolbar">
-      Toolbar
-    </ion-segment-button>
-    <ion-segment-button value="default">
-      Default Segment
-    </ion-segment-button>
-  </ion-segment>
-</ion-toolbar>
-
-
-<style>
-  .toolbar {
-    border-bottom: 1px solid black;
-  }
-</style>
+<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>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary>
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button>
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary>
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Defaults</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button class="activated">
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary class="activated">
+        <ion-icon name="more"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Defaults.activated</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button solid>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button solid>
+        <ion-icon name="contact"></ion-icon>
+        Solid
+      </button>
+    </ion-buttons>
+    <ion-title>Solid</ion-title>
+    <ion-buttons end>
+      <button solid secondary>
+        Help
+        <ion-icon name="help-circle"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <a button solid class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </a>
+      <button solid class="activated">
+        <ion-icon name="contact"></ion-icon>
+        Solid
+      </button>
+    </ion-buttons>
+    <ion-title>Solid Activated</ion-title>
+    <ion-buttons end>
+      <button solid secondary class="activated">
+        Help
+        <ion-icon name="help-circle"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button outline>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button outline>
+        <ion-icon name="star"></ion-icon>
+        Star
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary outline>
+        <ion-icon name="contact"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Outline</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button outline class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+      <button outline class="activated">
+        <ion-icon name="star"></ion-icon>
+        Star
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <button secondary outline class="activated">
+        <ion-icon name="contact"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Outline.activated</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="contact"></ion-icon>
+        Clear
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <a button href="#">Edit
+        <ion-icon name="create"></ion-icon>
+      </a>
+    </ion-buttons>
+    <ion-title>Icon/Color Attr</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <button>
+        Go Back
+      </button>
+    </ion-buttons>
+    <ion-buttons end>
+      <a button href="#">
+        Edit
+      </a>
+    </ion-buttons>
+    <ion-title>Text Only</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-buttons start>
+      <button>
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Left side menu toggle</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons end>
+      <button #button1 (click)="buttonClick(button1)">
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>Right side menu toggle</ion-title>
+    <button menuToggle right>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons end>
+      <button #button2 (click)="buttonClick(button2)">
+        <ion-icon name="search"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-segment secondary>
+      <ion-segment-button value="something">
+        Something
+      </ion-segment-button>
+      <ion-segment-button value="else">
+        Else
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment>
+      <ion-segment-button value="light">
+        Light
+      </ion-segment-button>
+      <ion-segment-button value="toolbar">
+        Toolbar
+      </ion-segment-button>
+      <ion-segment-button value="default">
+        Default Segment
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-content>
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index 01e9c6fff7a..70b0d219b1a 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -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
 // --------------------------------------------------
 
diff --git a/src/components/virtual-scroll/test/basic/main.html b/src/components/virtual-scroll/test/basic/main.html
index eb8470a7f83..ff29033aae0 100644
--- a/src/components/virtual-scroll/test/basic/main.html
+++ b/src/components/virtual-scroll/test/basic/main.html
@@ -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>
 
 
diff --git a/src/components/virtual-scroll/test/cards/main.html b/src/components/virtual-scroll/test/cards/main.html
index 9ed993421bc..074cd52c9b5 100644
--- a/src/components/virtual-scroll/test/cards/main.html
+++ b/src/components/virtual-scroll/test/cards/main.html
@@ -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>
 
diff --git a/src/components/virtual-scroll/test/image-gallery/main.html b/src/components/virtual-scroll/test/image-gallery/main.html
index 7bad8f3b525..47d88110d4f 100644
--- a/src/components/virtual-scroll/test/image-gallery/main.html
+++ b/src/components/virtual-scroll/test/image-gallery/main.html
@@ -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>
diff --git a/src/components/virtual-scroll/test/sliding-item/main.html b/src/components/virtual-scroll/test/sliding-item/main.html
index c87bb2ce8c8..297576de1fe 100644
--- a/src/components/virtual-scroll/test/sliding-item/main.html
+++ b/src/components/virtual-scroll/test/sliding-item/main.html
@@ -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>
 
 
diff --git a/src/components/virtual-scroll/test/variable-size/main.html b/src/components/virtual-scroll/test/variable-size/main.html
index 267eeb590dc..9f274005fca 100644
--- a/src/components/virtual-scroll/test/variable-size/main.html
+++ b/src/components/virtual-scroll/test/variable-size/main.html
@@ -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>