89 lines
No EOL
1.6 KiB
CSS
89 lines
No EOL
1.6 KiB
CSS
.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);
|
|
height: 100%;
|
|
width: 100%;
|
|
inset: 0;
|
|
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);
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
outline: var(--outline)
|
|
}
|
|
|
|
&: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);
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
outline: var(--outline)
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
stroke: var(--accent-color-hover);
|
|
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);
|
|
}
|
|
} |