beercss 3.2.0

v3.2.7

on Node.js NPM

CHANGELOG 3.2.7

🚀 Added

• Added no-round, small-round, round|medium-round, large-round helpers
• Added max helper to tooltip element to do the rich tooltips of MD3 (https://m3.material.io/components/tooltips/overview)
• Added inverse-surface, inverse-primary, inverse-on-primary and inverse-link helpers (https://m3.material.io/styles/color/the-color-system/color-roles#22be76ec-3322-4a3b-9db3-574cf49c106b)
• Added default color to tooltip and toast elements (https://m3.material.io/components/tooltips/specs and https://m3.material.io/components/snackbar/specs)

🩹 Fixed

• Fixed some responsive bugs (#145)
• Fixed label up on input numbers (#140)
• Fixed disabled on button links
• Fixed dialog inside navs (#152)
• Fixed label overlap on hidden fields (#154)
• Fixed menu trigger when use data-ui (#155)
• Adjusting extended buttons
• Fixed label up on input type datetime-local (#157)

⚠️ Breaking changes

• Renamed dropdown to <menu> to be more semantic (https://m3.material.io/components/menus/overview)
• The default <button> is now rounded (#142)
• Using system fonts instead Roboto Flex (#132 and #86)
• Renamed modal to <dialog> to be more semantic (#54)

🚩 Examples

// before
<div class="dropdown">
  <a>Item 1</a>
  <a>Item 2</a>
  <a>Item 3</a>
</div>

// after
<menu>
  <a>Item 1</a>
  <a>Item 2</a>
  <a>Item 3</a>
</menu>

// before
<div class="modal">
  <h5>Title</h5>
  <p>Some text here</p>
</div>

// after
<dialog>
  <h5>Title</h5>
  <p>Some text here</p>
</dialog>

// rich tooltip example, using max helper
<div class="tooltip max">
  <h5>Title</h5>
  <p>Some text here</p>
  <nav>
    <button>Button</button>
  </nav>
</div>

// new round helpers example
<article class="no-round">...</article>
<article class="small-round">...</article>
<article class="round|medium-round">...</article>
<article class="large-round">...</article>

/* if you want to use roboto flex or any other custom font use this css */
@import "https://fonts.googleapis.com/css2?family=Roboto Flex";

:root {
  --font: "Roboto Flex";
}