search

pennions / JESS

Stylesheet influenced by Pico CSS and Fluent UI from microsoft
https://pennions.github.io/JESS
MIT License
2 stars 0 forks source link

Utility classes for border-radius #30

Open antonieIPR opened 1 year ago

antonieIPR commented 1 year ago

Sometimes we need to add a border-radius to an element that is not a <button> to blend in with the rest of the UI. One or more labels/tags/categories on a list of blog posts for instance. Or like in the example below: line numbers for buses.

image

jelmerveen commented 1 year ago

Seems to me like a good feature to create 'badge' styling. What is the border radius you use?

https://learn.microsoft.com/en-us/fluent-ui/web-components/components/badge?pivots=typescript

jelmerveen commented 1 year ago

After a little digging these are the fluent standards for border-radius:

  borderRadiusNone: '0',
  borderRadiusSmall: '2px',
  borderRadiusMedium: '4px',
  borderRadiusLarge: '6px',
  borderRadiusXLarge: '8px',
  borderRadiusCircular: '10000px',
antonieIPR commented 1 year ago

For now I used just 5px hardcoded, but the FluentUI list above seems to make sense.