Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3168326 by mherchel, rikki_iki, Sakthivel M, ckrina, bnjmnm, vikashsoni, darvanen, lauriii: Dropbuttons in table cells are potentially unusable if it includes options with long text length

merge-requests/1541/merge
Cristina Chumillas 2022-01-25 12:27:38 +01:00
parent 5ebe32e539
commit 92e3e659ea
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/themes/claro/css/components/dropbutton.css
View File

@ -326,7 +326,7 @@
} }
.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item { .js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
display: none; visibility: hidden;
} }
/** /**
@ -352,6 +352,10 @@
* Dropbutton items of non-first dropbutton list elements. * Dropbutton items of non-first dropbutton list elements.
*/ */
.dropbutton__item:first-of-type ~ .dropbutton__item {
max-width: 12.5rem;
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a, .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button { .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
position: relative; position: relative;

7
core/themes/claro/css/components/dropbutton.pcss.css
View File

@ -20,6 +20,7 @@
--dropbutton-border-size: 1px; --dropbutton-border-size: 1px;
--dropbutton-toggle-size-spacing: var(--dropbutton-border-size); --dropbutton-toggle-size-spacing: var(--dropbutton-border-size);
--dropbutton-border-radius-size: 2px; --dropbutton-border-radius-size: 2px;
--dropbutton-item-max-width: 12.5rem;
/* Variant variables: small. */ /* Variant variables: small. */
--dropbutton-small-spacing-size: 0.625rem; --dropbutton-small-spacing-size: 0.625rem;
--dropbutton-small-font-size: var(--font-size-xs); --dropbutton-small-font-size: var(--font-size-xs);
@ -312,7 +313,7 @@
} }
.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item { .js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
display: none; visibility: hidden;
} }
/** /**
@ -336,6 +337,10 @@
/** /**
* Dropbutton items of non-first dropbutton list elements. * Dropbutton items of non-first dropbutton list elements.
*/ */
.dropbutton__item:first-of-type ~ .dropbutton__item {
max-width: var(--dropbutton-item-max-width);
}
.dropbutton__item:first-of-type ~ .dropbutton__item > a, .dropbutton__item:first-of-type ~ .dropbutton__item > a,
.dropbutton__item:first-of-type ~ .dropbutton__item > .button { .dropbutton__item:first-of-type ~ .dropbutton__item > .button {
position: relative; position: relative;