Bottom padding on uls and ols inside ol class="steps"

[rhyslawry]

Expected behaviour

Single <ul> and <ol>s should render inside <ol class="steps"> the same way they do inside a regular section or div.

Actual behaviour

Single <ul> and <ol>s inside <ol class="steps"> are inheriting padding-bottom: 0 from .uomcontent ol ul { padding-bottom: 0 } The css is treating them like regular nested lists, rather than recognising that the first <ol class="steps"> shouldn't make the first level of <ul>s or <ol>s have no bottom padding.

I think the above css should be blocked from applying to .steps ol and .steps ul It should however apply to .steps ol ol, .steps ol ul, .steps ul ol and .steps ul ul etc., which should render like normal nested lists.

Steps to reproduce

This page: https://resources.web.unimelb.edu.au/controlled-environment/help-guides/10-tips See screenshot:

Padding-bottom is normally 1.875rem for regular uls and ols:

[axelboc]

Okay, I've fixed and simplified a lot of the list spacing styles. Hopefully this doesn't break anything... One thing to note is that from now on a list used inside a steps list or accordion cannot be wrapped inside an extra container. I don't see why that would be the case, but thought it was worth mentioning... Thanks to this constraint, I'm able to target the first-level inner list (e.g. ol.steps > li > ul) and reset its styles without affecting that inner list's own nested lists.

<!-- This is fine -->
<ol class="steps">
  <li>
    <h2>Headline</h2>
    <ul>
      <li>Item</li>
    </ul>
  </li>
</ol>

<!-- This is not fine -->
<ol class="steps">
  <li>
    <h2>Headline</h2>
    <div>
      <ul>
        <li>Item</li>
      </ul>
    </div>
  </li>
</ol>