Messing with bars

dist/ionic.css

@@ -6,7 +6,11 @@
 
 html {
   -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%; }
+  -ms-text-size-adjust: 100%;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  user-select: none; }
 
 body {
   position: fixed;
@@ -81,6 +85,10 @@ ul {
   margin-top: 5px; }
 
 .bar {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  user-select: none;
   position: fixed;
   right: 0;
   left: 0;
@@ -138,6 +146,12 @@ ul {
 .bar-tabs {
   padding: 0; }
 
+.bar-header-secondary {
+  top: 44px; }
+
+.bar-footer-secondary {
+  bottom: 44px; }
+
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
 .has-header {

example/headers.html

@@ -23,6 +23,14 @@
           <a class="button button-success">Forward</a>
         </div>
       </header>
+      <div class="bar bar-header-secondary bar-dark">
+        <div class="button-group">
+          <a class="button button-primary">Success</a>
+          <a class="button button-primary">Warning</a>
+          <a class="button button-primary">Danger</a>
+          <a class="button button-primary">Dark</a>
+        </div>
+      </div>
 
       <main class="content content-padded has-header">
         <p>Content element must have "has-header" as a classname.</p>

example/toderp/index.html

@@ -45,7 +45,8 @@
       <ul id="tasks" class="list">
         <li class="list-divider">Tasks</li>
         <li class="list-item" ng-repeat="task in tasks">
-          <a href="#">{{task.text}}</a>
+          {{task.text}}
+          <a href="#" class="pull-right"><i class="icon-plus"></i></a>
         </li>
       </ul>
     </div>

scss/ionic/_mixins.scss

@@ -377,6 +377,13 @@
           user-select: $select;
 }
 
+@mixin disable-user-select() {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  user-select: none;
+}
+
 // Resize anything
 @mixin resizable($direction) {
   resize: $direction; // Options: horizontal, vertical, both

scss/ionic/structure/_bar.scss

@@ -1,6 +1,8 @@
 
 // Use Flexbox for our header and footer bars
 .bar {
+  @include disable-user-select();
+
   position: fixed;
   right: 0;
   left: 0;
@@ -89,6 +91,13 @@
   padding: 0;
 }
 
+.bar-header-secondary {
+  top: $barHeight;
+}
+.bar-footer-secondary {
+  bottom: $barHeight;
+}
+
 /* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
    Note: For these to work, content must come after both bars in the markup */
 .has-header {

scss/ionic/structure/_base.scss

@@ -10,6 +10,8 @@
 html {
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
+
+  @include disable-user-select();
 }
 
 body {