beercss / beercss

Build material design interfaces in record time... without stress for devs... πŸΊπŸ’›
https://www.beercss.com
MIT License
937 stars 47 forks source link

Lists look bad #284

Closed janat08 closed 3 weeks ago

janat08 commented 1 month ago

I don't know what it is that is actually wrong with them. I must've asked the question, but is it really up to spec. I may have been more like considering clickable lists as the proper list for material, but the basic one sometimes has me comparing it against gmail.

fabessen commented 1 month ago

Well at least i have to admit that i im not really sure how to style them like in Material 3 documentation: image https://m3.material.io/components/lists/overview#0519c023-de10-4062-9e4d-4c6918245b1a

Would be really nice if someone could provide a codepen etc. example πŸ™‚πŸ‘

kennymingt commented 1 month ago

I found that adding padding and no-margin classes makes them look better. Also wave to get the hover effect.

Screenshot 2024-04-11 at 1 32 12β€―PM
 <div class="padding no-margin row wave">
      <i class="light-green-text">check_circle</i>
      <div class="max"><div>hi</div>Some text here</div>
      <a>
          <i>edit</i>
      </a>
      <a>
          <i>delete</i>
      </a>
  </div>
  <div class="padding no-margin row wave">
      <i class="light-green-text">check_circle</i>
      <div class="max">Some text here</div>
      <a>
          <i>edit</i>
      </a>
      <a>
          <i>delete</i>
      </a>
  </div>
  <div class="padding no-margin row wave">
      <i class="light-green-text">check_circle</i>
      <div class="max">Some text here</div>
      <a>
          <i>edit</i>
      </a>
      <a>
          <i>delete</i>
      </a>
  </div>
fabessen commented 1 month ago

Cool. Thanks a lot πŸ‘

leonardorafael commented 1 month ago

Nice, I will add some examples on next release.