beercss 2.3.0 → 3.0.1

package/src/cdn/helpers/directions.css

@@ -1,9 +1,7 @@
-
-
 .horizontal {
   display: inline-flex;
   flex-direction: row !important;
-  gap: 16rem;
+  gap: 1rem;
   width: auto !important;
   max-width: none !important;
 }
@@ -19,11 +17,11 @@ button.vertical,
 .chip.vertical {
   display: inline-flex;
   flex-direction: column !important;
-  gap: 4rem;
+  gap: 0.25rem;
   height: auto !important;
   max-height: none !important;
-  padding-top: 8rem;
-  padding-bottom: 8rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .vertical > * {

package/src/cdn/helpers/dividers.css

@@ -2,19 +2,19 @@
 .small-divider,
 .medium-divider,
 .large-divider {
-  border-bottom: 1rem solid var(--outline);
+  border-bottom: 0.0625rem solid var(--outline);
   display: block;
   margin: 0 !important;
 }
 
 .medium-divider {
-  margin: 16rem 0 !important;
+  margin: 1rem 0 !important;
 }
 
 .large-divider {
-  margin: 24rem 0 !important;
+  margin: 1.5rem 0 !important;
 }
 
 .small-divider {
-  margin: 8rem 0 !important;
-}
+  margin: 0.5rem 0 !important;
+}

package/src/cdn/helpers/elevates.css

@@ -13,4 +13,4 @@
 
 .large-elevate {
   box-shadow: var(--elevate3) !important;
-}
+}

package/src/cdn/helpers/forms.css

@@ -1,5 +1,5 @@
 .round:not(img, video) {
-  border-radius: 32rem !important;
+  border-radius: 2rem !important;
 }
 
 .no-round {
@@ -7,41 +7,41 @@
 }
 
 .top-round {
-  border-radius: 32rem 32rem 0 0 !important;
+  border-radius: 2rem 2rem 0 0 !important;
 }
 
 .bottom-round {
-  border-radius: 0 0 32rem 32rem !important;
+  border-radius: 0 0 2rem 2rem !important;
 }
 
 .left-round {
-  border-radius: 32rem 0 0 32rem !important;
+  border-radius: 2rem 0 0 2rem !important;
 }
 
 .right-round {
-  border-radius: 0 32rem 32rem 0 !important;
+  border-radius: 0 2rem 2rem 0 !important;
 }
 
 .top-round.left-round {
-  border-radius: 32rem 32rem 0 32rem !important;
+  border-radius: 2rem 2rem 0 !important;
 }
 
 .top-round.right-round {
-  border-radius: 32rem 32rem 32rem 0 !important;
+  border-radius: 2rem 2rem 2rem 0 !important;
 }
 
 .bottom-round.left-round {
-  border-radius: 32rem 0 32rem 32rem !important;
+  border-radius: 2rem 0 2rem 2rem !important;
 }
 
 .bottom-round.right-round {
-  border-radius: 0 32rem 32rem 32rem !important;
+  border-radius: 0 2rem 2rem !important;
 }
 
 .circle:not(img, video),
 .square:not(img, video) {
-  height: 40rem;
-  width: 40rem;
+  height: 2.5rem;
+  width: 2.5rem;
   padding: 0;
 }
 
@@ -52,30 +52,30 @@
 
 .square.small:not(img, video),
 .circle.small:not(img, video) {
-  height: 32rem;
-  width: 32rem;
+  height: 2rem;
+  width: 2rem;
 }
 
 .square.large:not(img, video),
 .circle.large:not(img, video) {
-  height: 48rem;
-  width: 48rem;
+  height: 3rem;
+  width: 3rem;
 }
 
 .square.extra:not(img, video),
 .circle.extra:not(img, video) {
-  height: 56rem;
-  width: 56rem;
+  height: 3.5rem;
+  width: 3.5rem;
 }
 
 .square.round,
 .circle.round {
-  border-radius: 16rem !important;
+  border-radius: 1rem !important;
 }
 
