Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modernize and simplify CSS #74

Draft
wants to merge 12 commits into
base: next
Choose a base branch
from
Draft

Modernize and simplify CSS #74

wants to merge 12 commits into from

Conversation

kytta
Copy link
Owner

@kytta kytta commented Jul 18, 2023

This PR remakes the whole CSS used in the package.

  • old position: absolute hacks get replaced with Flexbox
  • instead of background-image, icons use mask-image. This allows us to change their colour based on button text colour
  • the variables and calc()s aren't compiled away any more, but exposed for customizability. This makes the CSS a bit heavier, but it allows very easy customization
  • instead of multiple PostCSS plugins, Lightning CSS is now used to minify styles. It's way faster and more effective

Overall, the appearance of the buttons has become way more customizable. One can make the buttons vertical with a single line of CSS, change their radius and size, and more!

@kytta kytta self-assigned this Jul 18, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 18, 2023

size-limit report 📦

Path Size
./dist/shareon.min.css 5.44 KB (+0.38% 🔺)
./dist/shareon.es.js 879 B (0%)

@kytta kytta mentioned this pull request Jul 18, 2023
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant