root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Moving modal styles to CSS

Browse Source
This commit is contained in:
Jeff Avallone 2019-01-19 13:26:13 -05:00
parent ef8b3a4bde
commit f9b34ebd94
2 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gatsby-browser.js
View File

@ -7,24 +7,14 @@ import i18n from 'i18n';
import Layout from 'components/Layout'; import Layout from 'components/Layout';
import 'site.css'; import 'site.css';
import style from 'globals.module.css';
Modal.setAppElement('#___gatsby'); Modal.setAppElement('#___gatsby');
Modal.defaultStyles.overlay = { Modal.defaultProps = {
...Modal.defaultStyles.overlay, ...Modal.defaultProps,
backgroundColor: 'rgba(0, 0, 0, 0.25)' className: style.modal,
}; overlayClassName: style.modalOverlay
Modal.defaultStyles.content = {
...Modal.defaultStyles.content,
background: 'transparent',
border: '0 solid',
borderRadius: '0',
overflow: null,
padding: '2rem',
top: '7rem',
bottom: '7rem',
left: '2rem',
right: '2rem'
}; };
export const onClientEntry = () => { export const onClientEntry = () => {

23
src/globals.module.css
View File

@ -134,3 +134,26 @@
border-right: 0.1rem solid color(var(--color-black) alpha(0.2)); border-right: 0.1rem solid color(var(--color-black) alpha(0.2));
} }
} }
.modal {
position: absolute;
top: 9rem;
bottom: 9rem;
left: 4rem;
right: 4rem;
outline: none;
pointer-events: none;
& > * {
pointer-events: auto;
}
}
.modalOverlay {
background-color: rgba(0, 0, 0, 0.25);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}