status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix Blurry Modals (#1246)

This commit is contained in:
William O'Beirne 2018-03-05 13:52:35 -05:00 committed by Daniel Ternyak
parent b016d35819
commit e3194a649e
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
common/components/ui/Modal.scss
View File

@ -4,6 +4,8 @@
$m-background: #fff; $m-background: #fff;
$m-window-padding-w: 20px; $m-window-padding-w: 20px;
$m-window-padding-h: 30px; $m-window-padding-h: 30px;
$m-window-padding-w-mobile: 10px;
$m-window-padding-h-mobile: 10px;
$m-header-height: 62px; $m-header-height: 62px;
$m-header-padding: 1rem 2rem 0.5rem 2rem; $m-header-padding: 1rem 2rem 0.5rem 2rem;
$m-content-padding: 1.5rem 2rem; $m-content-padding: 1.5rem 2rem;
@ -24,7 +26,7 @@ $m-anim-speed: 400ms;
.Modal { .Modal {
position: fixed; position: fixed;
top: 50%; top: $m-window-padding-h;
left: 50%; left: 50%;
width: initial; width: initial;
max-width: 95%; max-width: 95%;
@ -33,7 +35,7 @@ $m-anim-speed: 400ms;
max-height: calc(100% - #{$m-window-padding-h * 2}); max-height: calc(100% - #{$m-window-padding-h * 2});
background: $m-background; background: $m-background;
border-radius: 2px; border-radius: 2px;
transform: translate(-50%, -50%); transform: translateX(-50%);
z-index: $zindex-modal; z-index: $zindex-modal;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -111,7 +113,10 @@ $m-anim-speed: 400ms;
// Mobile styles // Mobile styles
@media(max-width: $screen-sm) { @media(max-width: $screen-sm) {
width: calc(100% - 40px) !important; top: $m-window-padding-h-mobile;
width: calc(100% - #{$m-window-padding-w-mobile}) !important;
max-width: calc(100% - #{$m-window-padding-w-mobile * 2});
max-height: calc(100% - #{$m-window-padding-h-mobile * 2});
} }
} }