feat(cxl-lumo-styles): add ordered-list-heavy class and story

conversionxl / aybolit

Lightweight web components library built with LitElement.

https://conversionxl.github.io/aybolit/

MIT License

7 stars 8 forks source link

feat(cxl-lumo-styles): add ordered-list-heavy class and story #276

Closed anoblet closed 1 year ago

anoblet commented 1 year ago

Clickup: https://app.clickup.com/t/861mnfcj4

Screenshot:

localhost_6006_iframe html_id=cxl-lumo-styles--sales-list viewMode=story

github-actions[bot] commented 1 year ago

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	33.83 KB (+0.76% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	25.17 KB (+1.07% 🔺)
packages/cxl-ui/pkg/dist-web/vendor.js	125.6 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	197.63 KB (+0.27% 🔺)

pawelkmpt commented 1 year ago

I'm also thinking about naming convention here. We should have something universal. .ordered-list-heavy came to my mind. WDYT @anoblet @lkraav

anoblet commented 1 year ago

Making this responsive is harder than I thought.

anoblet commented 1 year ago

I ditched the fluid typography effort. It should look good on mobile now.

I wasn't able to use ::marker since it is a mandatory inline-block element which doesn't allow for the use of background-color.

pawelkmpt commented 1 year ago

LGTM

@lkraav any doubts about current solution?

lkraav commented 1 year ago

I wasn't able to use ::marker since it is a mandatory inline-block element which doesn't allow for the use of background-color.

I'm confused about what this means. I'm reading it as background-color cannot be used with inline-block elements, but testing it, seems to work fine? See middle item :arrow_down: