Contrib.social

Dropdown does not show desired arrow on open state

Open on Drupal.org →
Created on 9 April 2025, about 1 month ago

Problem/Motivation

The dropdown component does not show the desired arrow on open state, because the css is()-Function is not usable for pseudo elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/:is#is_does_not_select_pseudo-elements).

Steps to reproduce

1) Use Olivero as default theme.
2) Go to a page which have a dropdown component.
3) Open a dropdown with more than one child.
4) The arrow shows to bottom on closed stated and on open state it should still the same arrow.

Proposed resolution

Move the @nest rule outside of the ::before pseudo element in Line 69 of the dropdown.pcss.css:

  &::before {
    display: block;
    width: var(--sp0-5);
    height: var(--sp0-5);
    content: "";
    transform: translateY(-25%) rotate(45deg);
    border-right: solid 2px var(--dropbutton--outline-color);
    border-bottom: solid 2px var(--dropbutton--outline-color);
  }
  
  @nest .dropbutton-wrapper.open & {
    transform: translateY(25%) rotate(225deg);
  }

instead of:

  &::before {
    display: block;
    width: var(--sp0-5);
    height: var(--sp0-5);
    content: "";
    transform: translateY(-25%) rotate(45deg);
    border-right: solid 2px var(--dropbutton--outline-color);
    border-bottom: solid 2px var(--dropbutton--outline-color);

    @nest .dropbutton-wrapper.open & {
      transform: translateY(25%) rotate(225deg);
    }
  }
🐛 Bug report
Status

Active

Version

11.0 🔥

Component

Olivero theme

Created by

🇦🇹Austria joville

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024