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

Buy Modal Styling

Browse Source
This commit is contained in:
Chi Kei Chan 2017-09-19 18:49:35 -07:00
parent 566ffee8cd
commit e7f1fc4436
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/app/components/modals/modal.js
View File

@ -21,12 +21,13 @@ const MODALS = {
mobileModalStyle: { mobileModalStyle: {
width: '95%', width: '95%',
top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh', top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
}, },
laptopModalStyle: { laptopModalStyle: {
width: '66%', width: '66%',
maxWidth: '550px',
top: 'calc(30% + 10px)', top: 'calc(30% + 10px)',
boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px', boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
}, },
}, },
@ -64,7 +65,7 @@ const MODALS = {
}, },
contentStyle: { contentStyle: {
borderRadius: '4px', borderRadius: '4px',
} },
}, },
NEW_ACCOUNT: { NEW_ACCOUNT: {

20
ui/app/css/itcss/components/modal.scss
View File

@ -9,6 +9,12 @@
justify-content: center; justify-content: center;
text-align: center; text-align: center;
font-family: 'DIN OT'; font-family: 'DIN OT';
padding: 0 16px;
}
.buy-modal-content-option {
cursor: pointer;
color: #5B5D67;
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
@ -44,7 +50,6 @@
border-radius: 6px; border-radius: 6px;
border: 1px solid $black; border: 1px solid $black;
padding: 0% 7%; padding: 0% 7%;
justify-content: space-around;
div.buy-modal-content-option-title { div.buy-modal-content-option-title {
font-size: 20px; font-size: 20px;
@ -76,29 +81,30 @@
.buy-modal-content-options { .buy-modal-content-options {
flex-direction: row; flex-direction: row;
margin: 20px 0; margin: 20px 0 60px;
} }
div.buy-modal-content-option { div.buy-modal-content-option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 20vw; width: 20vw;
height: 18vw; height: 120px;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
border: 1px solid $black; border: 1px solid $black;
margin: 0 .5vw; margin: 0 8px;
justify-content: space-around; padding: 18px 0;
div.buy-modal-content-option-title { div.buy-modal-content-option-title {
font-size: 20px; font-size: 20px;
margin-bottom: 12px;
@media screen and (max-width: 679px) { @media screen and (max-width: 679px) {
font-size: 14px; font-size: 14px;
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
font-size: 26px; font-size: 20px;
} }
} }
@ -121,7 +127,7 @@
} }
@media screen and (min-width: 1281px) { @media screen and (min-width: 1281px) {
font-size: 20px; font-size: 16px;
padding: 0; padding: 0;
} }
} }