Stepped counter size

[huwshimi]

Done

• Update stepped lists to use a fixed font size for the counters.

Fixes #4561.

QA

• Open all the list examples:
  • https://vanilla-framework-4584.demos.haus/docs/examples/patterns/lists/lists-stepped
  • https://vanilla-framework-4584.demos.haus/docs/examples/patterns/lists/lists-stepped-without-headings
  • https://vanilla-framework-4584.demos.haus/docs/examples/patterns/lists/lists-stepped-heading-classes
  • https://vanilla-framework-4584.demos.haus/docs/examples/patterns/lists/lists-stepped-detailed
• Check that the font size is always the same.

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-4584.demos.haus

[lyubomir-popov]

@huwshimi I would do this:

line-height: calc(1.5rem - 2px);
width: 1.5rem;
margin-top: 0.5rem;

also weight: 300, sorry for the confusion I know I said 400 previously.
(margin-top .25rem) on the h4 - the correct calculation is .5 * ([ heading line-height] - [counter height]) I think.

And we also need to bring text closer as the padding on it is taking the icon width into account

(Please use variables to express the above things, I've just done it quick and dirty here)

End result:

[huwshimi]

Thanks @lyubomir-popov I've updated it so it now looks like this:

[lyubomir-popov]

you need the mobile nudges in one of the calculations, suggestion in the code.

[lyubomir-popov]

Suggested change

	$bullet-margin-mobile: ((map-get($line-heights, h#{$i}-mobile) - $bullet-width-mobile) / 2) + map-get($nudges, h#{$i});
	$bullet-margin-mobile: ((map-get($line-heights, h#{$i}-mobile) - $bullet-width-mobile) / 2) + map-get($nudges, h#{$i}-mobile);

[lyubomir-popov]

also, if you do the above you need to add h5 as an entry in the map and copy the value from h4. Otherwise you'd need to make an exception in the for loop logic.

[huwshimi]

I initially tried with the mobile nudges but for some reason the counters get moved quite significantly out of alignment:

Whereas using the non-mobile nudges they maintain their position for both mobile/non-mobile. I wonder if that's because the counter is inside the heading element which already applies the nudge to the padding. It looks like the counter would be in the right place if it was a sibling of the heading element.

[bartaz]

LGTM, thanks!

Fixed