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

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

@ -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,9 +55,14 @@ $break-large: 576px;
}
.hero-balance-icon {
border-radius: 10vw;
border-radius: 30px;
width: 60px;
height: 60px;
// TODO: colors
border: 1px solid #DEDEDE;
@media screen and (min-width: $break-large) {
border-radius: 10vw;
width: 5vw;
height: 5vw;
min-width: 45px;
@ -66,35 +71,35 @@ $break-large: 576px;
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;
}
}