search

openeuropa / oe_theme

Drupal 10 theme based on the Europa Component Library (ECL).
European Union Public License 1.2
31 stars 31 forks source link

List style overrides font-weight from parent in rich text #1454

Open donquixote opened 3 months ago

donquixote commented 3 months ago

Steps to reproduce:

In a site with oe_theme, create content with the following rich text content, using a text format that allows it.

<table><tr><th>
  <ul><li>List inside table header</li></ul>
</th></tr></table>

Expected behavior

The html will be like this (it is wrapped in .ecl):

<div class="ecl">
  <table><tr><th>
    <ul><li>List inside table header</li></ul>
  </th></tr></table>
</div>

The text "List inside table header" will be bold, because it is inside a <th> tag.

Actual behavior

(good) Html as above. (bad) Text is not bold.

Technical explanation

From ecl-ec-default.css:

.ecl ul:is([class*=ecl-u-]),
.ecl ul:not([class*=ecl-],
[class*=wt-],
[class*=highcharts-]),
.ecl-unordered-list {
 -webkit-padding-start:.75rem;
 color:#404040;
 font:normal normal 400 1rem/1.5rem arial,sans-serif;
 list-style-position:outside;
 margin:0;
 padding-inline-start:.75rem
}

The font: normal normal 400 1rem/1.5rem arial,sans-serif resets the font-weight from th.

Notes

Actually I am not super sure about the "expected" behavior here. Is it really so clear that the list should be bold? On the other hand: Why do we need to override font-weight here? Was this even intended?