76 lines
No EOL
1.3 KiB
CSS
76 lines
No EOL
1.3 KiB
CSS
.modal-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
inset: 0;
|
|
background: var(--gray-dark-transparent);
|
|
position: fixed;
|
|
z-index: 3;
|
|
|
|
& .modal-body {
|
|
position: fixed;
|
|
background: var(--background-color);
|
|
height: 100%;
|
|
width: 100%;
|
|
inset: 0;
|
|
overflow-y: scroll;
|
|
border-radius: var(--border-radius-slight);
|
|
padding: var(--spacing-lg) var(--spacing-2xl);
|
|
|
|
@media screen and (min-width: 768px) {
|
|
max-height: 75%;
|
|
max-width: 75%;
|
|
inset: 12.5%;
|
|
border: var(--border-gray);
|
|
}
|
|
|
|
& .modal-close {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 100%;
|
|
height: var(--sizing-svg-base);
|
|
width: var(--sizing-svg-base);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-input {
|
|
display: none;
|
|
|
|
&:checked ~ .modal-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
&:not(:checked) ~ .modal-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.modal-toggle,
|
|
.modal-close {
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
|
|
&:active svg,
|
|
&:focus svg,
|
|
&:focus-within svg {
|
|
outline: var(--outline-default);
|
|
border-radius: var(--border-radius-slight);
|
|
}
|
|
|
|
& svg {
|
|
cursor: pointer;
|
|
stroke: var(--accent-color);
|
|
|
|
&:focus {
|
|
outline: var(--outline-default);
|
|
border-radius: var(--border-radius-slight);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
stroke: var(--accent-color-hover);
|
|
}
|
|
}
|
|
} |