https://github.com/oevgeny/css-vars-traits-demo

Versatile File Input Styling with CSS Variables
https://github.com/oevgeny/css-vars-traits-demo

css css-vars

Last synced: about 1 month ago
JSON representation

Versatile File Input Styling with CSS Variables

• Host: GitHub
• URL: https://github.com/oevgeny/css-vars-traits-demo
• Owner: OEvgeny
• Created: 2024-01-06T00:49:56.000Z (about 1 year ago)
• Default Branch: gh-pages
• Last Pushed: 2024-01-08T17:58:49.000Z (about 1 year ago)
• Last Synced: 2024-10-26T09:43:18.136Z (3 months ago)
• Topics: css, css-vars
• Language: CSS
• Homepage: https://oevgeny.github.io/css-vars-traits-demo/
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Versatile Component Styling with CSS Variables

This is my take on using CSS variables to create versatile styling for web components. It uses three types of classes:

- `file-input`: a component class that defines the basic structure and functionality of a file input element.

- `*-var`: a trait class that provides variables with optional defaults along with necessary modifications for the css properties, such as colors, fonts, borders, etc.

- `primary, accent, thick ...`: modifier classes that change the values of the variables provided by the trait class, allowing for different variations of the component