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: {
width: '95%',
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: {
width: '66%',
maxWidth: '550px',
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: {
borderRadius: '4px',
}
},
},
NEW_ACCOUNT: {

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

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