SHARE
TWEET

Untitled

a guest Jun 19th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { css } from '@emotion/core'
  2. import styled from '@emotion/styled'
  3. import ReactModal from 'react-modal'
  4.  
  5. ReactModal.setAppElement('#__next')
  6. ReactModal.defaultStyles = {}
  7.  
  8. export const globalStyles = css`
  9.   .ReactModal__Html--open,
  10.   .ReactModal__Body--open {
  11.     overflow: hidden;
  12.   }
  13.  
  14.   .ReactModal__Overlay {
  15.     position: fixed;
  16.     z-index: 999999;
  17.     top: 0;
  18.     left: 0;
  19.     width: 100vw;
  20.     height: 100vh;
  21.     background: rgba(0, 0, 0, 0.3);
  22.     display: flex;
  23.     align-items: center;
  24.     justify-content: center;
  25.   }
  26.  
  27.   .ReactModal__Content {
  28.     background: white;
  29.     outline: none;
  30.     width: 50rem;
  31.     max-width: calc(100vw - 2rem);
  32.     max-height: calc(100vh - 2rem);
  33.     box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.24);
  34.     overflow-y: auto;
  35.     position: relative;
  36.   }
  37. `
  38.  
  39. export const S = styled(ReactModal)`
  40.   .modal-close-btn {
  41.     cursor: pointer;
  42.     top: 1.5rem;
  43.     right: 1.5rem;
  44.     position: absolute;
  45.     width: 3rem;
  46.     height: 3rem;
  47.     display: flex;
  48.     align-items: center;
  49.     justify-content: center;
  50.     font-size: 1.75rem;
  51.     background: none;
  52.     border: 0;
  53.     outline: none;
  54.     transition: all 200ms ease;
  55.  
  56.     &:hover,
  57.     &:focus {
  58.       background: rgba(0, 0, 0, 0.05);
  59.     }
  60.   }
  61.  
  62.   .modal-content {
  63.     min-height: 6rem;
  64.     padding: 4.5rem;
  65.     height: 100%;
  66.     display: flex;
  67.     align-items: center;
  68.     justify-content: center;
  69.  
  70.     > * {
  71.       width: 100%;
  72.     }
  73.   }
  74. `
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top