vanilla-framework
vanilla-framework copied to clipboard
canonical
Stepped counter size
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.jsonshould 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
@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:
