💄 tweak CSS for list icons #3148
Conversation
- on safari the ordered list items don't seem to line up well (ugly hack :( ) - the icons (according to figma) should actually be 24px x 24px, yet they seemed to be a bit smaller (18x18), with these changes it should reflect the design closer.
🦋 Changeset detectedLatest commit: 2d82337 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Storybook demoEndringer til review: 3ab41c4fd7 | 90 komponenter | 141 stories |
@navikt/core/css/list.css
Outdated
| @@ -77,7 +94,7 @@ | |||
| } | |||
|
|
|||
| .navds-list ol li { | |||
| padding-left: var(--a-spacing-1); | |||
| padding-left: var(--a-spacing-1-alt); | |||
There was a problem hiding this comment.
This increases the spacing between the number and the text. Is that intended?
There was a problem hiding this comment.
This was in the set of changes to make things look similar across all devices, there seems to be a minimum space that I can't shorten on safari :(, it's pretty close to what we currently have, so I only increased the space for every other browser with this.
We can also remove the hack code here (safari CSS) if we want the other alternative (setting content + counter())? Does it solve everything well without drawbacks? (if so, then it's much better than this one)
There was a problem hiding this comment.
Didn't see any drawbacks when testing counter() yesterday, but need to test it properly.
JulianNymark
changed the title
|
If you create a changeset we could probably just merge this and create a new PR for the counter() stuff. What do you think? |
sounds good 👍 , this PR will only be the single change to font-size then (also some story tweaks to showcase changes better (horizontalSplitIcon is one of the larger ones, the fork is one of the smaller ones on width), title was also nice to show for alignment in that story. |
fixes