cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: enhance modal for esc to close if js is enabled

Browse source
This commit is contained in:
Cory Dransfeldt 2024-08-04 16:04:18 -07:00
parent b7e2eef988
commit d11d7bed15
No known key found for this signature in database
5 changed files with 28 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/assets/scripts/modal.js Normal file
View file

@ -0,0 +1,8 @@
window.addEventListener('load', () => {
const modalInputs = document.querySelectorAll('.modal-input')
document.addEventListener('keydown', e => {
if (e.key === 'Escape') modalInputs.forEach(modalInput => {
if (modalInput.checked) modalInput.checked = false
})
})
})

26
src/assets/styles/components/modal.css
View file

@ -25,7 +25,7 @@
&:focus svg,
&:focus-within svg {
outline: var(--outline)
outline: var(--outline);
}
& svg {
@ -34,7 +34,7 @@
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
&:focus {
outline: var(--outline)
outline: var(--outline);
}
&:hover,
@ -46,6 +46,15 @@
}
}
}
@media screen and (min-width: 768px) {
.modal-body {
max-height: 75%;
max-width: 75%;
inset: 12.5%;
border: 1px solid var(--gray-light);
}
}
}
.modal-input {
@ -67,7 +76,7 @@
&:focus svg,
&:focus-within svg {
outline: var(--outline)
outline: var(--outline);
}
& svg {
@ -77,7 +86,7 @@
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
&:focus {
outline: var(--outline)
outline: var(--outline);
}
&:hover,
@ -87,13 +96,4 @@
transform: rotate(8deg);
}
}
}
@media screen and (min-width: 768px) {
.modal-wrapper .modal-body {
max-height: 75%;
max-width: 75%;
inset: 12.5%;
border: 1px solid var(--gray-light);
}
}