Dialog styling with nested vanilla CSS
Hi,
I've taken this code from Adam Argyle as a basis for styling my dialogs:
I ahve another dialog that I am using for a mobile nav. This is styled totally independently so don't want these styles conflicting with it.
As those styles (for the mobile nav) are specified after these ones, I COULD just overwrite all the properties, but that seems silly.
Ideally i'd just like to stop these being applied to the nav so I tried adding
Any ideas here?
I've taken this code from Adam Argyle as a basis for styling my dialogs:
dialog {
/* Exit Stage To */
transform: translateY(-20px);
&, &::backdrop {
transition:
display 1s allow-discrete,
overlay 1s allow-discrete,
opacity 1s ease,
transform 1s ease;
/* Exit Stage To */
opacity: 0;
transform: translateY(20px);
}
/* On Stage */
&[open] {
opacity: 1;
transform: translateY(0px);
display: flex;
flex-direction: column;
gap: 1rem;
width: 750px;
border-top: 1rem solid var(--color-matisse);
max-width: calc(100% - 2rem);
box-shadow: 0 0 1rem oklch(from var(--color-black) l c h / 0.5);
padding: 1rem;
&::backdrop {
opacity: 0.8;
}
header {
display: flex;
align-items: start;
gap: 1rem;
button {
position: absolute;
top: 0;
right: 0;
}
}
html:has(&[open]) {
overflow: hidden;
scrollbar-gutter: stable;
}
/* Enter Stage From */
@starting-style {
&[open],
&[open]::backdrop {
opacity: 0;
}
&[open] {
transform: translateY(10px);
}
}
&::backdrop {
background-color: black;
}
}
}I ahve another dialog that I am using for a mobile nav. This is styled totally independently so don't want these styles conflicting with it.
As those styles (for the mobile nav) are specified after these ones, I COULD just overwrite all the properties, but that seems silly.
Ideally i'd just like to stop these being applied to the nav so I tried adding
:not(#mobile-nav) to the dialog selector, but it fails to work.Any ideas here?
