Skip to content

Instantly share code, notes, and snippets.

@AleksandrSl
Created December 10, 2020 21:00
Show Gist options
  • Save AleksandrSl/731e35c2eae56d8c48a82b2b3e62dbf1 to your computer and use it in GitHub Desktop.
Save AleksandrSl/731e35c2eae56d8c48a82b2b3e62dbf1 to your computer and use it in GitHub Desktop.
Styles for modal window component
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: var(--modal-backdrop-layer);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.3s;
}
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
.modal-backdrop {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.3);
}
}
.modal-content {
position: relative;
width: fit-content;
overflow: hidden;
background-color: white;
border-radius: 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment