ccchh-website/themes/ccchh/assets/pico-1.5.11/scss/components/_modal.scss
2024-01-27 22:47:30 +01:00

169 lines
3.2 KiB
SCSS

/**
* Modal (<dialog>)
*/
:root {
--scrollbar-width: 0px;
}
dialog {
display: flex;
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
padding: var(--spacing);
border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color);
color: var(--color);
// Content
article {
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
> header,
> footer {
padding: calc(var(--block-spacing-vertical) * 0.5)
var(--block-spacing-horizontal);
}
> header {
#{$close-selector} {
margin: 0;
margin-left: var(--spacing);
float: right;
}
}
> footer {
text-align: right;
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
}
}
p {
&:last-of-type {
margin: 0;
}
}
// Close icon
#{$close-selector} {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--block-spacing-vertical) * -0.5);
margin-bottom: var(--typography-spacing-vertical);
margin-left: auto;
background-image: var(--icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
opacity: 0.5;
@if $enable-transitions {
transition: opacity var(--transition);
}
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
}
}
// Closed state
&:not([open]),
&[open="false"] {
display: none;
}
}
// Utilities
@if $enable-classes {
.modal-is-open {
padding-right: var(--scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
touch-action: none;
dialog {
pointer-events: auto;
}
}
}
// Animations
@if ($enable-classes and $enable-transitions) {
$animation-duration: 0.2s;
:where(.modal-is-opening, .modal-is-closing) {
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
dialog {
animation-duration: ($animation-duration * 4);
animation-name: modal-overlay ;
> article {
animation-delay: $animation-duration;
animation-name: modal;
}
}
}
.modal-is-closing {
dialog,
dialog > article {
animation-delay: 0s;
animation-direction: reverse;
}
}
@keyframes modal-overlay {
from {
backdrop-filter: none;
background-color: transparent;
}
}
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
}
}