From c358a9cef073929be9d984876e0f43f804156acc Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 20 Nov 2013 15:51:35 -0600
Subject: [PATCH] .item.active states only for <a> and <button>

---
 dist/css/ionic.css             | 61 +++++++++++++++++-----------------
 dist/css/themes/ionic-ios7.css |  1 -
 scss/_items.scss               | 58 +++++++++++++++++++++++++-------
 scss/_mixins.scss              |  4 ++-
 test/cards.html                |  2 +-
 5 files changed, 81 insertions(+), 45 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 0e25cda49d..23dc24a5f2 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1405,9 +1405,6 @@ a.subdued {
   border-style: solid;
   font-size: 16px;
   -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
-  .item.active, .ionic-pseudo .item:active {
-    background-color: #d9d9d9;
-    border-color: #cccccc; }
   .item h2 {
     margin: 0 0 4px 0;
     font-size: 16px; }
@@ -1439,65 +1436,69 @@ a.subdued {
     color: #444444;
     background-color: white;
     border-color: #dddddd; }
-    .item.item-light.active, .ionic-pseudo .item.item-light:active {
-      background-color: #fafafa;
-      border-color: #cccccc; }
   .item.item-stable {
     color: #444444;
     background-color: #f8f8f8;
     border-color: #b2b2b2; }
-    .item.item-stable.active, .ionic-pseudo .item.item-stable:active {
-      background-color: #e5e5e5;
-      border-color: #a2a2a2; }
   .item.item-positive {
     color: white;
     background-color: #4a87ee;
     border-color: #145dd7; }
-    .item.item-positive.active, .ionic-pseudo .item.item-positive:active {
-      background-color: #145dd7;
-      border-color: #145dd7; }
   .item.item-calm {
     color: white;
     background-color: #43cee6;
     border-color: #1aaac3; }
-    .item.item-calm.active, .ionic-pseudo .item.item-calm:active {
-      background-color: #1aaac3;
-      border-color: #1aaac3; }
   .item.item-assertive {
     color: white;
     background-color: #ef4e3a;
     border-color: #cc2511; }
-    .item.item-assertive.active, .ionic-pseudo .item.item-assertive:active {
-      background-color: #cc2511;
-      border-color: #cc2511; }
   .item.item-balanced {
     color: white;
     background-color: #66cc33;
     border-color: #478f24; }
-    .item.item-balanced.active, .ionic-pseudo .item.item-balanced:active {
-      background-color: #478f24;
-      border-color: #478f24; }
   .item.item-energized {
     color: white;
     background-color: #f0b840;
     border-color: #d39511; }
-    .item.item-energized.active, .ionic-pseudo .item.item-energized:active {
-      background-color: #d39511;
-      border-color: #d39511; }
   .item.item-royal {
     color: white;
     background-color: #8a6de9;
     border-color: #552bdf; }
-    .item.item-royal.active, .ionic-pseudo .item.item-royal:active {
-      background-color: #552bdf;
-      border-color: #552bdf; }
   .item.item-dark {
     color: white;
     background-color: #444444;
     border-color: #111111; }
-    .item.item-dark.active, .ionic-pseudo .item.item-dark:active {
-      background-color: #262626;
-      border-color: black; }
+
+a.item.active, .ionic-pseudo a.item:active, button.item.active, .ionic-pseudo button.item:active {
+  background-color: #d9d9d9;
+  border-color: #cccccc; }
+a.item.item-light.active, .ionic-pseudo a.item.item-light:active, button.item.item-light.active, .ionic-pseudo button.item.item-light:active {
+  background-color: #fafafa;
+  border-color: #cccccc; }
+a.item.item-stable.active, .ionic-pseudo a.item.item-stable:active, button.item.item-stable.active, .ionic-pseudo button.item.item-stable:active {
+  background-color: #e5e5e5;
+  border-color: #a2a2a2; }
+a.item.item-positive.active, .ionic-pseudo a.item.item-positive:active, button.item.item-positive.active, .ionic-pseudo button.item.item-positive:active {
+  background-color: #145dd7;
+  border-color: #145dd7; }
+a.item.item-calm.active, .ionic-pseudo a.item.item-calm:active, button.item.item-calm.active, .ionic-pseudo button.item.item-calm:active {
+  background-color: #1aaac3;
+  border-color: #1aaac3; }
+a.item.item-assertive.active, .ionic-pseudo a.item.item-assertive:active, button.item.item-assertive.active, .ionic-pseudo button.item.item-assertive:active {
+  background-color: #cc2511;
+  border-color: #cc2511; }
+a.item.item-balanced.active, .ionic-pseudo a.item.item-balanced:active, button.item.item-balanced.active, .ionic-pseudo button.item.item-balanced:active {
+  background-color: #478f24;
+  border-color: #478f24; }
+a.item.item-energized.active, .ionic-pseudo a.item.item-energized:active, button.item.item-energized.active, .ionic-pseudo button.item.item-energized:active {
+  background-color: #d39511;
+  border-color: #d39511; }
+a.item.item-royal.active, .ionic-pseudo a.item.item-royal:active, button.item.item-royal.active, .ionic-pseudo button.item.item-royal:active {
+  background-color: #552bdf;
+  border-color: #552bdf; }
+a.item.item-dark.active, .ionic-pseudo a.item.item-dark:active, button.item.item-dark.active, .ionic-pseudo button.item.item-dark:active {
+  background-color: #262626;
+  border-color: black; }
 
 .item,
 .item h1,
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 1d85c360f2..680f21850c 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */
diff --git a/scss/_items.scss b/scss/_items.scss
index 8f5b6b07a3..90d872dcf6 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -5,7 +5,7 @@
  */
 
 .item {
-  @include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border);
+  @include item-style($item-default-bg, $item-default-border, $item-default-text);
 
   position: relative;
 
@@ -52,7 +52,7 @@
     margin-bottom: 0;
   }
 
-  // Align badges within list items
+  // Align badges within items
   .badge {
     float: right;
   }
@@ -60,37 +60,71 @@
     margin-right: 5px;
   }
 
-  // Different themes for list items
+  // Different themes for items
   &.item-light { 
-    @include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border);
+    @include item-style($item-light-bg, $item-light-border, $item-light-text);
   }
   &.item-stable { 
-    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border);
+    @include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
   }
   &.item-positive { 
-    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border);
+    @include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
   }
   &.item-calm { 
-    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border);
+    @include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
   }
   &.item-assertive { 
-    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border);
+    @include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
   }
   &.item-balanced { 
-    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border);
+    @include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
   }
   &.item-energized { 
-    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border);
+    @include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
   }
   &.item-royal { 
-    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border);
+    @include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
   }
   &.item-dark { 
-    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border);
+    @include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
   }
 
 }
 
+// Link and Button Active States
+a.item, button.item {
+  @include item-active-style($item-default-active-bg, $item-default-active-border);
+
+  // Different active themes for <a> and <button> items
+  &.item-light { 
+    @include item-active-style($item-light-active-bg, $item-light-active-border);
+  }
+  &.item-stable { 
+    @include item-active-style($item-stable-active-bg, $item-stable-active-border);
+  }
+  &.item-positive { 
+    @include item-active-style($item-positive-active-bg, $item-positive-active-border);
+  }
+  &.item-calm { 
+    @include item-active-style($item-calm-active-bg, $item-calm-active-border);
+  }
+  &.item-assertive { 
+    @include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
+  }
+  &.item-balanced { 
+    @include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
+  }
+  &.item-energized { 
+    @include item-active-style($item-energized-active-bg, $item-energized-active-border);
+  }
+  &.item-royal { 
+    @include item-active-style($item-royal-active-bg, $item-royal-active-border);
+  }
+  &.item-dark { 
+    @include item-active-style($item-dark-active-bg, $item-dark-active-border);
+  }
+}
+
 // Handle text overflow
 .item,
 .item h1, 
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 75fa59dcaa..5d0c7bd25b 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -83,11 +83,13 @@
 // Item Mixins
 // --------------------------------------------------
 
-@mixin item-style($bg-color, $border-color, $color, $active-bg-color, $active-border-color) {
+@mixin item-style($bg-color, $border-color, $color) {
   color: $color;
   background-color: $bg-color;
   border-color: $border-color;
+}
 
+@mixin item-active-style($active-bg-color, $active-border-color) {
   &.active, 
   .ionic-pseudo &:active {
     background-color: $active-bg-color;
diff --git a/test/cards.html b/test/cards.html
index ec900b9e6f..e06697365b 100644
--- a/test/cards.html
+++ b/test/cards.html
@@ -15,7 +15,7 @@
         <h1 class="title">Cards</h1>
       </header>
 
-      <main class="content has-header overflow-scroll">
+      <main class="content has-header overflow-scroll ionic-pseudo">
         
         <div class="card">
           <div class="item item-text-wrap">