beercss 3.13.2 → 3.13.3

package/src/cdn/elements/badges.css

@@ -1,75 +1,75 @@
-.badge {
-  --_x: 0;
-  --_y: -100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  font-size: 0.6875rem;
-  text-transform: none;
-  z-index: 2;
-  padding: 0 0.25rem;
-  min-block-size: 1rem;
-  min-inline-size: 1rem;
-  background-color: var(--error);
-  color: var(--on-error);
-  line-height: normal;
-  border-radius: 1rem;
-  inset: 50% auto auto 50%;
-  transform: translate(var(--_x, 50%), var(--_y, -50%));
-  font-family: var(--font);
-}
-
-.badge.top {
-  --_y: -100%;
-}
-
-.badge.bottom {
-  --_y: 0;
-}
-
-.badge.left {
-  --_x: -100%;
-}
-
-.badge.right {
-  --_x: 0;
-}
-
-.badge.border {
-  border-color: var(--error);
-  color: var(--error);
-  background-color: var(--surface);
-}
-
-.badge:is(.circle, .square) {
-  text-align: center;
-  inline-size: auto;
-  block-size: auto;
-  padding: 0 0.25rem;
-  border-radius: 1rem;
-}
-
-.badge.square {
-  border-radius: 0;
-}
-
-.badge.min > * {
-  display: none;
-}
-
-.badge.min {
-  clip-path: circle(18.75% at 50% 50%);
-}
-
-nav:is(.left, .right, .top, .bottom) > a > .badge,
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
-  inset: 1rem auto auto 50%;
-}
-
-.badge.none {
-  inset: auto !important;
-  transform: none;
-  position: relative;
-  margin: 0 0.125rem;
+.badge {
+  --_x: 0;
+  --_y: -100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  font-size: 0.6875rem;
+  text-transform: none;
+  z-index: 2;
+  padding: 0 0.25rem;
+  min-block-size: 1rem;
+  min-inline-size: 1rem;
+  background-color: var(--error);
+  color: var(--on-error);
+  line-height: normal;
+  border-radius: 1rem;
+  inset: 50% auto auto 50%;
+  transform: translate(var(--_x, 50%), var(--_y, -50%));
+  font-family: var(--font);
+}
+
+.badge.top {
+  --_y: -100%;
+}
+
+.badge.bottom {
+  --_y: 0;
+}
+
+.badge.left {
+  --_x: -100%;
+}
+
+.badge.right {
+  --_x: 0;
+}
+
+.badge.border {
+  border-color: var(--error);
+  color: var(--error);
+  background-color: var(--surface);
+}
+
+.badge:is(.circle, .square) {
+  text-align: center;
+  inline-size: auto;
+  block-size: auto;
+  padding: 0 0.25rem;
+  border-radius: 1rem;
+}
+
+.badge.square {
+  border-radius: 0;
+}
+
+.badge.min > * {
+  display: none;
+}
+
+.badge.min {
+  clip-path: circle(18.75% at 50% 50%);
+}
+
+nav:is(.left, .right, .top, .bottom) > a > .badge,
+nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
+  inset: 1rem auto auto 50%;
+}
+
+.badge.none {
+  inset: auto !important;
+  transform: none;
+  position: relative;
+  margin: 0 0.125rem;
 }

package/src/cdn/elements/bars.css

