aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css')
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss65
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss10
2 files changed, 55 insertions, 20 deletions
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;
}
}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index b3ad30017..f087d2651 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -57,14 +57,6 @@
width: 85%;
height: 90vh;
}
-
- button.btn-clear {
- width: 75px;
- height: 32px;
- font-size: .6em;
- background: white;
- border: 1px solid;
- }
}
@media screen and (min-width: 769px) {
@@ -100,7 +92,7 @@
}
button.btn-clear {
- width: 100px;
+ width: 93px;
height: 50px;
font-size: .7em;
background: white;