diff --git a/src/components/blocks/list/list.module.css b/src/components/blocks/list/list.module.css index 1c034885e3..ce451e72e5 100644 --- a/src/components/blocks/list/list.module.css +++ b/src/components/blocks/list/list.module.css @@ -4,7 +4,9 @@ All styles to be migrated to Tailwind classes when convenient */ .list-dt { font-weight: 500; margin: 0 0 10px; - @media (min-width: 40em) { +} +@media (min-width: 40em) { + .list-dt { min-width: 120px; } } @@ -17,74 +19,77 @@ All styles to be migrated to Tailwind classes when convenient */ margin-bottom: 20px; font-size: 16px; overflow-x: scroll; +} - /** - * This :only-child directive is present to ensure that multiple lines are not shown in the situation - * where there is a
inside a
that is selected based on language type in between two other divs, i.e. - *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- */ - :only-child { - margin-bottom: -1px; - margin-top: -21px; - } +/** + * This :only-child directive is present to ensure that multiple lines are not shown in the situation + * where there is a
inside a
that is selected based on language type in between two other divs, i.e. + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ */ +.list-dl:only-child { + margin-bottom: -1px; + margin-top: -21px; +} - div { - display: contents; - } - dt, - dd { - border-bottom: 1px solid #e1e1e1; - height: 100%; - padding: 15px 20px 15px 0; - line-height: 1.5; - } - dt { - grid-column: 1; - } - dd > em:not(.italics):first-of-type { - background: #e1e1e1; - border-radius: 5px; - padding: 2px 5px; - display: block; - width: fit-content; - block-size: fit-content; - margin-bottom: 7px; - ::before { - content: '(default: '; - } - ::after { - content: ')'; - } - } - dd > em.italics:last-of-type { - float: right; - display: block; - text-align: right; - font-size: 12px; - margin-top: 12px; - } +.list-dl div { + display: contents; +} +.list-dl dt, +.list-dl dd { + border-bottom: 1px solid #e1e1e1; + height: 100%; + padding: 15px 20px 15px 0; + line-height: 1.5; +} +.list-dl dt { + grid-column: 1; +} +.list-dl dd > em:not(.italics):first-of-type { + background: #e1e1e1; + border-radius: 5px; + padding: 2px 5px; + display: block; + width: fit-content; + block-size: fit-content; + margin: 7px 0; +} +.list-dl dd > em:not(.italics):first-of-type::before { + content: '(default: '; +} +.list-dl dd > em:not(.italics):first-of-type::after { + content: ')'; +} +.list-dl dd > em.italics:last-of-type { + float: right; + display: block; + text-align: right; + font-size: 12px; + margin-top: 12px; } + div.definition-list-row-styles { display: block; min-height: 35px; border-bottom: 1px solid #e1e1e1; overflow: auto; padding: 15px 0; - @media (min-width: 40em) { +} +@media (min-width: 40em) { + div.definition-list-row-styles { display: flex; padding: 0; width: 100%;