@@ -1,91 +1,91 @@
-header,
-footer {
-  display: grid;
-  align-content: center;
-  border-radius: 0;
-  padding: 0 1rem;
-}
-
-:is(dialog, article) > :is(header, footer) {
-  padding-inline: 0;
-  inset: 0;
-}
-
-header {
-  min-block-size: 4rem;
-}
-
-footer {
-  min-block-size: 5rem;
-}
-
-:is(header, footer, menu > *).fixed {
-  position: sticky;
-  inset: 0;
-  z-index: 11;
-  background-color: inherit;
-}
-
-header.fixed {
-  inset: calc(-1 * var(--_padding)) 0 0 0;
-  margin-block-start: calc(-1 * var(--_padding));
-}
-
-footer.fixed {
-  inset: 0 0 calc(-1 * var(--_padding)) 0;
-  margin-block-end: calc(-1 * var(--_padding));
-}
-
-:is(header, footer).fixed.min {
-  margin-inline: auto;
-}
-
-dialog > :is(header, footer) {
-  background: none;
-}
-
-dialog > :is(header, footer).fixed {
-  background-color: inherit;
-}
-
-:is(main, header, footer, section).responsive {
-  max-inline-size: min(100vw, 75rem);
-  margin: 0 auto;
-}
-
-:is(main, header, footer, section).responsive.max {
-  max-inline-size: none;
-}
-
-:has(> main) > :is(header, footer).fixed {
-  transform: none;
-  box-sizing: content-box;
-  position: sticky;
-  inset: 0;
-  z-index: 12;
-}
-
-:has(> main) > header {
-  padding-block-start: var(--top);
-}
-
-:has(> main) > footer {
-  padding-block-end: var(--bottom);
-}
-
-nav.top ~ header,
-nav.bottom ~ footer {
-  padding-block: 0;
-}
-
-nav.top ~ header.fixed {
-  inset-block: calc(var(--top) + 4.5rem) 0;
-}
-
-nav.bottom ~ footer.fixed {
-  inset-block: 0 calc(var(--bottom) + 4.5rem);
-}
-
-:is(nav, .row) > header {
-  background-color: inherit;
-}
+header,
+footer {
+  display: grid;
+  align-content: center;
+  border-radius: 0;
+  padding: 0 1rem;
+}
+
+:is(dialog, article) > :is(header, footer) {
+  padding-inline: 0;
+  inset: 0;
+}
+
+header {
+  min-block-size: 4rem;
+}
+
+footer {
+  min-block-size: 5rem;
+}
+
+:is(header, footer, menu > *).fixed {
+  position: sticky;
+  inset: 0;
+  z-index: 11;
+  background-color: inherit;
+}
+
+header.fixed {
+  inset: calc(-1 * var(--_padding)) 0 0 0;
+  margin-block-start: calc(-1 * var(--_padding));
+}
+
+footer.fixed {
+  inset: 0 0 calc(-1 * var(--_padding)) 0;
+  margin-block-end: calc(-1 * var(--_padding));
+}
+
+:is(header, footer).fixed.min {
+  margin-inline: auto;
+}
+
+dialog > :is(header, footer) {
+  background: none;
+}
+
+dialog > :is(header, footer).fixed {
+  background-color: inherit;
+}
+
+:is(main, header, footer, section).responsive {
+  max-inline-size: min(100vw, 75rem);
+  margin: 0 auto;
+}
+
+:is(main, header, footer, section).responsive.max {
+  max-inline-size: none;
+}
+
+:has(> main) > :is(header, footer).fixed {
+  transform: none;
+  box-sizing: content-box;
+  position: sticky;
+  inset: 0;
+  z-index: 12;
+}
+
+:has(> main) > header {
+  padding-block-start: var(--top);
+}
+
+:has(> main) > footer {
+  padding-block-end: var(--bottom);
+}
+
+nav.top ~ header,
+nav.bottom ~ footer {
+  padding-block: 0;
+}
+
+nav.top ~ header.fixed {
+  inset-block: calc(var(--top) + 4.5rem) 0;
+}
+
+nav.bottom ~ footer.fixed {
+  inset-block: 0 calc(var(--bottom) + 4.5rem);
+}
+
+:is(nav, .row) > header {
+  background-color: inherit;
+}

package/src/cdn/elements/buttons.css