-.border:not(table, .field) { 
+.border:not(table, .field) {
   box-sizing: border-box;
-  border: 1rem solid var(--outline);
+  border: 0.0625rem solid var(--outline);
   background-color: transparent;
   box-shadow: none;
-}
+}

package/src/cdn/helpers/margins.css

@@ -3,18 +3,18 @@
 }
 
 .tiny-margin {
-  padding: 4rem !important;
+  padding: 0.25rem !important;
 }
 
 .small-margin {
-  margin: 8rem !important;
+  margin: 0.5rem !important;
 }
 
 .medium-margin,
 .margin {
-  margin: 16rem !important;
+  margin: 1rem !important;
 }
 
 .large-margin {
-  margin: 24rem !important;
-}
+  margin: 1.5rem !important;
+}

package/src/cdn/helpers/opacities.css

@@ -4,4 +4,4 @@
 
 .opacity {
   opacity: 1;
-}
+}

package/src/cdn/helpers/paddings.css

@@ -3,18 +3,18 @@
 }
 
 .tiny-padding {
-  padding: 4rem !important;
+  padding: 0.25rem !important;
 }
 
 .small-padding {
-  padding: 8rem !important;
+  padding: 0.5rem !important;
 }
 
 .medium-padding,
 .padding {
-  padding: 16rem !important;
+  padding: 1rem !important;
 }
 
 .large-padding {
-  padding: 24rem !important;
-}
+  padding: 1.5rem !important;
+}

package/src/cdn/helpers/positions.css

@@ -34,4 +34,4 @@
 
 .middle.center {
   transform: translate(-50%, -50%);
-}
+}

package/src/cdn/helpers/reset.css

@@ -16,7 +16,7 @@ body {
 }
 
 label {
-  font-size: 12rem;
+  font-size: 0.75rem;
   vertical-align: baseline;
 }
 
@@ -38,4 +38,4 @@ button,
   font-family: inherit;
   outline: inherit;
   justify-content: center;
-}
+}

package/src/cdn/helpers/responsive.css

@@ -1,6 +1,7 @@
 .responsive {
   width: -webkit-fill-available;
   width: -moz-available;
+  width: stretch;
 }
 
 @media only screen and (max-width: 600px) {
@@ -25,4 +26,4 @@
   .m.s:not(.l) {
     display: none;
   }
-}
+}

package/src/cdn/helpers/scrolls.css

@@ -1,8 +1,7 @@
 .scroll {
   overflow: auto;
-  padding-bottom: 16rem;
 }
 
 .no-scroll {
   overflow: hidden;
-}
+}

package/src/cdn/helpers/shadows.css

@@ -20,4 +20,4 @@
 .top-shadow {
   background-color: transparent !important;
   background-image: linear-gradient(to bottom, black, transparent);
-}
+}

package/src/cdn/helpers/sizes.css

@@ -1,28 +1,28 @@
 .small-width {
-  width: 192rem !important;
+  width: 12rem !important;
   max-width: 100%;
 }
 
 .medium-width {
-  width: 384rem !important;
+  width: 24rem !important;
   max-width: 100%;
 }
 
 .large-width {
-  width: 576rem !important;
+  width: 36rem !important;
   max-width: 100%;
 }
 
 .small-height {
-  height: 192rem !important;
+  height: 12rem !important;
 }
 
 .medium-height {
-  height: 384rem !important;
+  height: 24rem !important;
 }
 
 .large-height {
-  height: 576rem !important;
+  height: 36rem !important;
 }
 
 .wrap {
@@ -33,4 +33,4 @@
 .no-wrap:not(.dropdown) {
   display: flex;
   white-space: nowrap;
-}
+}

package/src/cdn/helpers/spaces.css

@@ -1,16 +1,16 @@
 .tiny-space:not(nav, .row, .grid, table) {
-  height: 8rem;
+  height: 0.5rem;
 }
 
 .space:not(nav, .row, .grid, table),
 .small-space:not(nav, .row, .grid, table) {
-  height: 16rem;
+  height: 1rem;
 }
 
 .medium-space:not(nav, .row, .grid, table) {
-  height: 32rem;
+  height: 2rem;
 }
 
 .large-space:not(nav, .row, .grid, table) {
-  height: 48rem;
-}
+  height: 3rem;
+}

