mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Improve text positioning on mobile view
This commit is contained in:
parent
3188cc2ef0
commit
7a664a7f72
@ -134,6 +134,7 @@ TxList.prototype.renderTransactionListItem = function () {
|
||||
})
|
||||
]),
|
||||
|
||||
h('div.tx-list-account-and-status-wrapper', {}, [
|
||||
h('div.tx-list-account-wrapper', {
|
||||
style: {}
|
||||
}, [
|
||||
@ -149,6 +150,7 @@ TxList.prototype.renderTransactionListItem = function () {
|
||||
transactionStatus,
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
h('div.flex-column.tx-list-details-wrapper', {
|
||||
style: {}
|
||||
|
@ -1,7 +1,3 @@
|
||||
$break-small: 575px;
|
||||
$break-medium: 780px;
|
||||
$break-large: 576px;
|
||||
|
||||
.hero-balance {
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
|
@ -18,14 +18,26 @@
|
||||
flex: 0 0 70px;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin: 0em 1.3em 0.95em 1.3em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
margin: 0em 1.3em 0em 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-date-wrapper {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
@media screen and (max-width: $break-small) {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media screen and (min-width: $break-large) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-content-wrapper {
|
||||
@ -44,34 +56,50 @@
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.tx-list-account-wrapper {
|
||||
flex: 3 3 auto;
|
||||
align-self: center;
|
||||
}
|
||||
.tx-list-account-and-status-wrapper {
|
||||
display: flex;
|
||||
flex: 8 8 auto;
|
||||
|
||||
.tx-list-account {
|
||||
@media screen and (max-width: $break-small) {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.tx-list-account-wrapper {
|
||||
flex: 2 2 auto;
|
||||
}
|
||||
|
||||
.tx-list-status-wrapper {
|
||||
flex: 6 6 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-account {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-status-wrapper {
|
||||
align-self: center;
|
||||
flex: 5 5 auto;
|
||||
}
|
||||
|
||||
.tx-list-status {
|
||||
.tx-list-status {
|
||||
color: $dusty-gray;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-details-wrapper {
|
||||
align-self: center;
|
||||
flex: 2 2 auto;
|
||||
}
|
||||
|
||||
.tx-list-value {
|
||||
.tx-list-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-list-fiat-value {
|
||||
.tx-list-fiat-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user