From e8ade42f2aa3af6e0091e939beef3fdf769a2606 Mon Sep 17 00:00:00 2001
From: Simon Liang <simon@divby0.io>
Date: Tue, 8 Aug 2017 16:49:45 +0800
Subject: extracted balance component and renders to the format, also wired in
 the account name

---
 ui/app/css/itcss/components/hero-balance.scss | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

(limited to 'ui/app/css/itcss/components')

diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index f7ecf0cdf..f657e4f2c 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -20,7 +20,25 @@ $break-large: 576px;
     margin: 2.8em 0.9em 0.8em 0.9em;
   }
 
-  .hero-balance-display {
+  .balance-container {
+
+    display: flex;
+    margin: 0;
+    justify-content: flex-start;
+    align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+
+    @media screen and (min-width: $break-large) {
+      flex-direction: row;
+      flex-grow: 3;
+    }
+
+  }
+
+  .balance-display {
 
     @media screen and (max-width: $break-small) {
       text-align: center;
@@ -38,7 +56,6 @@ $break-large: 576px;
     }
 
     @media screen and (min-width: $break-large) {
-      flex-grow: 3;
       margin-left: 3%;
       justify-content: flex-start;
       align-items: flex-start;
@@ -56,7 +73,7 @@ $break-large: 576px;
 
   }
 
-  .hero-balance-icon {
+  .balance-icon {
     border-radius: 25px;
     width: 45px;
     height: 45px;
-- 
cgit