package/src/cdn/helpers/theme.css

@@ -1,117 +1,117 @@
 .primary {
-  background-color: var(--primary)!important;
-  color: var(--on-primary)!important;
+  background-color: var(--primary) !important;
+  color: var(--on-primary) !important;
 }
 
 .primary-text {
-  color: var(--primary)!important;
+  color: var(--primary) !important;
 }
 
 .primary-border {
-  border-color: var(--primary)!important;
+  border-color: var(--primary) !important;
 }
 
 .primary-container {
-  background-color: var(--primary-container)!important;
-  color: var(--on-primary-container)!important;
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
 }
 
 .secondary {
-  background-color: var(--secondary)!important;
-  color: var(--on-secondary)!important;
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
 }
 
 .secondary-text {
-  color: var(--secondary)!important;
+  color: var(--secondary) !important;
 }
 
 .secondary-border {
-  border-color: var(--secondary)!important;
+  border-color: var(--secondary) !important;
 }
 
 .secondary-container {
-  background-color: var(--secondary-container)!important;
-  color: var(--on-secondary-container)!important;
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
 }
 
 .tertiary {
-  background-color: var(--tertiary)!important;
-  color: var(--on-tertiary)!important;
+  background-color: var(--tertiary) !important;
+  color: var(--on-tertiary) !important;
 }
 
 .tertiary-text {
-  color: var(--tertiary)!important;
+  color: var(--tertiary) !important;
 }
 
 .tertiary-border {
-  border-color: var(--tertiary)!important;
+  border-color: var(--tertiary) !important;
 }
 
 .tertiary-container {
-  background-color: var(--tertiary-container)!important;
-  color: var(--on-tertiary-container)!important;
+  background-color: var(--tertiary-container) !important;
+  color: var(--on-tertiary-container) !important;
 }
 
 .error {
-  background-color: var(--error)!important;
-  color: var(--on-error)!important;
+  background-color: var(--error) !important;
+  color: var(--on-error) !important;
 }
 
 .error-text {
-  color: var(--error)!important;
+  color: var(--error) !important;
 }
 
 .error-border {
-  border-color: var(--error)!important;
+  border-color: var(--error) !important;
 }
 
 .error-container {
-  background-color: var(--error-container)!important;
-  color: var(--on-error-container)!important;
+  background-color: var(--error-container) !important;
+  color: var(--on-error-container) !important;
 }
 
 .background {
-  background-color: var(--background)!important;
-  color: var(--on-background)!important;
+  background-color: var(--background) !important;
+  color: var(--on-background) !important;
 }
 
 .surface {
-  background-color: var(--surface)!important;
-  color: var(--on-surface)!important;
+  background-color: var(--surface) !important;
+  color: var(--on-surface) !important;
 }
 
 .surface-variant {
-  background-color: var(--surface-variant)!important;
-  color: var(--on-surface-variant)!important;
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
 }
 
 .inverse-surface {
-  background-color: var(--inverse-surface); 
+  background-color: var(--inverse-surface);
   color: var(--inverse-on-surface);
 }
 
 .black {
-  background-color: #000000 !important;
+  background-color: #000 !important;
 }
 
 .black-border {
-  border-color: #000000 !important;
+  border-color: #000 !important;
 }
 
 .black-text {
-  color: #000000 !important;
+  color: #000 !important;
 }
 
 .white {
-  background-color: #ffffff !important;
+  background-color: #FFF !important;
 }
 
 .white-border {
-  border-color: #ffffff !important;
+  border-color: #FFF !important;
 }
 
 .white-text {
-  color: #ffffff !important;
+  color: #FFF !important;
 }
 
 .transparent {
@@ -131,4 +131,4 @@
 .fill:not(i) {
   background-color: var(--surface-variant) !important;
   color: var(--on-surface-variant) !important;
-}
+}

package/src/cdn/helpers/typography.css

