m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adjust hero balance on mobile

Browse Source
This commit is contained in:
sdtsui 2017-08-06 17:46:18 -07:00
parent ebf39831c4
commit f06a18a09c
1 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
ui/app/css/itcss/components/hero-balance.scss
View File

@ -28,13 +28,13 @@ $break-large: 576px;
text-align: center; text-align: center;
.token-amount { .token-amount {
font-size: 1.8em; font-size: 175%;
margin-top: 1em; margin-top: 15%;
} }
.fiat-amount { .fiat-amount {
font-size: 1.1em; font-size: 115%;
margin-top: 0.8em; margin-top: 8.5%;
} }
} }
@ -55,47 +55,52 @@ $break-large: 576px;
} }
.hero-balance-icon { .hero-balance-icon {
border-radius: 10vw; border-radius: 30px;
width: 60px;
height: 60px;
// TODO: colors // TODO: colors
border: 1px solid #DEDEDE; border: 1px solid #DEDEDE;
width: 5vw;
height: 5vw; @media screen and (min-width: $break-large) {
min-width: 45px; border-radius: 10vw;
min-height: 45px; width: 5vw;
max-width: 65px; height: 5vw;
max-height: 65px; min-width: 45px;
min-height: 45px;
max-width: 65px;
max-height: 65px;
}
} }
.hero-balance-buttons { .hero-balance-buttons {
button.btn-clear {
width: 5%;
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;
height: 4.2vh;
min-height: 28px;
font-size: .7em;
}
}
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
width: 100%; width: 100%;
margin-top: 1.3em; height: 100px; // needed a round number to set the heights of the buttons inside
} }
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {
flex-grow: 2; flex-grow: 2;
} }
button.btn-clear {
font-size: 75%;
background: white;
border: 1px solid;
@media screen and (max-width: $break-small) {
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;
}
}
} }
} }