Skip to content

Instantly share code, notes, and snippets.

@alexparker
Created November 27, 2017 18:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexparker/774af091ea6ea71836f8585648276db3 to your computer and use it in GitHub Desktop.
Save alexparker/774af091ea6ea71836f8585648276db3 to your computer and use it in GitHub Desktop.
Easy flexible modals (remodal)
html.modal-active
overflow: hidden
touch-action: none
.modal-overlay
background: alpha(black, 80%)
bottom: -5000px
left: -5000px
position: fixed
right: -5000px
top: -5000px
z-index: 9999
.modal-wrapper
-webkit-overflow-scrolling: touch
bottom: 0
left: 0
overflow: auto
padding-top: 32px
padding: 16px
position: fixed
right: 0
text-align: center
top: 0
z-index: 10000
&::after
content: ""
display: inline-block
height: 100%
margin-left: -0.05em
vertical-align: middle
+tablet-min()
padding: 32px
.modal
display: inline-block
text-align: left
vertical-align: middle
width: 100%
+tablet-min()
max-width: 620px
min-width: 420px
width: auto
&__content
background: $colors.background-foreground
border-radius: 4px
box-shadow: 0 3px alpha(black, $shadow-default)
padding: 16px
+tablet-min()
padding: 32px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment