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

Fix gas input styling on mobile view

This commit is contained in:
Chi Kei Chan 2017-10-25 01:08:14 -07:00
parent e263ae9421
commit 0d522139ba
4 changed files with 35 additions and 15 deletions

View File

@ -198,7 +198,7 @@ CustomizeGasModal.prototype.render = function () {
}) })
return h('div.send-v2__customize-gas', {}, [ return h('div.send-v2__customize-gas', {}, [
h('div', { h('div.send-v2__customize-gas__content', {
}, [ }, [
h('div.send-v2__customize-gas__header', {}, [ h('div.send-v2__customize-gas__header', {}, [
@ -241,8 +241,9 @@ CustomizeGasModal.prototype.render = function () {
]), ]),
h('div.send-v2__customize-gas__revert', { h('div.send-v2__customize-gas__revert', {
onClick: () => console.log('Revert'), // onClick: () => console.log('Revert'),
}, ['Revert']), }, ['']),
// }, ['Revert']),
h('div.send-v2__customize-gas__buttons', [ h('div.send-v2__customize-gas__buttons', [
h('div.send-v2__customize-gas__cancel', { h('div.send-v2__customize-gas__cancel', {

View File

@ -162,10 +162,9 @@ const MODALS = {
h(CustomizeGasModal, {}, []), h(CustomizeGasModal, {}, []),
], ],
mobileModalStyle: { mobileModalStyle: {
width: '355px', width: '100vw',
height: '598px', height: '100vh',
// top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', top: '0',
top: '5%',
transform: 'none', transform: 'none',
left: '0', left: '0',
right: '0', right: '0',

View File

@ -85,8 +85,10 @@
background: $athens-grey; background: $athens-grey;
position: absolute; position: absolute;
transform: rotate(45deg); transform: rotate(45deg);
left: 178px;
top: 71px; top: 71px;
left: 0;
right: 0;
margin: 0 auto;
} }
.confirm-screen-title { .confirm-screen-title {

View File

@ -274,6 +274,7 @@
color: #9b9b9b; color: #9b9b9b;
font-size: .8em; font-size: .8em;
padding: 1px 4px; padding: 1px 4px;
cursor: pointer;
} }
.token-gas { .token-gas {
@ -474,6 +475,7 @@
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
height: 59px; height: 59px;
width: 100vw;
} }
} }
@ -484,10 +486,13 @@
position: absolute; position: absolute;
transform: rotate(45deg); transform: rotate(45deg);
left: 178px; left: 178px;
top: 65px; top: 75px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
top: 46px; top: 46px;
left: 0;
right: 0;
margin: 0 auto;
} }
} }
@ -706,8 +711,8 @@
flex-flow: column; flex-flow: column;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
width: 355px; width: 100vw;
height: 598px; height: 100vh;
} }
&__header { &__header {
@ -717,6 +722,10 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 22px; font-size: 22px;
@media screen and (max-width: $break-small) {
flex: 0 0 auto;
}
} }
&__title { &__title {
@ -732,14 +741,19 @@
margin-right: 19.25px; margin-right: 19.25px;
} }
&__body { &__content {
height: 248px;
display: flex; display: flex;
flex-flow: column nowrap;
height: 100%;
}
&__body {
display: flex;
margin-bottom: 24px;
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
width: 355px;
height: 470px;
flex-flow: column; flex-flow: column;
flex: 1 1 auto;
} }
} }
@ -751,6 +765,10 @@
justify-content: space-between; justify-content: space-between;
font-size: 22px; font-size: 22px;
position: relative; position: relative;
@media screen and (max-width: $break-small) {
flex: 0 0 auto;
}
} }
&__buttons { &__buttons {