@@ -4,7 +4,7 @@ html {
 
 body {
   font-family: var(--font);
-  font-size: 14rem;
+  font-size: 0.875rem;
 }
 
 h1,
@@ -16,7 +16,7 @@ h6 {
   font-weight: 400;
   display: flex;
   align-items: center;
-  margin-bottom: 8rem;
+  margin-bottom: 0.5rem;
 }
 
 * + h1,
@@ -25,31 +25,79 @@ h6 {
 * + h4,
 * + h5,
 * + h6 {
-  margin-top: 16rem;
+  margin-top: 1rem;
 }
 
 h1 {
-  font-size: 96rem;
+  font-size: 3.5625rem;
 }
 
 h2 {
-  font-size: 60rem;
+  font-size: 2.8125rem;
 }
 
 h3 {
-  font-size: 48rem;
+  font-size: 2.25rem;
 }
 
 h4 {
-  font-size: 34rem;
+  font-size: 2rem;
 }
 
 h5 {
-  font-size: 24rem;
+  font-size: 1.75rem;
 }
 
 h6 {
-  font-size: 20rem;
+  font-size: 1.5rem;
+}
+
+h1.small {
+  font-size: 3.0625rem;
+}
+
+h2.small {
+  font-size: 2.3125rem;
+}
+
+h3.small {
+  font-size: 1.75rem;
+}
+
+h4.small {
+  font-size: 1.5rem;
+}
+
+h5.small {
+  font-size: 1.25rem;
+}
+
+h6.small {
+  font-size: 1rem;
+}
+
+h1.large {
+  font-size: 4.0625rem;
+}
+
+h2.large {
+  font-size: 3.3125rem;
+}
+
+h3.large {
+  font-size: 2.75rem;
+}
+
+h4.large {
+  font-size: 2.5rem;
+}
+
+h5.large {
+  font-size: 2.25rem;
+}
+
+h6.large {
+  font-size: 2rem;
 }
 
 .link {
@@ -60,6 +108,7 @@ h6 {
   overflow: hidden;
   white-space: nowrap !important;
   text-overflow: ellipsis;
+  flex: inherit;
 }
 
 .truncate > * {
@@ -67,15 +116,15 @@ h6 {
 }
 
 .small-text {
-  font-size: 12rem;
+  font-size: 0.75rem;
 }
 
 .medium-text {
-  font-size: 14rem;
+  font-size: 0.875rem;
 }
 
 .large-text {
-  font-size: 16rem;
+  font-size: 1rem;
 }
 
 .upper {
@@ -107,5 +156,5 @@ h6 {
 }
 
 p {
-  margin: 8rem 0;
-}
+  margin: 0.5rem 0;
+}

package/src/cdn/helpers/waves.css

@@ -12,7 +12,7 @@ button::after {
   width: 100%;
   height: 100%;
   background-position: center;
-  background-image: radial-gradient(circle, rgba(255,255,255,.4) 1%, transparent 1%);
+  background-image: radial-gradient(circle, rgb(255 255 255 / 0.4) 1%, transparent 1%);
   opacity: 0;
   transition: none;
 }
@@ -26,23 +26,23 @@ button.border::after,
 .chip.transparent::after,
 .button.transparent::after,
 button.transparent::after {
-  background-image: radial-gradient(circle, rgba(150,150,150,.2) 1%, transparent 1%);
+  background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
 }
 
 .wave.none::after,
 .button.none::after,
 button.none::after {
   top: 0;
-  left: -4rem;
-  padding: 0 4rem;
+  left: -0.25rem;
+  padding: 0 0.25rem;
 }
 
 .wave.none:not(.small, .medium, .large, .extra)::after,
 .button.none:not(.small, .medium, .large, .extra)::after,
 button.none:not(.small, .medium, .large, .extra)::after {
-  top: -4rem;
-  left: -4rem;
-  padding: 4rem;
+  top: -0.25rem;
+  left: -0.25rem;
+  padding: 0.25rem;
 }
 
 .wave:hover::after,
@@ -68,7 +68,7 @@ button:active::after {
 }
 
 .no-wave::after,
-.no-wave:hover::after, 
-.no-wave:active::after{
+.no-wave:hover::after,
+.no-wave:active::after {
   display: none;
-}
+}