Skip to content

Instantly share code, notes, and snippets.

@yuschick
Last active November 9, 2017 12:07
Show Gist options
  • Save yuschick/b8b1ef45c92e3e7af8fbeca00fa8dd74 to your computer and use it in GitHub Desktop.
Save yuschick/b8b1ef45c92e3e7af8fbeca00fa8dd74 to your computer and use it in GitHub Desktop.
Accessible Web Apps with React, TypeScript & Ally.js
.popup-outer-container {
align-items: center;
background: rgba(0, 0, 0, 0.2);
display: flex;
height: 100vh;
justify-content: center;
padding: 10px;
position: absolute;
width: 100%;
z-index: 10;
}
.popup-inner-container {
background: #fff;
border-radius: 4px;
box-shadow: 0px 0px 10px 3px rgba(119, 119, 119, 0.35);
max-width: 750px;
padding: 10px;
position: relative;
width: 100%;
}
.popup-inner-container:focus-within {
outline: -webkit-focus-ring-color auto 2px;
}
.close-icon {
background: transparent;
color: #6e6e6e;
cursor: pointer;
font: 2rem/1 sans-serif;
position: absolute;
right: 20px;
top: 1rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment