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

feat: modal + concert notes

Browse source
This commit is contained in:
Cory Dransfeldt 2024-08-03 13:32:53 -07:00
parent 8479ab9219
commit 07cea7fafe
No known key found for this signature in database
8 changed files with 102 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/assets/styles/components/modal.css Normal file
View file

@ -0,0 +1,71 @@
.modal-wrapper {
width: 100%;
height: 100%;
inset: 0;
background: rgba(0, 0, 0, 0.7);
position: fixed;
z-index: 1;
& .modal-body {
position: fixed;
background: var(--background-color);
border: 1px solid var(--gray-light);
max-height: 75%;
max-width: 75%;
inset: 12.5%;
overflow: scroll;
padding: var(--sizing-lg) var(--sizing-2xl);
& .modal-close {
position: absolute;
top: var(--sizing-lg);
right: var(--sizing-lg);
cursor: pointer;
& svg {
stroke: var(--accent-color);
transform: rotate(0deg);
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
&:hover,
&:focus,
&:active {
stroke: var(--accent-color-hover);
transform: rotate(8deg);
}
}
}
}
}
.modal-input {
display: none;
&:checked ~ .modal-wrapper {
display: block;
}
&:not(:checked) ~ .modal-wrapper {
display: none;
}
}
.modal-toggle {
cursor: pointer;
display: inline-flex;
vertical-align: middle;
& svg {
cursor: pointer;
stroke: var(--accent-color);
transform: rotate(0deg);
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
&:hover,
&:focus,
&:active {
stroke: var(--accent-color-hover);
transform: rotate(8deg);
}
}
}