beercss 3.13.2 → 3.13.3

package/src/cdn/helpers/reset.css

@@ -1,95 +1,95 @@
-* {
-  -webkit-tap-highlight-color: transparent;
-  position: relative;
-  vertical-align: middle;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-  border-radius: inherit;
-  box-sizing: border-box;
-}
-
-*::after,
-*::before {
-  all: unset;
-}
-
-body {
-  color: var(--on-surface);
-  background-color: var(--surface);
-  overflow-x: hidden;
-}
-
-label {
-  font-size: 0.75rem;
-  vertical-align: baseline;
-}
-
-a,
-b,
-i,
-span,
-strong,
-em,
-code {
-  vertical-align: baseline;
-}
-
-a,
-button,
-.button {
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  border: none;
-  font-family: inherit;
-  outline: inherit;
-  justify-content: center;
-}
-
-:is(nav, .tabs, .field) > a,
-button,
-.button,
-.chip,
-i,
-label {
-  user-select: none;
-}
-
-@media (pointer: fine) {
-  body ::-webkit-scrollbar,
-  body ::-webkit-scrollbar-thumb,
-  body ::-webkit-scrollbar-button {
-    background: none;
-    inline-size: 0.4rem;
-    block-size: 0.4rem;
-  }
-
-  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
-  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
-    background: var(--outline);
-    border-radius: 1rem;
-  }
-}
-
-:not(.grid, nav, .row) > :not(progress.max) + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*='margin'], .right, .left, .top, .bottom) {
-  margin-block-start: 1rem;
-}
-
-:has(> [class*='margin']) {
-  padding: 0.1px;
-}
-
-:is(a, button, .button, .chip):focus-visible {
-  outline: 0.125rem solid var(--primary);
-  outline-offset: 0.25rem;
-}
-
-:is(nav, .row, li).group > :focus-visible {
-  z-index: 1;
-}
-
-:is(button, .button, .chip) > :is(span, i, img, svg) {
-  pointer-events: none;
+* {
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  vertical-align: middle;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+*::after,
+*::before {
+  all: unset;
+}
+
+body {
+  color: var(--on-surface);
+  background-color: var(--surface);
+  overflow-x: hidden;
+}
+
+label {
+  font-size: 0.75rem;
+  vertical-align: baseline;
+}
+
+a,
+b,
+i,
+span,
+strong,
+em,
+code {
+  vertical-align: baseline;
+}
+
+a,
+button,
+.button {
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  font-family: inherit;
+  outline: inherit;
+  justify-content: center;
+}
+
+:is(nav, .tabs, .field) > a,
+button,
+.button,
+.chip,
+i,
+label {
+  user-select: none;
+}
+
+@media (pointer: fine) {
+  body ::-webkit-scrollbar,
+  body ::-webkit-scrollbar-thumb,
+  body ::-webkit-scrollbar-button {
+    background: none;
+    inline-size: 0.4rem;
+    block-size: 0.4rem;
+  }
+
+  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
+  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
+    background: var(--outline);
+    border-radius: 1rem;
+  }
+}
+
+:not(.grid, nav, .row) > :not(progress.max) + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*='margin'], .right, .left, .top, .bottom) {
+  margin-block-start: 1rem;
+}
+
+:has(> [class*='margin']) {
+  padding: 0.1px;
+}
+
+:is(a, button, .button, .chip):focus-visible {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+:is(nav, .row, li).group > :focus-visible {
+  z-index: 1;
+}
+
+:is(button, .button, .chip) > :is(span, i, img, svg) {
+  pointer-events: none;
 }

package/src/cdn/helpers/responsive.css

@@ -1,22 +1,22 @@
-.responsive {
-  inline-size: -webkit-fill-available;
-  inline-size: -moz-available;
-}
-
-@media only screen and (max-width: 600px) {
-  :is(.m, .l):not(.s) {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 601px) and (max-width: 992px) {
-  :is(.s, .l):not(.m) {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  :is(.m, .s):not(.l) {
-    display: none !important;
-  }
-}
+.responsive {
+  inline-size: -webkit-fill-available;
+  inline-size: -moz-available;
+}
+
+@media only screen and (max-width: 600px) {
+  :is(.m, .l):not(.s) {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 992px) {
+  :is(.s, .l):not(.m) {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 993px) {
+  :is(.m, .s):not(.l) {
+    display: none !important;
+  }
+}

package/src/cdn/helpers/ripples.css

@@ -1,34 +1,34 @@
-.ripple {
-  --_duration: 600ms;
-}
-
-.fast-ripple {
-  --_duration: 200ms;
-}
-
-.slow-ripple {
-  --_duration: 1800ms;
-}
-
-.ripple-js {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.ripple-js > div {
-  position: absolute;
-  border-radius: 50%;
-  background: currentColor;
-  opacity: 0.3;
-  transform: scale(0);
-  animation: to-ripple var(--_duration) linear;
-}
-
-@keyframes to-ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
+.ripple {
+  --_duration: 600ms;
+}
+
+.fast-ripple {
+  --_duration: 200ms;
+}
+
+.slow-ripple {
+  --_duration: 1800ms;
+}
+
+.ripple-js {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.ripple-js > div {
+  position: absolute;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+  transform: scale(0);
+  animation: to-ripple var(--_duration) linear;
+}
+
+@keyframes to-ripple {
+  to {
+    transform: scale(4);
+    opacity: 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`;
+  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);
 }

package/src/cdn/helpers/scrolls.css

@@ -1,8 +1,8 @@
-.scroll {
-  overflow: auto;
-  min-inline-size: 0;
-}
-
-.no-scroll {
-  overflow: hidden;
-}
+.scroll {
+  overflow: auto;
+  min-inline-size: 0;
+}
+
+.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;
+}