From f1fb9e10a06d1811d97f61b6369684979b7ecf70 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Wed, 6 Sep 2017 03:17:49 -0700
Subject: Adding Token transaction detail screen

---
 ui/app/css/itcss/components/token-list.scss     | 13 +++++++++++++
 ui/app/css/itcss/components/wallet-balance.scss | 10 ++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'ui/app/css')

diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index dd1d533c7..2195dc1b8 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -1,9 +1,22 @@
+$wallet-balance-breakpoint: 890px;
+$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+
 .token-list-item {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   padding: 20px 24px;
   cursor: pointer;
+  transition: linear 200ms;
+  background-color: rgba($wallet-balance-bg, 0);
+
+  @media #{$wallet-balance-breakpoint-range} {
+    padding: 10% 4%;
+  }
+
+  &--active {
+    background-color: rgba($wallet-balance-bg, 1);
+  }
 
   &__identicon {
     margin-right: 15px;
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
index 113380769..cd44f89bb 100644
--- a/ui/app/css/itcss/components/wallet-balance.scss
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -4,6 +4,12 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
 .wallet-balance-wrapper {
   flex: 0 0 auto;
+  transition: linear 200ms;
+  background: rgba($wallet-balance-bg, 0);
+
+  &--active {
+    background: rgba($wallet-balance-bg, 1);
+  }
 }
 
 .wallet-balance {
@@ -62,7 +68,3 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
     border: 1px solid $alto;
   }
 }
-
-.wallet-balance-wrapper-active {
-  background: $wallet-balance-bg;
-}
-- 
cgit v1.2.3