From 802c29c98642043cf679eb2658934e0420f8ecc7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 15:46:55 -0700 Subject: Implement hero balance UI, mobile --- ui/app/css/itcss/components/hero-balance.scss | 53 +++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 ui/app/css/itcss/components/hero-balance.scss (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss new file mode 100644 index 000000000..8c4d886cb --- /dev/null +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -0,0 +1,53 @@ +$break-small: 575px; +$break-large: 576px; + +.hero-balance { + @media screen and (max-width: $break-small) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin: 0.3em 0.9em 0.8em; + } + + @media screen and (min-width: $break-large) { + } + + .hero-balance-display { + @media screen and (max-width: $break-small) { + text-align: center; + } + + @media screen and (min-width: $break-large) { + } + + .token-amount { + font-size: 1.8em; + margin-top: 1em; + } + + .fiat-amount { + font-size: 1.1em; + margin-top: 0.8em; + color: #A0A0A0; + // TODO: colors + } + } + + .hero-balance-icon { + border-radius: 30px; + // TODO: colors + border: 1px solid #DEDEDE; + } + + .hero-balance-buttons { + @media screen and (max-width: $break-small) { + width: 100%; + margin-top: 1.3em; + } + + @media screen and (min-width: $break-large) { + } + + } +} \ No newline at end of file -- cgit From c1b85179590e824e9af93da5c1c67ef3a5eb1d06 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 16:37:41 -0700 Subject: Normalize sidebar dimensions and adjust hero button responsiveness --- ui/app/css/itcss/components/hero-balance.scss | 65 ++++++++++++++++++++++----- 1 file changed, 54 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 8c4d886cb..f5de139b1 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -7,31 +7,50 @@ $break-large: 576px; flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0.8em; + margin: 0.3em 0.9em 0.8em 0.9em; } @media screen and (min-width: $break-large) { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 1.5em 0.9em 0.8em 0.9em; } .hero-balance-display { + .fiat-amount { + color: #A0A0A0; + // TODO: colors + } @media screen and (max-width: $break-small) { text-align: center; + + .token-amount { + font-size: 1.8em; + margin-top: 1em; + } + + .fiat-amount { + font-size: 1.1em; + margin-top: 0.8em; + } } @media screen and (min-width: $break-large) { - } + flex-grow: 3; + margin-left: 1.2vw; - .token-amount { - font-size: 1.8em; - margin-top: 1em; - } + .token-amount { + font-size: 2.2vw; + } - .fiat-amount { - font-size: 1.1em; - margin-top: 0.8em; - color: #A0A0A0; - // TODO: colors + .fiat-amount { + font-size: 1.7vw; + margin-top: 0.3em; + } } + } .hero-balance-icon { @@ -41,12 +60,36 @@ $break-large: 576px; } .hero-balance-buttons { + button.btn-clear { + width: 81px; + height: 32px; + font-size: .7em; + background: white; + border: 1px solid; + + @media screen and (max-width: $break-small) { + width: 100%; + margin-top: 1.3em; + } + + @media screen and (min-width: $break-large) { + flex-grow: 2; + width: 5.8vw; + min-width: 75px; + height: 4.2vh; + min-height: 28px; + font-size: .7em; + } + + } + @media screen and (max-width: $break-small) { width: 100%; margin-top: 1.3em; } @media screen and (min-width: $break-large) { + flex-grow: 2; } } -- cgit From dc0f78c1b986a57313d465fd352235eb36bbe828 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 16:58:45 -0700 Subject: Fix font size of eth display for 576-780px vw --- ui/app/css/itcss/components/hero-balance.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f5de139b1..5bae3160d 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -1,4 +1,5 @@ $break-small: 575px; +$break-medium: 780px; $break-large: 576px; .hero-balance { @@ -42,13 +43,25 @@ $break-large: 576px; margin-left: 1.2vw; .token-amount { - font-size: 2.2vw; + font-size: 2.1vw; + + @media screen and (max-width: $break-medium) { + font-size: 3vw; + } + } .fiat-amount { font-size: 1.7vw; margin-top: 0.3em; + + @media screen and (max-width: $break-medium) { + font-size: 2.5vw; + margin-top: 0em; + } + } + } } @@ -57,6 +70,12 @@ $break-large: 576px; border-radius: 30px; // TODO: colors border: 1px solid #DEDEDE; + width: 5vw; + height: 5vw; + min-width: 45px; + min-height: 45px; + max-width: 65px; + max-height: 65px; } .hero-balance-buttons { -- cgit From ebf39831c416dab12367175d48f494ebae5c7114 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 17:13:31 -0700 Subject: Adjust size of buttons for 576-780+px range --- ui/app/css/itcss/components/hero-balance.scss | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 5bae3160d..be5b69e0a 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -40,26 +40,14 @@ $break-large: 576px; @media screen and (min-width: $break-large) { flex-grow: 3; - margin-left: 1.2vw; + margin-left: 3%; .token-amount { - font-size: 2.1vw; - - @media screen and (max-width: $break-medium) { - font-size: 3vw; - } - + font-size: 125%; } .fiat-amount { - font-size: 1.7vw; - margin-top: 0.3em; - - @media screen and (max-width: $break-medium) { - font-size: 2.5vw; - margin-top: 0em; - } - + font-size: 105%; } } @@ -67,7 +55,7 @@ $break-large: 576px; } .hero-balance-icon { - border-radius: 30px; + border-radius: 10vw; // TODO: colors border: 1px solid #DEDEDE; width: 5vw; @@ -80,7 +68,7 @@ $break-large: 576px; .hero-balance-buttons { button.btn-clear { - width: 81px; + width: 5%; height: 32px; font-size: .7em; background: white; @@ -93,8 +81,6 @@ $break-large: 576px; @media screen and (min-width: $break-large) { flex-grow: 2; - width: 5.8vw; - min-width: 75px; height: 4.2vh; min-height: 28px; font-size: .7em; -- cgit From f06a18a09c1ed018b23776faa7da84a421d1a3ed Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 17:46:18 -0700 Subject: Adjust hero balance on mobile --- ui/app/css/itcss/components/hero-balance.scss | 57 +++++++++++++++------------ 1 file changed, 31 insertions(+), 26 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index be5b69e0a..b0766bead 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -28,13 +28,13 @@ $break-large: 576px; text-align: center; .token-amount { - font-size: 1.8em; - margin-top: 1em; + font-size: 175%; + margin-top: 15%; } .fiat-amount { - font-size: 1.1em; - margin-top: 0.8em; + font-size: 115%; + margin-top: 8.5%; } } @@ -55,46 +55,51 @@ $break-large: 576px; } .hero-balance-icon { - border-radius: 10vw; + border-radius: 30px; + width: 60px; + height: 60px; // TODO: colors border: 1px solid #DEDEDE; - width: 5vw; - height: 5vw; - min-width: 45px; - min-height: 45px; - max-width: 65px; - max-height: 65px; + + @media screen and (min-width: $break-large) { + border-radius: 10vw; + width: 5vw; + height: 5vw; + min-width: 45px; + min-height: 45px; + max-width: 65px; + max-height: 65px; + } + } .hero-balance-buttons { + @media screen and (max-width: $break-small) { + width: 100%; + height: 100px; // needed a round number to set the heights of the buttons inside + } + + @media screen and (min-width: $break-large) { + flex-grow: 2; + } + button.btn-clear { - width: 5%; - height: 32px; - font-size: .7em; + font-size: 75%; background: white; border: 1px solid; @media screen and (max-width: $break-small) { - width: 100%; - margin-top: 1.3em; + width: 22%; + height: 55%; } @media screen and (min-width: $break-large) { + width: 5%; flex-grow: 2; height: 4.2vh; min-height: 28px; font-size: .7em; } - - } - - @media screen and (max-width: $break-small) { - width: 100%; - margin-top: 1.3em; - } - - @media screen and (min-width: $break-large) { - flex-grow: 2; } } -- cgit From 403d9c52b506e31fa31b385b61fd167f81b5ff88 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 18:06:23 -0700 Subject: Add fine css tweaks to hero balance - laptop --- ui/app/css/itcss/components/hero-balance.scss | 30 +++++++++------------------ 1 file changed, 10 insertions(+), 20 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index b0766bead..61d7f7c92 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -16,14 +16,11 @@ $break-large: 576px; flex-direction: row; justify-content: flex-start; align-items: center; - margin: 1.5em 0.9em 0.8em 0.9em; + margin: 2.8em 0.9em 0.8em 0.9em; } .hero-balance-display { - .fiat-amount { - color: #A0A0A0; - // TODO: colors - } + @media screen and (max-width: $break-small) { text-align: center; @@ -35,18 +32,22 @@ $break-large: 576px; .fiat-amount { font-size: 115%; margin-top: 8.5%; + color: #A0A0A0; } } @media screen and (min-width: $break-large) { flex-grow: 3; margin-left: 3%; + justify-content: flex-start; + align-items: flex-start; .token-amount { - font-size: 125%; + font-size: 135%; } .fiat-amount { + margin-top: 0.25%; font-size: 105%; } @@ -55,22 +56,11 @@ $break-large: 576px; } .hero-balance-icon { - border-radius: 30px; - width: 60px; - height: 60px; + border-radius: 25px; + width: 45px; + height: 45px; // TODO: colors border: 1px solid #DEDEDE; - - @media screen and (min-width: $break-large) { - border-radius: 10vw; - width: 5vw; - height: 5vw; - min-width: 45px; - min-height: 45px; - max-width: 65px; - max-height: 65px; - } - } .hero-balance-buttons { -- cgit From 850d2124c81ee81b98f23be1f49db13ca5e8aa27 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 19:26:52 -0700 Subject: Refactor account name css - mobile views --- ui/app/css/itcss/components/hero-balance.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 61d7f7c92..fabba9ed8 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -26,7 +26,7 @@ $break-large: 576px; .token-amount { font-size: 175%; - margin-top: 15%; + margin-top: 12.5%; } .fiat-amount { @@ -79,7 +79,7 @@ $break-large: 576px; border: 1px solid; @media screen and (max-width: $break-small) { - width: 22%; + width: 28%; height: 55%; } -- cgit From d8fff0fc8c25d1bd0a287502ca633a44a7844911 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 23:12:40 -0700 Subject: Opt for calculated values in absolutely positioned caret --- ui/app/css/itcss/components/hero-balance.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index fabba9ed8..f7ecf0cdf 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -3,6 +3,7 @@ $break-medium: 780px; $break-large: 576px; .hero-balance { + @media screen and (max-width: $break-small) { display: flex; flex-direction: column; @@ -90,7 +91,9 @@ $break-large: 576px; min-height: 28px; font-size: .7em; } + } } + } \ No newline at end of file -- cgit From e8ade42f2aa3af6e0091e939beef3fdf769a2606 Mon Sep 17 00:00:00 2001 From: Simon Liang 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/hero-balance.scss') 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 From 7a664a7f720f43679dad6f8857790af84b8b7da6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 22:16:42 -0700 Subject: Improve text positioning on mobile view --- ui/app/css/itcss/components/hero-balance.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f657e4f2c..2dd9bf973 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -1,7 +1,3 @@ -$break-small: 575px; -$break-medium: 780px; -$break-large: 576px; - .hero-balance { @media screen and (max-width: $break-small) { -- cgit From 58b61eb1fc2d4add59f6225ddf4df09fdfa5b92b Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 22:47:56 -0700 Subject: Add UI tweaks, including separation of overflow logic for mobile (full-height) vs laptop (tx-view-only) --- ui/app/css/itcss/components/hero-balance.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 2dd9bf973..463a124fb 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,7 +5,9 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0.8em 0.9em; + margin: 0.3em 0.9em 0em 0.9em; + height: 80vh; + max-height: 225px; } @media screen and (min-width: $break-large) { -- cgit From 8a39941d9a4c5b6fd4a3715394fec10c400c0f34 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 23:21:39 -0700 Subject: Cleanup SCSS and improve organization of color vars --- ui/app/css/itcss/components/hero-balance.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 463a124fb..72333fb47 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -19,7 +19,6 @@ } .balance-container { - display: flex; margin: 0; justify-content: flex-start; @@ -33,7 +32,6 @@ flex-direction: row; flex-grow: 3; } - } .balance-display { @@ -66,17 +64,14 @@ margin-top: 0.25%; font-size: 105%; } - } - } .balance-icon { border-radius: 25px; width: 45px; height: 45px; - // TODO: colors - border: 1px solid #DEDEDE; + border: 1px solid $alto; } .hero-balance-buttons { @@ -106,9 +101,6 @@ min-height: 28px; font-size: .7em; } - } - } - -} \ No newline at end of file +} -- cgit From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 10:31:27 +0200 Subject: Lint and cleanup all scss --- ui/app/css/itcss/components/hero-balance.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 72333fb47..ad7f5952f 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,7 +5,7 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0em 0.9em; + margin: .3em .9em 0; height: 80vh; max-height: 225px; } @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 0.9em 0.8em 0.9em; + margin: 2.8em .9em .8em; } .balance-container { @@ -47,7 +47,7 @@ .fiat-amount { font-size: 115%; margin-top: 8.5%; - color: #A0A0A0; + color: #a0a0a0; } } @@ -61,7 +61,7 @@ } .fiat-amount { - margin-top: 0.25%; + margin-top: .25%; font-size: 105%; } } @@ -75,6 +75,7 @@ } .hero-balance-buttons { + @media screen and (max-width: $break-small) { width: 100%; height: 100px; // needed a round number to set the heights of the buttons inside @@ -86,7 +87,7 @@ button.btn-clear { font-size: 75%; - background: white; + background: $white; border: 1px solid; @media screen and (max-width: $break-small) { -- cgit From 5b62f10a5f0fc87a731c9c353e99770f0f66d085 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 22 Aug 2017 21:12:17 -0230 Subject: Modify buy and send buttons color, border-radius and various size properties. (#1956) --- ui/app/css/itcss/components/hero-balance.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index ad7f5952f..a04af0649 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -89,18 +89,23 @@ font-size: 75%; background: $white; border: 1px solid; + border-radius: 2px; @media screen and (max-width: $break-small) { - width: 28%; + width: 23%; height: 55%; + border-color: $black; } @media screen and (min-width: $break-large) { width: 5%; - flex-grow: 2; - height: 4.2vh; + flex-grow: 1; + height: 4.6vh; min-height: 28px; - font-size: .7em; + font-size: .6em; + border-color: $curious-blue; + color: $curious-blue; + padding: 0px; } } } -- cgit From 5452a26b36a84f8fc5b19197d7b58eaed847ae31 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 13:09:47 -0230 Subject: Fixes lint errors and adds stylelint-config-standard to package.json --- ui/app/css/itcss/components/hero-balance.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a04af0649..9861c6c30 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -105,7 +105,7 @@ font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; + padding: 0; } } } -- cgit From 5d8bf6c86ad9cee9aec5e14ca9d57719e6e8e254 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:27:08 -0230 Subject: Adjust left margin in main container. --- ui/app/css/itcss/components/hero-balance.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 9861c6c30..f3535cd18 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em .9em .8em; + margin: 2.8em 1.8em .8em; } .balance-container { -- cgit From 57b3cdf9487e3858c3eecf49dad578b7dfcb3081 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:43:29 -0230 Subject: Fix styling of buy and send buttons on main screen. --- ui/app/css/itcss/components/hero-balance.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f3535cd18..9ac506714 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -83,6 +83,7 @@ @media screen and (min-width: $break-large) { flex-grow: 2; + justify-content: flex-end; } button.btn-clear { @@ -98,14 +99,12 @@ } @media screen and (min-width: $break-large) { - width: 5%; - flex-grow: 1; - height: 4.6vh; - min-height: 28px; font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0; + padding: 0px; + width: 85px; + height: 34px; } } } -- cgit From 7d6ad48f15aa65d28de724f550f911234ad2c58e Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 Aug 2017 04:58:45 -0230 Subject: Touch up transaction list item styles, remove main-content scroll bars, align buttons with main-content.. --- ui/app/css/itcss/components/hero-balance.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 9ac506714..f7b3cc3e5 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 1.8em .8em; + margin: 2.8em 2.37em .8em; } .balance-container { -- cgit From 836bf2e1a38bb6917f1b7fe9db0604c8143c7adf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 23:18:54 -0700 Subject: Add frontend validation to send-token --- ui/app/css/itcss/components/hero-balance.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f7b3cc3e5..8f6731358 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -87,10 +87,10 @@ } button.btn-clear { - font-size: 75%; background: $white; border: 1px solid; border-radius: 2px; + font-size: 12px; @media screen and (max-width: $break-small) { width: 23%; @@ -99,10 +99,9 @@ } @media screen and (min-width: $break-large) { - font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; + padding: 0; width: 85px; height: 34px; } -- cgit From 0458643f104d7b328e24c4403e4e3d91b4d5de92 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 19 Oct 2017 14:08:52 -0700 Subject: various styling fix on mobile --- ui/app/css/itcss/components/hero-balance.scss | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 8f6731358..bdbdd2645 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -6,8 +6,9 @@ justify-content: flex-start; align-items: center; margin: .3em .9em 0; - height: 80vh; - max-height: 225px; + // height: 80vh; + // max-height: 225px; + flex: 0 0 auto; } @media screen and (min-width: $break-large) { @@ -26,6 +27,7 @@ @media screen and (max-width: $break-small) { flex-direction: column; + flex: 0 0 auto; } @media screen and (min-width: $break-large) { @@ -78,7 +80,9 @@ @media screen and (max-width: $break-small) { width: 100%; - height: 100px; // needed a round number to set the heights of the buttons inside + // height: 100px; // needed a round number to set the heights of the buttons inside + flex: 0 0 auto; + padding: 16px 0; } @media screen and (min-width: $break-large) { @@ -93,9 +97,9 @@ font-size: 12px; @media screen and (max-width: $break-small) { - width: 23%; - height: 55%; - border-color: $black; + border-color: $curious-blue; + color: $curious-blue; + height: 36px; } @media screen and (min-width: $break-large) { -- cgit From 208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 10 Jan 2018 21:09:09 -0800 Subject: Update main view styling --- ui/app/css/itcss/components/hero-balance.scss | 30 ++++++++++++++++----------- 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index bdbdd2645..643363f95 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -16,7 +16,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 2.37em .8em; + margin: 2.3em 2.37em .8em; } .balance-container { @@ -42,8 +42,9 @@ text-align: center; .token-amount { - font-size: 175%; - margin-top: 12.5%; + font-size: 1.75rem; + margin-top: 1rem; + font-weight: 400; } .fiat-amount { @@ -54,12 +55,13 @@ } @media screen and (min-width: $break-large) { - margin-left: 3%; + margin-left: .8em; justify-content: flex-start; align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; + font-weight: 400; } .fiat-amount { @@ -69,13 +71,6 @@ } } - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } - .hero-balance-buttons { @media screen and (max-width: $break-small) { @@ -112,3 +107,14 @@ } } } + +.hero-balance-button { + text-align: center; + padding: .9rem 1rem; + color: $white; + background: $curious-blue; + border-radius: 2px; + font-size: .85rem; + width: 6rem; + font-weight: 300; +} -- cgit From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: Update styling for buttons, font weights --- ui/app/css/itcss/components/hero-balance.scss | 31 +-------------------------- 1 file changed, 1 insertion(+), 30 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 643363f95..a7a883909 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -37,6 +37,7 @@ } .balance-display { + color: $black; @media screen and (max-width: $break-small) { text-align: center; @@ -44,7 +45,6 @@ .token-amount { font-size: 1.75rem; margin-top: 1rem; - font-weight: 400; } .fiat-amount { @@ -61,7 +61,6 @@ .token-amount { font-size: 1.5rem; - font-weight: 400; } .fiat-amount { @@ -84,37 +83,9 @@ flex-grow: 2; justify-content: flex-end; } - - button.btn-clear { - background: $white; - border: 1px solid; - border-radius: 2px; - font-size: 12px; - - @media screen and (max-width: $break-small) { - border-color: $curious-blue; - color: $curious-blue; - height: 36px; - } - - @media screen and (min-width: $break-large) { - border-color: $curious-blue; - color: $curious-blue; - padding: 0; - width: 85px; - height: 34px; - } - } } } .hero-balance-button { - text-align: center; - padding: .9rem 1rem; - color: $white; - background: $curious-blue; - border-radius: 2px; - font-size: .85rem; width: 6rem; - font-weight: 300; } -- cgit From 0f4bfcb02e3a04f044a571e01a4977dae2afec8e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 17:12:58 -0800 Subject: Fix token balance color --- ui/app/css/itcss/components/hero-balance.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a7a883909..99fd2a96d 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -37,7 +37,9 @@ } .balance-display { - color: $black; + .token-amount { + color: $black; + } @media screen and (max-width: $break-small) { text-align: center; -- cgit From 40e58d31326cc4e759991d15e7e84140e483a791 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 16 Jan 2018 11:58:02 -0800 Subject: Fix tx-list, confirmation screen styling --- ui/app/css/itcss/components/hero-balance.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 99fd2a96d..ccc9a0118 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -17,6 +17,7 @@ justify-content: flex-start; align-items: center; margin: 2.3em 2.37em .8em; + flex: 0 0 auto; } .balance-container { -- cgit From d4da419c5befdbee77cb30f6113ea50fc572625c Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 5 Feb 2018 23:01:21 -0330 Subject: Wallet view supports screen sizes between 576px and 667px (#3193) --- ui/app/css/itcss/components/hero-balance.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index ccc9a0118..4af0c2c55 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -71,6 +71,22 @@ font-size: 105%; } } + + @media #{$sub-mid-size-breakpoint-range} { + margin-left: .4em; + margin-right: .4em; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 1rem; + } + + .fiat-amount { + margin-top: .25%; + font-size: 1rem; + } + } } .hero-balance-buttons { @@ -91,4 +107,12 @@ .hero-balance-button { width: 6rem; + + @media #{$sub-mid-size-breakpoint-range} { + padding: 0.4rem; + width: 4rem; + display: flex; + flex: 1; + justify-content: center; + } } -- cgit From a07550d2abff0916af500eda6767cf32e0849335 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Mar 2018 18:50:00 +0100 Subject: Increase tap areas for menu buttons on mobile --- ui/app/css/itcss/components/hero-balance.scss | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui/app/css/itcss/components/hero-balance.scss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 4af0c2c55..a3f051361 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,9 +5,6 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: .3em .9em 0; - // height: 80vh; - // max-height: 225px; flex: 0 0 auto; } -- cgit