115 replies

Dialog styling with nested vanilla CSS

Hi,

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;
    }
  }
}

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)

:not(#mobile-nav)

to the

dialog

dialog

selector, but it fails to work.

Any ideas here?

KP-C

Kevin Powell - Community•13mo ago•

115 replies

rctneil

Dialog styling with nested vanilla CSS

Hi,

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;
    }
  }
}

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;
    }
  }
}

:not(#mobile-nav)

:not(#mobile-nav)

to the

dialog

dialog

selector, but it fails to work.

Any ideas here?

Dialog styling with nested vanilla CSS

Dialog styling with nested vanilla CSS

Similar Threads

Similar Threads

Similar Threads