Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { css } from '@emotion/core'
- import styled from '@emotion/styled'
- import ReactModal from 'react-modal'
- ReactModal.setAppElement('#__next')
- ReactModal.defaultStyles = {}
- export const globalStyles = css`
- .ReactModal__Html--open,
- .ReactModal__Body--open {
- overflow: hidden;
- }
- .ReactModal__Overlay {
- position: fixed;
- z-index: 999999;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: rgba(0, 0, 0, 0.3);
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .ReactModal__Content {
- background: white;
- outline: none;
- width: 50rem;
- max-width: calc(100vw - 2rem);
- max-height: calc(100vh - 2rem);
- box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.24);
- overflow-y: auto;
- position: relative;
- }
- `
- export const S = styled(ReactModal)`
- .modal-close-btn {
- cursor: pointer;
- top: 1.5rem;
- right: 1.5rem;
- position: absolute;
- width: 3rem;
- height: 3rem;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.75rem;
- background: none;
- border: 0;
- outline: none;
- transition: all 200ms ease;
- &:hover,
- &:focus {
- background: rgba(0, 0, 0, 0.05);
- }
- }
- .modal-content {
- min-height: 6rem;
- padding: 4.5rem;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- > * {
- width: 100%;
- }
- }
- `
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement