codes

src/components/tool-bar/tool-bar.scss

@@ -15,32 +15,56 @@
   @include flex-order(80);
 }
 
-.bar > .title {
+.bar-items {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  @include flex-display();
-  display:none;
-}
-
-.bar > .title > .inner-title {
-  /*text-align: center;
-  @include flex-align-self(center);*/
-}
-
-.bar-accessories {
   @include flex(1);
   @include flex-display();
   @include flex-justify-content(space-between);
 }
 
-.bar > .accessory-primary {
+.bar-items > .title {
-  /*@include flex-align-self(flex-start);*/
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: maroon;
+  margin: 0 140px;
+
+  @include flex(1);
+  @include flex-display();
+  @include flex-align-items(center);
 }
 
-.bar > .accessory-secondary {
+.bar-items > .title > .inner-title {
-  /*@include flex-align-self(flex-end);*/
+  overflow: hidden;
-  /*display:none;*/
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background: blue;
 }
+
+.back-button {
+  @include flex-display();
+  background: purple;
+
+  .back-button-icon {
+    background: blue;
+  }
+}
+
+.bar-items > .spacer {
+  @include flex(1);
+}
+
+.bar-android {
+
+  .spacer {
+    @include flex(none);
+  }
+
+  .title {
+    position: static;
+    margin: 0;
+  }
+
+}
+

src/components/view/view.js

@@ -9,17 +9,30 @@ import {Ion} from '../ion';
 })
 @Template({
   inline: `
-    <div class="container">
+      <div class="bar bar-android2">
-      <div class="bar">
+        <div class="bar-items">
-        <div class="bar-accessories">
+          <div class="back-button">
-          <div class="bar-accessory accessory-primary" style="background:red">
+            <div class="back-button-icon">&lt;</div>
+            <div class="back-button-text">
+              <div class="back-default">Back</div>
+              <div class="back-title"></div>
+            </div>
+          </div>
+          <div class="title">
+            <div class="inner-title">
+              Create hybrid mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
+            </div>
+          </div>
+          <div class="bar-primary-item" style="background:red">
             PRIMARY
           </div>
-          <div class="bar-accessory accessory-secondary" style="background:green">
+          <div class="spacer"></div>
+          <div class="bar-secondary-item" style="background:green">
             SECONDARY
           </div>
         </div>
       </div>
+    <div class="container">
       <content></content>
     </div>`
 })