beercss 3.11.28 on Node.js NPM

CHANGELOG 3.11.28

🚀 Added

Added navigation rail/bar from "M3 expressive" (#460, #461)
Added shape element from "M3 expressive" (all 35 shapes)
Updated shape size, to be compatible with nav

🩹 Fixed

Fixed extend button when using <img class="responsive"> inside it.
Fixed horizontal scroll on textarea (#467)
Fixed some scoped version issues (#466, #463)
Fixed link butons inside nav (#471)
Fixed menu open on iOS (#474)
Fixed menu triggered by data-ui (#479)
Fixed horizontal scroll on main layouts on iOS (#478)
Fixed a bug caused by a fix for iOS (#485)
Fixed label on small fields (not too small) (#483)
Fixed select option on Firefox (#487)
Fixed menu showing on not shape element (#489)

⚠️ Breaking changes

Navigation drawer was deprecated on "M3 Expressive" use list instead
Refactored main layout to use flexbox grid

Navigation drawer was deprecated on "M3 expressive" use `list` instead

Before:

<nav class="drawer">
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
</nav>

<nav class="drawer">
  <a href="/path">
    <i>search</i>
    <div>Search</div>
  </a>
</nav>

After:

<ul class="list">
  <li class="wave round">
    <i>search</i>
    <div>Search</div>
  </li>
</ul>

<ul class="list">
  <li class="wave round">
    <a href="/path">
      <i>search</i>
      <div>Search</div>
    </a>
  </li>
</ul>

Added navigation rail/bar from "M3 expressive"

Navigation rail (normal/expanded)

<nav class="left">...</nav>
<nav class="left max">...</nav>

Flexible navigation bar (normal/expanded)

<nav class="bottom">...</nav>
<nav class="bottom max">...</nav>

Refactored main layout to use flexbox grid

Now we use the code below. This is how the majority M3 projects looks like. Only the <main> element is required. Old projects that uses a nav.top/nav.bottom and nav.left/nav.right at same time, could be impacted.

<body>
  <nav class="left">LEFT</nav>
  <nav class="right">RIGHT</nav>
  <nav class="top">TOP</nav>
  <nav class="bottom">BOTTOM</nav>
  <header>HEADER</header>
  <main>MAIN</main>
  <footer>FOOTER</footer>
</body>

Added `shape` element from "M3 expressive" (all 35 shapes)

<div class="shape loading-indicator"></div>

<div class="shape loading-indicator">
  <img class="responsive" src="/favicon.png">
</div>

<div class="small-witdh small-height">
  <div class="shape loading-indicator max"></div>
</div>

beercss 3.11.28 v3.11.28 on Node.js NPM