From 02db453c708ca308ca47d3935d0e087f50cd6b8a Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 25 Sep 2013 11:33:29 -0500
Subject: [PATCH] Updated button styles to Ben's taste

---
 dist/ionic.css          | 144 ++++++++++++++++++++--------------------
 scss/_mixins.scss       |   8 +--
 scss/_variables.scss    |  64 ++++++++++--------
 scss/ionic/_bar.scss    |  16 ++---
 scss/ionic/_button.scss |  18 ++---
 test/buttons.html       |  18 +++++
 6 files changed, 147 insertions(+), 121 deletions(-)

diff --git a/dist/ionic.css b/dist/ionic.css
index bc76c8bed2..463853f8b1 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1208,81 +1208,81 @@ address {
     color: #333333;
     text-decoration: none; }
   .bar-default .button.active, .bar-default .button:active {
-    background-color: #ebebeb;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #c4c4c4; }
+    background-color: #fafafa;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #bbbbbb; }
 
 .bar-secondary .button {
   color: #333333;
   background-color: whitesmoke;
-  border-color: #cccccc; }
+  border-color: #bbbbbb; }
   .bar-secondary .button:hover {
     color: #333333;
     text-decoration: none; }
   .bar-secondary .button.active, .bar-secondary .button:active {
-    background-color: #e1e1e1;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #b3b3b3; }
+    background-color: #e5e5e5;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #999999; }
 
 .bar-primary .button {
   color: white;
-  background-color: #6999e9;
-  border-color: #5981c5; }
+  background-color: #4a87ee;
+  border-color: #3b6dc2; }
   .bar-primary .button:hover {
     color: white;
     text-decoration: none; }
   .bar-primary .button.active, .bar-primary .button:active {
-    background-color: #4581e4;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #3d67ae; }
+    background-color: #4175ce;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #32599c; }
 
 .bar-info .button {
   color: white;
-  background-color: #60d2e6;
-  border-color: #51b3c4; }
+  background-color: #43cee6;
+  border-color: #3bb3c8; }
   .bar-info .button:hover {
     color: white;
     text-decoration: none; }
   .bar-info .button.active, .bar-info .button:active {
-    background-color: #3dc8e0;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #3998a9; }
+    background-color: #3db8cd;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #3293a4; }
 
 .bar-success .button {
   color: white;
-  background-color: #89c163;
-  border-color: #71a052; }
+  background-color: #66cc33;
+  border-color: #5bb22f; }
   .bar-success .button:hover {
     color: white;
     text-decoration: none; }
   .bar-success .button.active, .bar-success .button:active {
-    background-color: #73b447;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #597e41; }
+    background-color: #55aa2b;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #448922; }
 
 .bar-warning .button {
   color: white;
   background-color: #f0b840;
-  border-color: #cf9a29; }
+  border-color: #d29f31; }
   .bar-warning .button:hover {
     color: white;
     text-decoration: none; }
   .bar-warning .button.active, .bar-warning .button:active {
-    background-color: #edaa1a;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #a47a21; }
+    background-color: #e2a114;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #b88517; }
 
 .bar-danger .button {
   color: white;
-  background-color: #de5645;
-  border-color: #bc4435; }
+  background-color: #ef4e3a;
+  border-color: #c73927; }
   .bar-danger .button:hover {
     color: white;
     text-decoration: none; }
   .bar-danger .button.active, .bar-danger .button:active {
-    background-color: #d43926;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-    border-color: #94362a; }
+    background-color: #ce4331;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    border-color: #9f3527; }
 
 .bar-dark .button {
   color: white;
@@ -1292,8 +1292,8 @@ address {
     color: white;
     text-decoration: none; }
   .bar-dark .button.active, .bar-dark .button:active {
-    background-color: #303030;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+    background-color: #222222;
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
     border-color: black; }
 
 .bar .button-icon {
@@ -1342,7 +1342,7 @@ address {
     color: #333333; }
   .tabs.tabs-secondary {
     background-color: whitesmoke;
-    border-color: #cccccc;
+    border-color: #bbbbbb;
     color: #333333; }
   .tabs.tabs-primary {
     background-color: #6999e9;
@@ -1465,15 +1465,15 @@ address {
     border-color: #c4c4c4; }
   .list.list-success {
     color: white;
-    background-color: #89c163;
-    border-color: #89c163; }
+    background-color: #66cc33;
+    border-color: #66cc33; }
     .list.list-success:hover {
       color: white;
       text-decoration: none; }
     .list.list-success.active, .list.list-success:active {
-      background-color: #73b447;
+      background-color: #56ab2b;
       box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #6fac45; }
+      border-color: #52a329; }
 
 .list-item {
   position: relative;
@@ -1862,75 +1862,75 @@ input[type="checkbox"][readonly] {
       color: #333333;
       text-decoration: none; }
     .button.button-default.active, .button.button-default:active {
-      background-color: #ebebeb;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #c4c4c4; }
+      background-color: #fafafa;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #bbbbbb; }
   .button.button-secondary {
     color: #333333;
     background-color: whitesmoke;
-    border-color: #cccccc; }
+    border-color: #bbbbbb; }
     .button.button-secondary:hover {
       color: #333333;
       text-decoration: none; }
     .button.button-secondary.active, .button.button-secondary:active {
-      background-color: #e1e1e1;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #b3b3b3; }
+      background-color: #e5e5e5;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #999999; }
   .button.button-primary {
     color: white;
-    background-color: #6999e9;
-    border-color: #5981c5; }
+    background-color: #4a87ee;
+    border-color: #3b6dc2; }
     .button.button-primary:hover {
       color: white;
       text-decoration: none; }
     .button.button-primary.active, .button.button-primary:active {
-      background-color: #4581e4;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #3d67ae; }
+      background-color: #4175ce;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #32599c; }
   .button.button-info {
     color: white;
-    background-color: #60d2e6;
-    border-color: #51b3c4; }
+    background-color: #43cee6;
+    border-color: #3bb3c8; }
     .button.button-info:hover {
       color: white;
       text-decoration: none; }
     .button.button-info.active, .button.button-info:active {
-      background-color: #3dc8e0;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #3998a9; }
+      background-color: #3db8cd;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #3293a4; }
   .button.button-success {
     color: white;
-    background-color: #89c163;
-    border-color: #71a052; }
+    background-color: #66cc33;
+    border-color: #5bb22f; }
     .button.button-success:hover {
       color: white;
       text-decoration: none; }
     .button.button-success.active, .button.button-success:active {
-      background-color: #73b447;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #597e41; }
+      background-color: #55aa2b;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #448922; }
   .button.button-warning {
     color: white;
     background-color: #f0b840;
-    border-color: #cf9a29; }
+    border-color: #d29f31; }
     .button.button-warning:hover {
       color: white;
       text-decoration: none; }
     .button.button-warning.active, .button.button-warning:active {
-      background-color: #edaa1a;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #a47a21; }
+      background-color: #e2a114;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #b88517; }
   .button.button-danger {
     color: white;
-    background-color: #de5645;
-    border-color: #bc4435; }
+    background-color: #ef4e3a;
+    border-color: #c73927; }
     .button.button-danger:hover {
       color: white;
       text-decoration: none; }
     .button.button-danger.active, .button.button-danger:active {
-      background-color: #d43926;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
-      border-color: #94362a; }
+      background-color: #ce4331;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+      border-color: #9f3527; }
   .button.button-dark {
     color: white;
     background-color: #444444;
@@ -1939,8 +1939,8 @@ input[type="checkbox"][readonly] {
       color: white;
       text-decoration: none; }
     .button.button-dark.active, .button.button-dark:active {
-      background-color: #303030;
-      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
+      background-color: #222222;
+      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
       border-color: black; }
   .button.button-icon {
     border: none;
@@ -1956,7 +1956,7 @@ a.button {
 .button-transparent {
   background: transparent; }
 
-.button-borderless [class^="icon-"] {
+.button-clear [class^="icon-"] {
   font-size: 24px; }
 
 .button-group {
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 9c381569b8..393b4606bc 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -2,7 +2,7 @@
 //
 // Useful utilities and mixins for SCSS files.
 
-@mixin button-style($bgColor, $borderColor, $color) {
+@mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) {
   color: $color;
 	background-color: $bgColor;
 	border-color: $borderColor;
@@ -18,9 +18,9 @@
 		//background-color: lighten($bgColor, 10%);
   }
 	&.active, &:active {
-		background-color: darken($bgColor, 8%);
-    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
-    border-color: darken($borderColor, 10%);
+		background-color: $activeBgColor;
+    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
+    border-color: $activeBorderColor;
 	}
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6768310d50..deebd995f7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -4,11 +4,11 @@
 
 $brand-default:         #fff;
 $brand-secondary:       #f5f5f5;
-$brand-primary:         #6999e9;
-$brand-success:         #89c163;
+$brand-primary:         #4a87ee;
+$brand-info:            #43cee6;
+$brand-success:         #66cc33;
 $brand-warning:         #f0b840;
-$brand-danger:          #de5645;
-$brand-info:            #60d2e6;
+$brand-danger:          #ef4e3a;
 $brand-dark:            #444;
 
 
@@ -204,37 +204,45 @@ $button-font-size:        16px;
 // Button block that has spacing
 $button-block-margin: 10px 0 10px 0;
 
-$button-default-bg:           #fff;
-$button-default-bg-active:    #eee;
-$buttonDefaultBorder:         #ddd;
+$button-default-bg:           $brand-default;
+$button-default-border:         #ddd;
+$button-default-active-bg:    #fafafa;
+$button-default-active-border:         #bbb;
 
-$button-secondary-bg:         #f5f5f5;
-$button-secondary-bg-active:  #eee;
-$button-secondary-border:     #ccc;
+$button-secondary-bg:         $brand-secondary;
+$button-secondary-border:     #bbb;
+$button-secondary-active-bg:  #e5e5e5;
+$button-secondary-active-border:     #999;
 
-$button-primary-bg:           #6999e9;
-$button-primary-bg-active:    #eee;
-$button-primary-border:       #5981c5;
+$button-primary-bg:           $brand-primary;
+$button-primary-border:       #3b6dc2;
+$button-primary-active-bg:    #4175ce;
+$button-primary-active-border:    #32599c;
 
-$button-info-bg:              #60d2e6;
-$button-info-bg-active:       #eee;
-$button-info-border:          #51b3c4;
+$button-info-bg:              $brand-info;
+$button-info-border:          #3bb3c8;
+$button-info-active-bg:       #3db8cd;
+$button-info-active-border:   #3293a4;
 
-$button-success-bg:           #89c163;
-$button-success-bg-active:    #eee;
-$button-success-border:       #71a052;
+$button-success-bg:           $brand-success;
+$button-success-border:       #5bb22f;
+$button-success-active-bg:    #55aa2b;
+$button-success-active-border:    #448922;
 
-$button-warning-bg:           #f0b840;
-$button-warning-bg-active:    #eee;
-$button-warning-border:       #cf9a29;
+$button-warning-bg:           $brand-warning;
+$button-warning-border:       #d29f31;
+$button-warning-active-bg:    #e2a114;
+$button-warning-active-border:       #b88517;
 
-$button-danger-bg:            #de5645;
-$button-danger-bg-active:     #eee;
-$buttonDangerBorder:          #bc4435;
+$button-danger-bg:            $brand-danger;
+$button-danger-border:        #c73927;
+$button-danger-active-bg:     #ce4331;
+$button-danger-active-border: #9f3527;
 
-$button-dark-bg:              #444;
-$button-dark-bg-active:       #eee;
+$button-dark-bg:              $brand-dark;
 $button-dark-border:          #111;
+$button-dark-active-bg:       #222;
+$button-dark-active-border:   #000;
 
 
 // Bars
@@ -283,7 +291,7 @@ $tabs-default-bg:              #fff;
 $tabs-default-border-color:    #ddd;
 
 $tabs-secondary-bg:            #f5f5f5;
-$tabs-secondary-border-color:  #ccc;
+$tabs-secondary-border-color:  #bbb;
 
 $tabs-primary-bg:              #6999e9;
 $tabs-primary-border-color:    #5981c5;
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 78df5ee2f4..41695120d0 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -118,45 +118,45 @@
 
 .bar-default {
   .button {
-    @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
+    @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
   }
 }
 
 .bar-secondary {
   .button {
-    @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
+    @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
   }
 }
 
 .bar-primary {
   .button {
-    @include button-style($button-primary-bg, $button-primary-border, $white);
+    @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
   }
 }
 .bar-info {
   .button {
-    @include button-style($button-info-bg, $button-info-border, $white);
+    @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
   }
 }
 .bar-success {
   .button {
-    @include button-style($button-success-bg, $button-success-border, $white);
+    @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
   }
 }
 .bar-warning {
   .button {
-    @include button-style($button-warning-bg, $button-warning-border, $white);
+    @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
   }
 }
 .bar-danger {
   .button {
-    @include button-style($button-danger-bg, $buttonDangerBorder, $white);
+    @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
   }
 }
 .bar-dark {
   // A default style for buttons
   .button {
-    @include button-style($button-dark-bg, $button-dark-border, $white);
+    @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
   }
 }
 
diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss
index c304501c6b..a709fdd4c2 100644
--- a/scss/ionic/_button.scss
+++ b/scss/ionic/_button.scss
@@ -29,28 +29,28 @@
   }
 
   &.button-default {
-    @include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
+    @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
   }
   &.button-secondary {
-    @include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
+    @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
   }
   &.button-primary {
-    @include button-style($button-primary-bg, $button-primary-border, $white);
+    @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
   }
   &.button-info {
-    @include button-style($button-info-bg, $button-info-border, $white);
+    @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
   }
   &.button-success {
-    @include button-style($button-success-bg, $button-success-border, $white);
+    @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
   }
   &.button-warning {
-    @include button-style($button-warning-bg, $button-warning-border, $white);
+    @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
   }
   &.button-danger {
-    @include button-style($button-danger-bg, $buttonDangerBorder, $white);
+    @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
   }
   &.button-dark {
-    @include button-style($button-dark-bg, $button-dark-border, $white);
+    @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
   }
 
   &.button-icon {
@@ -72,6 +72,6 @@ a.button {
   background: transparent;
 }
 
-.button-borderless [class^="icon-"] {
+.button-clear [class^="icon-"] {
   font-size: 24px;  
 }
diff --git a/test/buttons.html b/test/buttons.html
index 164ea342d7..f2f0e9babd 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -26,11 +26,29 @@
           <a class="button button-warning">Warning</a>
           <a class="button button-danger">Danger</a>
           <a class="button button-dark">Dark</a>
+          <a class="button button-icon"><i class="icon-home"></i></a>
+          <a class="button button-clear">Borderless</a>
         </p>
         <p><a class="button button-secondary" href="index.html">Homepage</a></p>
       </main>
 
     </section>
 
+    <script>
+      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>