Contrib.social

Drop down button style issue for modal/dialog

Open on Drupal.org →
Created on 23 February 2024, 4 months ago
Updated 14 June 2024, 14 days ago

Problem/Motivation

  • Background color problem which was fixed in https://www.drupal.org/project/gin/issues/3355885 🐛 Dropbutton style issue after Claro update Fixed is still reproducible for modal/ dialogs.
  • Button hover css is incorrect
  • Issue: Css from "Claro" theme takes precedence over css from "Gin" theme.

Steps to reproduce

- Add dropdown button/ Operation type links to dialog popup. You will find background color is grey, right arrow is not aligned correctly and button hover css gets overwritten by css from claro theme.

Temporary workaround: Custom css

.ui-dialog .dropbutton__item:first-of-type > *,
.ui-dialog .dropbutton__toggle {
  font-weight: var(--gin-font-weight-semibold);
  background-color: transparent;
  color: var(--gin-color-primary);
}
.ui-dialog .dropbutton__toggle {
  top: 2px;
  -webkit-border-start: var(--dropbutton-border-size, 1px) solid var(--gin-color-primary) !important;
  border-inline-start: var(--dropbutton-border-size, 1px) solid var(--gin-color-primary) !important;
}
.ui-dialog .dropbutton__toggle:hover {
  background-color: var(--gin-color-primary);
}
.ui-dialog .dropbutton__toggle::before {
  background-image: unset;
  background-color: var(--gin-color-primary);
}
🐛 Bug report
Status

Closed: cannot reproduce

Version

3.0

Component

Code

Created by

🇮🇳India gaurav_manerkar Vasco Da Gama, Goa

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024