<div class="actions">
<button class="button ripple" popovershowtarget="close-pop-up">Open me</button>
<button class="button ripple" popovershowtarget="input-pop-up">Show input</button>
</div>
<div id="close-pop-up" popover>
<div class="card elevated">
<p>See how this button is already focussed?</p>
<p>Open the other pop-up to see the input focussed</p>
<div class="actions">
<button class="button ripple" autofocus popoverhidetarget="close-pop-up">Close</button>
<button class="button ripple" popovershowtarget="input-pop-up">Show input</button>
</div>
</div>
</div>
<div id="input-pop-up" popover>
<div class="card elevated">
<label for="name">Name</label>
<input id="name" autofocus type="text">
<button class="button ripple" popoverhidetarget="input-pop-up">Close</button>
</div>
</div>
@layer normalize, open-props, base, mdl, demo;
@layer base {
*,
*:after,
*:before {
box-sizing: border-box;
}
:where([popover]) {
margin: auto;
border-width: initial;
border-style: solid;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
font-family: "Google Sans", sans-serif, system-ui;
align-content: center;
}
}
@layer demo {
[popover] {
padding: var(--size-4);
}
[popover] {
background: none;
border: 0;
padding: 0;
max-width: calc(100% - var(--size-8));
overflow: visible;
}
.card {
padding: var(--size-6);
max-width: 100%;
min-width: 0;
}
.card > * + * {
margin-top: var(--size-4);
}
input {
color: var(--text-1);
}
.actions {
display: flex;
gap: var(--size-4);
}
:focus {
outline: 4px solid var(--green-4);
}
}