feat: modal

Accept `button[rel=prev]` as modal closing item
This commit is contained in:
Atmos4 2024-02-13 17:27:13 +01:00
parent 175b101aa8
commit ddd9cc4772
237 changed files with 715 additions and 473 deletions

View file

@ -2353,7 +2353,7 @@ main {
.pico dialog article > header > * {
margin-bottom: 0;
}
.pico dialog article > header .close, .pico dialog article > header a[rel=prev] {
.pico dialog article > header .close, .pico dialog article > header :is(a, button)[rel=prev] {
margin: 0;
margin-left: var(--pico-spacing);
float: right;
@ -2369,21 +2369,23 @@ main {
.pico dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5);
}
.pico dialog article .close, .pico dialog article a[rel=prev] {
.pico dialog article .close, .pico dialog article :is(a, button)[rel=prev] {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--pico-spacing) * -1);
margin-bottom: var(--pico-spacing);
margin-left: auto;
border: none;
background-image: var(--pico-icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
background-color: transparent;
opacity: 0.5;
transition: opacity var(--pico-transition);
}
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
.pico dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), .pico dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1;
}
.pico dialog:not([open]), .pico dialog[open=false] {