@@ -1,106 +1,106 @@
-.button,
-button {
-  --_padding: 1rem;
-  --_size: 2.5rem;
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  block-size: var(--_size);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--on-primary);
-  padding: 0 var(--_padding);
-  background-color: var(--primary);
-  margin: 0 0.5rem;
-  border-radius: var(--_size);
-  transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
-  user-select: none;
-  gap: 0.5rem;
-  line-height: normal;
-}
-
-:is(button, .button).small {
-  --_size: 2rem;
-  --_padding: 0.75rem;
-}
-
-:is(button, .button).large {
-  --_size: 3rem;
-  --_padding: 1.25rem;
-}
-
-:is(.button, button):is(.extra, .extend) {
-  --_size: 3.5rem;
-  font-size: 1rem;
-  --_padding: 1.5rem;
-}
-
-:is(button, .button):is(.square, .circle) {
-  --_padding: 0;
-}
-
-:is(button, .button).border {
-  border-color: var(--outline-variant);
-  color: var(--primary);
-}
-
-.extend > span {
-  display: none;
-}
-
-.extend:is(:hover, .active) {
-  inline-size: auto;
-  --_padding: 1.5rem;
-  padding: 0 var(--_padding);
-}
-
-.extend:is(:hover, .active) > i + span {
-  display: inherit;
-  margin-inline-start: var(--_padding);
-}
-
-.extend:is(:hover, .active) > :is(img, svg) + span {
-  display: inherit;
-  margin-inline-start: calc(1rem + var(--_padding));
-}
-
-:is(.button, button)[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.button[disabled] {
-  pointer-events: none;
-}
-
-:is(.button, button)[disabled]::before,
-:is(.button, button)[disabled]::after {
-  display: none;
-}
-
-:is(.button, button):not(.chip, .extend).fill {
-  background-color: var(--secondary-container) !important;
-  color: var(--on-secondary-container) !important;
-}
-
-:is(.button, button):not(.chip, .extend).active {
-  background-color: var(--primary-container);
-  color: var(--on-primary-container);
-}
-
-:is(.button, button):not(.chip, .extend).fill.active {
-  background-color: var(--secondary) !important;
-  color: var(--on-secondary) !important;
-}
-
-:is(.button, button):not(.chip, .extend).border.active {
-  background-color: var(--inverse-surface) !important;
-  color: var(--inverse-on-surface) !important;
-  border-color: var(--inverse-surface) !important;
-}
-
-:is(.button, button):not(.chip):active,
-:is(.button, button):not(.chip).active {
-  border-radius: 0.5rem !important;
-}
+.button,
+button {
+  --_padding: 1rem;
+  --_size: 2.5rem;
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--_size);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--on-primary);
+  padding: 0 var(--_padding);
+  background-color: var(--primary);
+  margin: 0 0.5rem;
+  border-radius: var(--_size);
+  transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
+  user-select: none;
+  gap: 0.5rem;
+  line-height: normal;
+}
+
+:is(button, .button).small {
+  --_size: 2rem;
+  --_padding: 0.75rem;
+}
+
+:is(button, .button).large {
+  --_size: 3rem;
+  --_padding: 1.25rem;
+}
+
+:is(.button, button):is(.extra, .extend) {
+  --_size: 3.5rem;
+  font-size: 1rem;
+  --_padding: 1.5rem;
+}
+
+:is(button, .button):is(.square, .circle) {
+  --_padding: 0;
+}
+
+:is(button, .button).border {
+  border-color: var(--outline-variant);
+  color: var(--primary);
+}
+
+.extend > span {
+  display: none;
+}
+
+.extend:is(:hover, .active) {
+  inline-size: auto;
+  --_padding: 1.5rem;
+  padding: 0 var(--_padding);
+}
+
+.extend:is(:hover, .active) > i + span {
+  display: inherit;
+  margin-inline-start: var(--_padding);
+}
+
+.extend:is(:hover, .active) > :is(img, svg) + span {
+  display: inherit;
+  margin-inline-start: calc(1rem + var(--_padding));
+}
+
+:is(.button, button)[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button[disabled] {
+  pointer-events: none;
+}
+
+:is(.button, button)[disabled]::before,
+:is(.button, button)[disabled]::after {
+  display: none;
+}
+
+:is(.button, button):not(.chip, .extend).fill {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+}
+
+:is(.button, button):not(.chip, .extend).active {
+  background-color: var(--primary-container);
+  color: var(--on-primary-container);
+}
+
+:is(.button, button):not(.chip, .extend).fill.active {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+
+:is(.button, button):not(.chip, .extend).border.active {
+  background-color: var(--inverse-surface) !important;
+  color: var(--inverse-on-surface) !important;
+  border-color: var(--inverse-surface) !important;
+}
+
+:is(.button, button):not(.chip):active,
+:is(.button, button):not(.chip).active {
+  border-radius: 0.5rem !important;
+}

package/src/cdn/elements/cards.css

@@ -1,27 +1,27 @@
-article {
-  --_padding: 1rem;
-  box-shadow: var(--elevate1);
-  background-color: var(--surface-container-low);
-  color: var(--on-surface);
-  padding: var(--_padding);
-  border-radius: 0.75rem;
-  display: block;
-  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
-}
-
-article.small {
-  block-size: 12rem;
-}
-
-article.medium {
-  block-size: 20rem;
-}
-
-article.large {
-  block-size: 32rem;
-}
-
-article.border {
-  box-shadow: none;
-  border: 0.0625rem solid var(--outline-variant);
+article {
+  --_padding: 1rem;
+  box-shadow: var(--elevate1);
+  background-color: var(--surface-container-low);
+  color: var(--on-surface);
+  padding: var(--_padding);
+  border-radius: 0.75rem;
+  display: block;
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
+}
+
+article.small {
+  block-size: 12rem;
+}
+
+article.medium {
+  block-size: 20rem;
+}
+
+article.large {
+  block-size: 32rem;
+}
+
+article.border {
+  box-shadow: none;
+  border: 0.0625rem solid var(--outline-variant);
 }

package/src/cdn/elements/chips.css

@@ -1,38 +1,38 @@
-.chip {
-  --_padding: 0.75rem;
-  --_size: 2rem;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  block-size: var(--_size);
-  min-inline-size: var(--_size);
-  font-size: 0.875rem;
-  font-weight: 500;
-  background-color: transparent;
-  border: 0.0625rem solid var(--outline-variant);
-  color: var(--on-surface-variant);
-  padding: 0 var(--_padding);
-  margin: 0 0.5rem;
-  text-transform: none;
-  border-radius: 0.5rem;
-  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
-  user-select: none;
-  gap: 0.5rem;
-  line-height: normal;
-  letter-spacing: normal;
-}
-
-.chip.medium {
-  --_size: 2.5rem;
-  --_padding: 1rem;
-}
-
-.chip.large {
-  --_padding: 1.25rem;
-  --_size: 3rem;
-}
-
-.chip.fill {
-  border: none;
-}
+.chip {
+  --_padding: 0.75rem;
+  --_size: 2rem;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--_size);
+  min-inline-size: var(--_size);
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: transparent;
+  border: 0.0625rem solid var(--outline-variant);
+  color: var(--on-surface-variant);
+  padding: 0 var(--_padding);
+  margin: 0 0.5rem;
+  text-transform: none;
+  border-radius: 0.5rem;
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
+  user-select: none;
+  gap: 0.5rem;
+  line-height: normal;
+  letter-spacing: normal;
+}
+
+.chip.medium {
+  --_size: 2.5rem;
+  --_padding: 1rem;
+}
+
+.chip.large {
+  --_padding: 1.25rem;
+  --_size: 3rem;
+}
+
+.chip.fill {
+  border: none;
+}