picocss/scss/components/_modal.scss

85 lines
1.5 KiB
SCSS
Raw Normal View History

2021-10-24 15:24:57 +07:00
/**
* Modal (<dialog>)
*/
dialog {
2021-11-02 11:04:48 +07:00
display: flex;
2021-10-24 15:24:57 +07:00
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
2021-11-02 11:04:48 +07:00
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
2021-10-24 15:24:57 +07:00
padding: var(--spacing);
border: none;
2021-11-02 11:04:48 +07:00
background-color: var(--modal-overlay-background-color);
2021-10-24 15:24:57 +07:00
article {
@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");
}
}
> footer {
text-align: right;
[role="button"]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
}
}
&:not([open]) {
display: none;
}
2021-10-31 09:24:46 +07:00
.close {
display: block;
width: 1rem;
height: 1rem;
2021-11-02 11:04:48 +07:00
margin-top: -0.5rem;
margin-right: -0.5rem;
margin-bottom: var(--typography-spacing-vertical);
2021-10-31 09:24:46 +07:00
margin-left: auto;
background-image: var(--icon-close);
background-position: center;
background-size: 1rem auto;
2021-11-02 11:04:48 +07:00
background-repeat: no-repeat;
2021-10-31 09:24:46 +07:00
opacity: .5;
@if $enable-transitions {
transition: opacity var(--transition);
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
2021-10-24 15:24:57 +07:00
}
.dialog-is-open {
overflow: hidden;
2021-11-02 11:04:48 +07:00
pointer-events: none;
2021-10-24 15:24:57 +07:00
.container {
filter: blur(0.125rem);
}
dialog {
pointer-events: auto;
}
}