wagtail/client/scss/components/_dropdown.scss

// =============================================================================
// Listing view smaller dropdowns
// =============================================================================
.c-dropdown.hidden {
  display: none;
}

.c-dropdown__button {
  display: inline-block;
  box-sizing: border-box;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.25rem;
  // Make this the same as the other buttons
  line-height: 1.85;
  border: solid 1px transparent;
  border-radius: 2px;
  font-size: 0.95em;
  cursor: pointer;
  -webkit-font-smoothing: subpixel-antialiased;
  user-select: none;
}

.c-dropdown--large .c-dropdown__button {
  line-height: 2.9em;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;

  .icon-site {
    padding-inline-end: 0.2rem;
  }
}

.c-dropdown__icon {
  padding-inline-start: 0.4rem;
  padding-inline-end: 0.4rem;
}

.c-dropdown__toggle {
  display: inline-block;
}

.c-dropdown__togle--icon {
  &:before {
    display: none; // TODO: remove when iconfont styles are removed
  }

  .icon {
    @include svg-icon(1em, middle);
  }

  .icon-arrow-up {
    display: none;
  }
}

.is-open .c-dropdown__togle--icon {
  .icon-arrow-up {
    display: inline-block;
  }

  .icon-arrow-down {
    display: none;
  }
}

.c-dropdown__menu.c-dropdown__menu {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  min-width: 8rem;
  position: absolute;
  z-index: 1000;
  animation: dropdownIn 0.1s ease-out backwards;
  list-style: none;
  // Override any right alignment that might've been set by a parent element
  // (such as the snippets header)
  text-align: start;

  @media (forced-colors: active) {
    border: 2px solid transparent;
  }
}

.c-dropdown__item {
  margin-bottom: 0.375rem;
  font-size: 0.8rem;

  &:hover {
    .c-dropdown__indicator {
      opacity: 0.6;
    }
  }
}

.c-dropdown__item:last-child {
  margin-bottom: 0;
}

@keyframes dropdownIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}