From ea9698b47b4e8b6dfa60f000deab5f1aae7462d9 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 25 Sep 2013 13:43:36 -0500
Subject: [PATCH] Header and button styles

---
 dist/ionic.css          | 103 +++++++++++++++++++++++++++++++++++-----
 scss/_mixins.scss       |  33 +++++--------
 scss/_variables.scss    |  34 ++++++-------
 scss/ionic/_bar.scss    |   8 ++++
 scss/ionic/_button.scss |  17 +++++++
 test/bars-clear.html    |  65 +++++++++++++++++++++++++
 test/buttons.html       |  13 ++++-
 test/headers.html       |  14 ++++++
 8 files changed, 235 insertions(+), 52 deletions(-)
 create mode 100644 test/bars-clear.html

diff --git a/dist/ionic.css b/dist/ionic.css
index 463853f8b1..b2fdd046db 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1138,27 +1138,27 @@ address {
     color: #333333; }
   .bar.bar-secondary {
     background-color: whitesmoke;
-    border-color: #cccccc;
+    border-color: #bbbbbb;
     color: #333333; }
   .bar.bar-primary {
-    background-color: #6999e9;
-    border-color: #5981c5;
+    background-color: #4a87ee;
+    border-color: #3b6dc2;
     color: white; }
   .bar.bar-info {
-    background-color: #60d2e6;
-    border-color: #51b3c4;
+    background-color: #43cee6;
+    border-color: #3bb3c8;
     color: white; }
   .bar.bar-success {
-    background-color: #89c163;
-    border-color: #71a052;
+    background-color: #66cc33;
+    border-color: #5bb22f;
     color: white; }
   .bar.bar-warning {
     background-color: #f0b840;
-    border-color: #cf9a29;
+    border-color: #d29f31;
     color: white; }
   .bar.bar-danger {
-    background-color: #de5645;
-    border-color: #bc4435;
+    background-color: #ef4e3a;
+    border-color: #c73927;
     color: white; }
   .bar.bar-dark {
     background-color: #444444;
@@ -1176,7 +1176,7 @@ address {
     text-overflow: ellipsis;
     text-align: center;
     white-space: nowrap;
-    font-size: 18px; }
+    font-size: 17px; }
   .bar .title a {
     color: inherit; }
   .bar .button {
@@ -1211,6 +1211,11 @@ address {
     background-color: #fafafa;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #bbbbbb; }
+  .bar-default .button.button-clear {
+    color: #333333;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-secondary .button {
   color: #333333;
@@ -1223,6 +1228,11 @@ address {
     background-color: #e5e5e5;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #999999; }
+  .bar-secondary .button.button-clear {
+    color: #333333;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-primary .button {
   color: white;
@@ -1235,6 +1245,11 @@ address {
     background-color: #4175ce;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #32599c; }
+  .bar-primary .button.button-clear {
+    color: white;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-info .button {
   color: white;
@@ -1247,6 +1262,11 @@ address {
     background-color: #3db8cd;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #3293a4; }
+  .bar-info .button.button-clear {
+    color: white;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-success .button {
   color: white;
@@ -1259,6 +1279,11 @@ address {
     background-color: #55aa2b;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #448922; }
+  .bar-success .button.button-clear {
+    color: white;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-warning .button {
   color: white;
@@ -1271,6 +1296,11 @@ address {
     background-color: #e2a114;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #b88517; }
+  .bar-warning .button.button-clear {
+    color: white;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-danger .button {
   color: white;
@@ -1283,6 +1313,11 @@ address {
     background-color: #ce4331;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: #9f3527; }
+  .bar-danger .button.button-clear {
+    color: white;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar-dark .button {
   color: white;
@@ -1295,6 +1330,11 @@ address {
     background-color: #222222;
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: black; }
+  .bar-dark .button.button-clear {
+    color: white;
+    background: none;
+    box-shadow: none;
+    font-size: 17px; }
 
 .bar .button-icon {
   background-color: transparent;
@@ -1850,7 +1890,12 @@ input[type="checkbox"][readonly] {
     padding: 10px 0px; }
   .button.button-clear {
     border: none;
-    background: none; }
+    background: none;
+    box-shadow: none;
+    -webkit-transition: opacity 0.1s;
+    transition: opacity 0.1s; }
+    .button.button-clear:active, .button.button-clear.active {
+      opacity: 0.4; }
   .button.button-block {
     display: block;
     margin: 10px 0 10px 0; }
@@ -1865,6 +1910,10 @@ input[type="checkbox"][readonly] {
       background-color: #fafafa;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #bbbbbb; }
+    .button.button-default.button-clear {
+      color: #333333;
+      background: none;
+      box-shadow: none; }
   .button.button-secondary {
     color: #333333;
     background-color: whitesmoke;
@@ -1876,6 +1925,10 @@ input[type="checkbox"][readonly] {
       background-color: #e5e5e5;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #999999; }
+    .button.button-secondary.button-clear {
+      color: #333333;
+      background: none;
+      box-shadow: none; }
   .button.button-primary {
     color: white;
     background-color: #4a87ee;
@@ -1887,6 +1940,10 @@ input[type="checkbox"][readonly] {
       background-color: #4175ce;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #32599c; }
+    .button.button-primary.button-clear {
+      color: #4a87ee;
+      background: none;
+      box-shadow: none; }
   .button.button-info {
     color: white;
     background-color: #43cee6;
@@ -1898,6 +1955,10 @@ input[type="checkbox"][readonly] {
       background-color: #3db8cd;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #3293a4; }
+    .button.button-info.button-clear {
+      color: #43cee6;
+      background: none;
+      box-shadow: none; }
   .button.button-success {
     color: white;
     background-color: #66cc33;
@@ -1909,6 +1970,10 @@ input[type="checkbox"][readonly] {
       background-color: #55aa2b;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #448922; }
+    .button.button-success.button-clear {
+      color: #66cc33;
+      background: none;
+      box-shadow: none; }
   .button.button-warning {
     color: white;
     background-color: #f0b840;
@@ -1920,6 +1985,10 @@ input[type="checkbox"][readonly] {
       background-color: #e2a114;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #b88517; }
+    .button.button-warning.button-clear {
+      color: #f0b840;
+      background: none;
+      box-shadow: none; }
   .button.button-danger {
     color: white;
     background-color: #ef4e3a;
@@ -1931,6 +2000,10 @@ input[type="checkbox"][readonly] {
       background-color: #ce4331;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: #9f3527; }
+    .button.button-danger.button-clear {
+      color: #ef4e3a;
+      background: none;
+      box-shadow: none; }
   .button.button-dark {
     color: white;
     background-color: #444444;
@@ -1942,6 +2015,10 @@ input[type="checkbox"][readonly] {
       background-color: #222222;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: black; }
+    .button.button-dark.button-clear {
+      color: #444444;
+      background: none;
+      box-shadow: none; }
   .button.button-icon {
     border: none;
     background: none; }
@@ -2061,7 +2138,7 @@ a.button {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: bold;
   color: white;
   line-height: 1;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 393b4606bc..55125b39c8 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -24,6 +24,18 @@
 	}
 }
 
+@mixin button-clear($color, $fontSize:"") {
+  &.button-clear {
+    color: $color;
+    background: none;
+    box-shadow: none;
+
+    @if $fontSize != "" {
+      font-size: $fontSize;
+    }
+  }
+}
+
 @mixin list-style($bgColor, $borderColor, $color) {
   color: $color;
 	background-color: $bgColor;
@@ -227,57 +239,37 @@
 // Transitions
 @mixin transition($transition...) {
   -webkit-transition: $transition;
-     -moz-transition: $transition;
-       -o-transition: $transition;
           transition: $transition;
 }
 @mixin transition-delay($transition-delay) {
   -webkit-transition-delay: $transition-delay;
-     -moz-transition-delay: $transition-delay;
-       -o-transition-delay: $transition-delay;
           transition-delay: $transition-delay;
 }
 @mixin transition-duration($transition-duration) {
   -webkit-transition-duration: $transition-duration;
-     -moz-transition-duration: $transition-duration;
-       -o-transition-duration: $transition-duration;
           transition-duration: $transition-duration;
 }
 
 // Transformations
 @mixin rotate($degrees) {
   -webkit-transform: rotate($degrees);
-     -moz-transform: rotate($degrees);
-      -ms-transform: rotate($degrees);
-       -o-transform: rotate($degrees);
           transform: rotate($degrees);
 }
 @mixin scale($ratio) {
   -webkit-transform: scale($ratio);
-     -moz-transform: scale($ratio);
-      -ms-transform: scale($ratio);
-       -o-transform: scale($ratio);
           transform: scale($ratio);
 }
 @mixin translate($x, $y) {
   -webkit-transform: translate($x, $y);
-     -moz-transform: translate($x, $y);
-      -ms-transform: translate($x, $y);
-       -o-transform: translate($x, $y);
           transform: translate($x, $y);
 }
 @mixin skew($x, $y) {
   -webkit-transform: skew($x, $y);
-     -moz-transform: skew($x, $y);
-      -ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
-       -o-transform: skew($x, $y);
           transform: skew($x, $y);
   -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
 }
 @mixin translate3d($x, $y, $z) {
   -webkit-transform: translate3d($x, $y, $z);
-     -moz-transform: translate3d($x, $y, $z);
-       -o-transform: translate3d($x, $y, $z);
           transform: translate3d($x, $y, $z);
 }
 
@@ -287,7 +279,6 @@
 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
 @mixin backface-visibility($visibility){
   -webkit-backface-visibility: $visibility;
-     -moz-backface-visibility: $visibility;
           backface-visibility: $visibility;
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index deebd995f7..673dc41e36 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -76,8 +76,8 @@ $font-family-monospace:     Monaco, Menlo, Consolas, "Courier New", monospace !d
 $font-family-base:          $font-family-sans-serif !default;
 
 $font-size-base:            14px !default;
-$font-size-large:           ceil($font-size-base * 1.25) !default; // ~18px
-$font-size-small:           ceil($font-size-base * 0.85) !default; // ~12px
+$font-size-large:           17px !default; // ~18px
+$font-size-small:           11px !default;
 
 $line-height-base:          1.428571429 !default; // 20/14
 $line-height-computed:      floor($font-size-base * $line-height-base) !default; // ~20px
@@ -258,29 +258,29 @@ $bar-padding-landscape:          5px;
 $bar-bg:                      #fff;
 
 // Bar variations
-$bar-default-bg:              #fff;
+$bar-default-bg:              $brand-default;
 $bar-default-border-color:    #ddd;
 
-$bar-secondary-bg:            #f5f5f5;
-$bar-secondary-border-color:  #ccc;
+$bar-secondary-bg:            $brand-secondary;
+$bar-secondary-border-color:  $button-secondary-border;
 
-$bar-primary-bg:              #6999e9;
-$bar-primary-border-color:    #5981c5;
+$bar-primary-bg:              $brand-primary;
+$bar-primary-border-color:    $button-primary-border;
 
-$bar-info-bg:                 #60d2e6;
-$bar-info-border-color:       #51b3c4;
+$bar-info-bg:                 $brand-info;
+$bar-info-border-color:       $button-info-border;
 
-$bar-success-bg:              #89c163;
-$bar-success-border-color:    #71a052;
+$bar-success-bg:              $brand-success;
+$bar-success-border-color:    $button-success-border;
 
-$bar-warning-bg:              #f0b840;
-$bar-warning-border-color:    #cf9a29;
+$bar-warning-bg:              $brand-warning;
+$bar-warning-border-color:    $button-warning-border;
 
-$bar-danger-bg:               #de5645;
-$bar-danger-border-color:     #bc4435;
+$bar-danger-bg:               $brand-danger;
+$bar-danger-border-color:     $button-danger-border;
 
-$bar-dark-bg:                 #444;
-$bar-dark-border-color:       #111;
+$bar-dark-bg:                 $brand-dark;
+$bar-dark-border-color:       $button-dark-border;
 
 
 // Tabs
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 41695120d0..c3eb2b938a 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -119,44 +119,52 @@
 .bar-default {
   .button {
     @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
+    @include button-clear($gray-dark, $bar-title-font-size);
   }
 }
 
 .bar-secondary {
   .button {
     @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
+    @include button-clear($gray-dark, $bar-title-font-size);
   }
 }
 
 .bar-primary {
   .button {
     @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
+    @include button-clear($white, $bar-title-font-size);
   }
 }
 .bar-info {
   .button {
     @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
+    @include button-clear($white, $bar-title-font-size);
   }
 }
 .bar-success {
   .button {
     @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
+    @include button-clear($white, $bar-title-font-size);
   }
 }
 .bar-warning {
   .button {
     @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
+    @include button-clear($white, $bar-title-font-size);
   }
 }
 .bar-danger {
   .button {
     @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
+    @include button-clear($white, $bar-title-font-size);
   }
 }
 .bar-dark {
   // A default style for buttons
   .button {
     @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
+    @include button-clear($white, $bar-title-font-size);
   }
 }
 
diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss
index a709fdd4c2..07abffe9a3 100644
--- a/scss/ionic/_button.scss
+++ b/scss/ionic/_button.scss
@@ -21,6 +21,14 @@
   &.button-clear {
     border: none;
     background: none;
+    box-shadow: none;
+
+    // A nice iOS 7 style fade click
+    @include transition(opacity .1s);
+
+    &:active, &.active {
+      opacity: 0.4;
+    }
   }
 
   &.button-block {
@@ -30,27 +38,36 @@
 
   &.button-default {
     @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
+
+    @include button-clear($gray-dark);
   }
   &.button-secondary {
     @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
+    @include button-clear($gray-dark);
   }
   &.button-primary {
     @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
+    @include button-clear($button-primary-bg);
   }
   &.button-info {
     @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
+    @include button-clear($button-info-bg);
   }
   &.button-success {
     @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
+    @include button-clear($button-success-bg);
   }
   &.button-warning {
     @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
+    @include button-clear($button-warning-bg);
   }
   &.button-danger {
     @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
+    @include button-clear($button-danger-bg);
   }
   &.button-dark {
     @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
+    @include button-clear($button-dark-bg);
   }
 
   &.button-icon {
diff --git a/test/bars-clear.html b/test/bars-clear.html
new file mode 100644
index 0000000000..b3e7edb18e
--- /dev/null
+++ b/test/bars-clear.html
@@ -0,0 +1,65 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Header</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="../dist/ionicons.css" rel="stylesheet">
+    <link href="../dist/ionic.css" rel="stylesheet">
+    <style>
+      .bar {
+        position: relative;
+        top: 0;
+      }
+    </style>
+
+  </head>
+  <body>
+
+    <section>
+      <div class="bar bar-header bar-default">
+        <div class="button-bar">
+          <a href="#" class="button button-primary button-clear">Edit</a>
+          <a href="#" class="button button-clear">Teach</a>
+          <a href="#" class="button button-danger button-clear">Delete</a>
+        </div>
+      </div>
+
+      <main class="content padded has-header">
+        <p>Content element must have "has-header" as a classname.</p>
+        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+      </main>
+
+    </section>
+
+    <script>
+      var sec = document.getElementsByTagName('section')[0];
+      var types = ['default', 'secondary', 'primary', 'info', 'success', 'warning', 'danger', 'dark'];
+      for(var i = 0; i < types.length; i++) {
+        var t = types[i];
+        sec.innerHTML += '<div class="bar bar-header bar-' + t + '">' +
+          '<div class="button-bar">' +
+            '<a href="#" class="button button-clear">Edit</a>' +
+            '<a href="#" class="button button-clear">Teach</a>' +
+            '<a href="#" class="button button-clear">Delete</a>' +
+          '</div>' +
+        '</div>';
+      }
+      var buttons = document.querySelectorAll('.button');
+      var a;
+      for(var i = 0; i < buttons.length; i++) {
+        a = buttons[i];
+        a.addEventListener('touchstart', function() {
+          this.classList.add('active');
+        });
+        a.addEventListener('touchend', function() {
+          this.classList.remove('active');
+        });
+        a.addEventListener('touchcancel', function() {
+          this.classList.remove('active');
+        });
+      }
+    </script>
+  </body>
+</html>
diff --git a/test/buttons.html b/test/buttons.html
index 940a9c4725..89d86e6b9a 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -26,8 +26,19 @@
           <a class="button button-warning">Warning</a>
           <a class="button button-danger">Danger</a>
           <a class="button button-dark">Dark</a>
+        </p>
+        <p>
           <a class="button button-icon"><i class="icon-home"></i></a>
-          <a class="button button-clear">Borderless</a>
+        </p>
+        <p>
+          <a class="button button-default button-clear">Default</a>
+          <a class="button button-secondary button-clear">Secondary</a>
+          <a class="button button-primary button-clear">Primary</a>
+          <a class="button button-info button-clear">Info</a>
+          <a class="button button-success button-clear">Success</a>
+          <a class="button button-warning button-clear">Warning</a>
+          <a class="button button-danger button-clear">Danger</a>
+          <a class="button button-dark button-clear">Dark</a>
         </p>
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
diff --git a/test/headers.html b/test/headers.html
index b8c0f0ecb1..d9db29a133 100644
--- a/test/headers.html
+++ b/test/headers.html
@@ -40,6 +40,20 @@
         </div>
         <a class="button">This</a>
       </header>
+      <div class="bar bar-header bar-default">
+        <div class="button-bar">
+          <a href="#" class="button button-clear">Edit</a>
+          <a href="#" class="button button-clear">Teach</a>
+          <a href="#" class="button button-clear">Delete</a>
+        </div>
+      </div>
+      <div class="bar bar-header bar-secondary">
+        <div class="button-bar">
+          <a href="#" class="button button-clear">Edit</a>
+          <a href="#" class="button button-clear">Teach</a>
+          <a href="#" class="button button-clear">Delete</a>
+        </div>
+      </div>
 
       <main class="content padded has-header">
         <p>Content element must have "has-header" as a classname.</p>