beercss 3.13.2 → 4.0.0

package/src/cdn/helpers/ripples.ts

@@ -1,31 +1,31 @@
-import { queryAll, onWeak } from "../utils";
-
-function onPointerDownRipple(e: PointerEvent) {
-  updateRipple(e);
-}
-
-function updateRipple(e: PointerEvent) {
-  const element = e.currentTarget as HTMLElement;
-  const rect = element.getBoundingClientRect();
-  const diameter = Math.max(rect.width, rect.height);
-  const radius = diameter / 2;
-  const x = e.clientX - rect.left - radius;
-  const y = e.clientY - rect.top - radius;
-
-  const rippleContainer = document.createElement("div");
-  rippleContainer.className = "ripple-js";
-
-  const ripple = document.createElement("div");
-  ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
-  ripple.style.left = `${x}px`;
-  ripple.style.top = `${y}px`;
-  ripple.addEventListener("animationend", () => { rippleContainer.remove(); });
-
-  rippleContainer.appendChild(ripple);
-  element.appendChild(rippleContainer);
-}
-
-export function updateAllRipples() {
-  const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
-  for(let i=0; i<ripples.length; i++) onWeak(ripples[i], "pointerdown", onPointerDownRipple);
+import { queryAll, onWeak } from "../utils";
+
+function onPointerDownRipple(e: PointerEvent) {
+  updateRipple(e);
+}
+
+function updateRipple(e: PointerEvent) {
+  const element = e.currentTarget as HTMLElement;
+  const rect = element.getBoundingClientRect();
+  const diameter = Math.max(rect.width, rect.height);
+  const radius = diameter / 2;
+  const x = e.clientX - rect.left - radius;
+  const y = e.clientY - rect.top - radius;
+
+  const rippleContainer = document.createElement("div");
+  rippleContainer.className = "ripple-js";
+
+  const ripple = document.createElement("div");
+  ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
+  ripple.style.left = `${x}px`;
+  ripple.style.top = `${y}px`;
+  onWeak(ripple, "animationend", () => { rippleContainer.remove(); });
+
+  rippleContainer.appendChild(ripple);
+  element.appendChild(rippleContainer);
+}
+
+export function updateAllRipples() {
+  const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
+  for(let i=0; i<ripples.length; i++) onWeak(ripples[i], "pointerdown", onPointerDownRipple);
 }

package/src/cdn/helpers/scrolls.css

@@ -1,8 +1,7 @@
-.scroll {
-  overflow: auto;
-  min-inline-size: 0;
-}
-
-.no-scroll {
-  overflow: hidden;
-}
+.scroll {
+  overflow: auto;
+}
+
+.no-scroll {
+  overflow: hidden;
+}

package/src/cdn/helpers/shadows.css

@@ -1,23 +1,23 @@
-.shadow {
-  background-color: #00000050;
-}
-
-:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
-  background-color: transparent !important;
-}
-
-.left-shadow {
-  background-image: linear-gradient(to right, black, transparent) !important;
-}
-
-.right-shadow {
-  background-image: linear-gradient(to left, black, transparent) !important;
-}
-
-.bottom-shadow {
-  background-image: linear-gradient(to top, black, transparent) !important;
-}
-
-.top-shadow {
-  background-image: linear-gradient(to bottom, black, transparent) !important;
-}
+.shadow {
+  background-color: #00000050;
+}
+
+:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
+  background-color: transparent !important;
+}
+
+.left-shadow {
+  background-image: linear-gradient(to right, black, transparent) !important;
+}
+
+.right-shadow {
+  background-image: linear-gradient(to left, black, transparent) !important;
+}
+
+.bottom-shadow {
+  background-image: linear-gradient(to top, black, transparent) !important;
+}
+
+.top-shadow {
+  background-image: linear-gradient(to bottom, black, transparent) !important;
+}

package/src/cdn/helpers/sizes.css

@@ -1,45 +1,45 @@
-[class*=-width] {
-  max-inline-size: 100%;
-}
-
-.auto-width {
-  inline-size: auto;
-}
-
-.small-width {
-  inline-size: 12rem !important;
-}
-
-.medium-width {
-  inline-size: 24rem !important;
-}
-
-.large-width {
-  inline-size: 36rem !important;
-}
-
-.auto-height {
-  block-size: auto;
-}
-
-.small-height {
-  block-size: 12rem !important;
-}
-
-.medium-height {
-  block-size: 24rem !important;
-}
-
-.large-height {
-  block-size: 36rem !important;
-}
-
-.wrap {
-  display: block;
-  white-space: normal;
-}
-
-.no-wrap:not(menu) {
-  display: flex;
-  white-space: nowrap;
-}
+[class*=-width] {
+  max-inline-size: 100%;
+}
+
+.auto-width {
+  inline-size: auto;
+}
+
+.small-width {
+  inline-size: 12rem !important;
+}
+
+.medium-width {
+  inline-size: 24rem !important;
+}
+
+.large-width {
+  inline-size: 36rem !important;
+}
+
+.auto-height {
+  block-size: auto;
+}
+
+.small-height {
+  block-size: 12rem !important;
+}
+
+.medium-height {
+  block-size: 24rem !important;
+}
+
+.large-height {
+  block-size: 36rem !important;
+}
+
+.wrap {
+  display: block;
+  white-space: normal;
+}
+
+.no-wrap:not(menu) {
+  display: flex;
+  white-space: nowrap;
+}

package/src/cdn/helpers/spaces.css

@@ -1,19 +1,19 @@
-.tiny-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
-  block-size: 0.5rem;
-}
-
-:is(.space, .small-space):not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
-  block-size: 1rem;
-}
-
-.medium-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
-  block-size: 2rem;
-}
-
-.large-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
-  block-size: 3rem;
-}
-
-.extra-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
-  block-size: 4rem;
-}
+.tiny-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
+  block-size: 0.5rem;
+}
+
+:is(.space, .small-space):not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
+  block-size: 1rem;
+}
+
+.medium-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
+  block-size: 2rem;
+}
+
+.large-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
+  block-size: 3rem;
+}
+
+.extra-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
+  block-size: 4rem;
+}