https://github.com/tomashubelbauer/list-sections-groups

Implementing a design idea I had
https://github.com/tomashubelbauer/list-sections-groups

css figma

Last synced: about 1 month ago
JSON representation

Implementing a design idea I had

• Host: GitHub
• URL: https://github.com/tomashubelbauer/list-sections-groups
• Owner: TomasHubelbauer
• Created: 2022-06-14T19:32:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-16T21:49:49.000Z (over 2 years ago)
• Last Synced: 2024-05-02T03:55:02.312Z (9 months ago)
• Topics: css, figma
• Language: JavaScript
• Homepage: https://tomashubelbauer.github.io/list-sections-groups
• Size: 3.91 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# List Sections/Groups

This repository implements this Figma design:

https://www.figma.com/file/UuscKQ4Gsp5zkqLjgaQzTf/List-with-grouped-items

I couldn't find a way to make `text-ellipsis` work with `text-orientation` so I

hacked around it using `aspect-ratio` of 1 and `height` of `100%` to get a width

matching the height and using `transform` to rotate the text 90 degress. This

way the text is ellipsised horizontally which works and rotated without the use

of `text-orientation` which would otherwise break the ellipsisation.