status-im/ETHReport
2
0
Fork 0
mirror of https://github.com/status-im/ETHReport.git synced 2025-02-09 13:03:38 +00:00
Code Issues Projects Releases Wiki Activity

Updating modal

Browse Source
This commit is contained in:
Sharyn 2018-07-17 15:07:17 +02:00
parent 6d8c434848
commit 47a37e69b7
2 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/modal/index.js
View File

@ -6,7 +6,9 @@ const Modal = props => (
<div className={`modal ${props.isModalOpen ? 'modal-open' : ''} ${props.modalOnMobileOnly ? 'modal-on-mobile-only' : ''} `}>
<div className="modal-inner container">
{ props.children }
<div role="button" tabIndex="0" onClick={props.closeModal} className="modal-close">x</div> {/* eslint-disable-line */}
<div role="button" tabIndex="0" onClick={props.closeModal} className="modal-close">
<svg width="23" height="23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg"><title>close</title><g fill="none" fillRule="evenodd"><path fill="#0D1434" d="M-282-19H38v3197h-320z"/><path d="M19.632 3.368A11.425 11.425 0 0 0 11.5 0C8.428 0 5.54 1.196 3.368 3.368A11.425 11.425 0 0 0 0 11.5c0 3.072 1.196 5.96 3.368 8.132A11.425 11.425 0 0 0 11.5 23c3.072 0 5.96-1.196 8.132-3.368A11.425 11.425 0 0 0 23 11.5c0-3.072-1.196-5.96-3.368-8.132zm-5.57 8.343l2.866 2.866a.594.594 0 0 1 0 .839l-1.655 1.655a.589.589 0 0 1-.42.173.589.589 0 0 1-.419-.173l-2.866-2.866a.153.153 0 0 0-.21 0L8.492 17.07a.589.589 0 0 1-.42.173.59.59 0 0 1-.419-.173l-1.655-1.655a.589.589 0 0 1-.174-.42c0-.158.062-.307.174-.419l2.866-2.866a.15.15 0 0 0 0-.21L5.876 8.514a.589.589 0 0 1-.173-.42c0-.158.062-.307.173-.419L7.532 6.02a.589.589 0 0 1 .42-.174c.158 0 .307.062.418.174l2.988 2.987a.153.153 0 0 0 .21 0l2.987-2.987a.589.589 0 0 1 .42-.174c.158 0 .307.062.419.174l1.655 1.655c.112.112.173.26.173.42a.59.59 0 0 1-.173.419L14.062 11.5a.15.15 0 0 0 0 .21z" fill="#D53337" fillRule="nonzero"/></g></svg>
</div> {/* eslint-disable-line */}
</div>
</div>
);

29
components/modal/style.scss
View File

@ -44,31 +44,32 @@
width: 100%;
height: 100%;
padding-top: calculateRem(24);
position: relative;
@media (min-width: $tablet) {
padding-top: calculateRem(48);
}
&.container {
max-width: calculateRem(1024);
padding-top: calculateRem(40);
}
}
.modal-close {
position: fixed;
position: absolute;
top: calculateRem(16);
right: calculateRem(16);
padding: calculateRem(4);
background-color: #cfcfcf;
text-align: center;
width: calculateRem(32);
height: calculateRem(32);
border-radius: 50%;
cursor: pointer;
outline: none;
z-index: 4;
&:hover {
background-color: #c1c1c1;
@media (min-width: $desktop) {
top: calculateRem(72);
right: calculateRem(-20);
svg {
width: calculateRem(30);
height: calculateRem(30);
}
}
&:hover svg path:last-child {
fill: $dark-red;
}
}