Px/em to rem

[ohp-inmeta]

Update all css-files to use rem (where appropriate) Added border-box to all elements

Describe your changes

• Replace px and em with rem where appropriate. Borders, outline, max- and min-widths and such are still in px, but font-sizes, paddings/margins, sizes, etc are now in rem.
• Enforce box-sizing: border-box; on all elements, unless set explicitly

Checklist before requesting a review

• [x] I have performed a self-review and test of my code
• [x] I have added label to the PR (major, minor or patch)
• [ ] If new component: Is story for component created in stories-folder?
• [ ] If new component: Is tsx-file import added to packages/react/index.tsx?
• [ ] If new component: Is css-file added to packages/css/index.css?

[github-actions[bot]]

Please set a versioning label of either major, minor, or patch to the pull request.

[aurorascharff]

Testet branchen i eget prosjekt som beskrevet her:

https://github.com/miljodir/md-components/blob/main/README.md#teste-endringer-i-eget-prosjekt

Ting ser likt ut som før for min del :)

[kajsaeggum]

Nå som border-box er innført (🥳 ), er det en del css som trengs å ryddes opp i.

F.eks. i select-komponent settes bredden på dropdown til (select.css linje 118): width: calc(100% - 4px); /* Full width minus border-width */ Dette måtte til før, for at knappen og dropdown skulle være like bred, men nå bør det bare stå 100%, for å unngå dette:

Et kjapt søk på "calc" i repoet viser flere steder som har 100% - X, som jeg mistenker er av samme grunn.

[ohp-inmeta]

@kajsaeggum Det skal jeg få kikka på!