beercss 2.3.0 → 3.0.0

package/src/cdn/elements/buttons.css

@@ -4,18 +4,18 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 40rem;
-  min-width: 40rem;
-  font-size: 14rem;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--on-primary);
-  padding: 0 24rem;
+  padding: 0 1.5rem;
   background-color: var(--primary);
-  margin: 0 8rem;
-  border-radius: 8rem;
+  margin: 0 0.5rem;
+  border-radius: 0.5rem;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
   user-select: none;
-  gap: 16rem;
+  gap: 1rem;
 }
 
 .button.none,
@@ -26,44 +26,44 @@ button.none {
   padding: 0;
   background-color: transparent;
   min-width: auto;
-  min-height: 24rem;
+  min-height: 1.5rem;
 }
 
 .button.small,
 button.small {
-  height: 32rem;
-  min-width: 32rem;
-  font-size: 14rem;
+  height: 2rem;
+  min-width: 2rem;
+  font-size: 0.875rem;
 }
 
 .button.large,
 button.large {
-  height: 48rem;
-  min-width: 48rem;
+  height: 3rem;
+  min-width: 3rem;
 }
 
 .button.extra,
 button.extra,
 .button.extend,
 button.extend {
-  height: 56rem;
-  min-width: 56rem;
-  font-size: 16rem;
+  height: 3.5rem;
+  min-width: 3.5rem;
+  font-size: 1rem;
 }
 
 .button.border,
 button.border {
-  border: 1rem solid var(--primary);
+  border: 0.0625rem solid var(--primary);
   color: var(--primary);
 }
 
 .button.circle,
 button.circle {
-  border-radius: 40rem;
+  border-radius: 2.5rem;
   padding: 0;
 }
 
-.button.square, 
+.button.square,
 button.square {
   border-radius: 0;
   padding: 0;
@@ -84,7 +84,7 @@ button.extend:hover,
 .button.extend.active,
 button.extend.active {
   width: auto;
-  padding: 0 16rem;
+  padding: 0 1rem;
 }
 
 .button.extend:hover > i + span,
@@ -92,7 +92,7 @@ button.extend:hover > i + span,
 .button.extend.active > i + span,
 button.extend.active > i + span {
   display: inherit;
-  margin-left: 32rem;
+  margin-left: 2rem;
 }
 
 .button.extend:hover > img + span,
@@ -100,12 +100,12 @@ button.extend:hover > img + span,
 .button.extend.active > img + span,
 button.extend.active > img + span {
   display: inherit;
-  margin-left: 48rem;
+  margin-left: 3rem;
 }
 
 .button[disabled],
 button:disabled {
-  opacity: .5;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
@@ -124,4 +124,4 @@ button:disabled::after {
 button.fill {
   background-color: var(--secondary-container) !important;
   color: var(--on-secondary-container) !important;
-}
+}

package/src/cdn/elements/cards.css

@@ -2,24 +2,24 @@ article {
   box-shadow: var(--elevate1);
   background-color: var(--surface);
   color: var(--on-surface);
-  padding: 16rem;
-  border-radius: 12rem;
+  padding: 1rem;
+  border-radius: 0.75rem;
   display: block;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
 * + article {
-  margin-top: 16rem;
+  margin-top: 1rem;
 }
 
 article.small {
-  height: 192rem;
+  height: 12rem;
 }
 
 article.medium {
-  height: 320rem;
+  height: 20rem;
 }
 
 article.large {
-  height: 512rem;
-}
+  height: 32rem;
+}

package/src/cdn/elements/chips.css

@@ -3,38 +3,38 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 40rem;
-  min-width: 40rem;
-  font-size: 14rem;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--on-secondary);
-  padding: 0 16rem;
+  padding: 0 1rem;
   background-color: var(--secondary);
-  margin: 0 8rem;
+  margin: 0 0.5rem;
   text-transform: none;
-  border-radius: 8rem;
+  border-radius: 0.5rem;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
   user-select: none;
-  gap: 16rem;
+  gap: 1rem;
 }
 
 .chip.small {
-  height: 32rem;
-  min-width: 32rem;
+  height: 2rem;
+  min-width: 2rem;
 }
 
 .chip.large {
-  height: 48rem;
-  min-width: 48rem;
+  height: 3rem;
+  min-width: 3rem;
 }
 
 .chip.border {
-  border: 1rem solid var(--secondary);
+  border: 0.0625rem solid var(--secondary);
   color: var(--secondary);
 }
 
 .chip.circle {
-  border-radius: 40rem;
+  border-radius: 2.5rem;
   padding: 0;
 }
 
@@ -47,4 +47,4 @@
   background-color: var(--secondary-container) !important;
   color: var(--on-secondary-container) !important;
   border: none;
-}
+}

package/src/cdn/elements/containers.css

@@ -1,7 +1,7 @@
 main.responsive {
   margin: 0 auto;
-  max-width: 1200rem;
-  padding: 8rem;
+  max-width: 75rem;
+  padding: 0.5rem;
   overflow-x: hidden;
   min-height: 100vh;
 }
@@ -11,69 +11,78 @@ main.responsive.max {
 }
 
 nav.bottom:not(.s, .m, .l) ~ .responsive:not(header) {
-  padding-bottom: 96rem;
+  padding-bottom: 6rem;
 }
 
 nav.top:not(.s, .m, .l) ~ .responsive:not(footer) {
-  padding-top: 96rem;
+  padding-top: 6rem;
 }
 
 nav.left:not(.s, .m, .l) ~ .responsive {
-  padding-left: 96rem;
+  padding-left: 6rem;
 }
 
 nav.right:not(.s, .m, .l) ~ .responsive {
-  padding-right: 96rem;
+  padding-right: 6rem;
 }
 
 @media only screen and (max-width: 600px) {
   nav.s.bottom ~ .responsive:not(header) {
-    padding-bottom: 96rem;
+    padding-bottom: 6rem;
   }
+
   nav.s.top ~ .responsive:not(footer) {
-    padding-top: 96rem;
+    padding-top: 6rem;
   }
+
   nav.s.left ~ .responsive {
-    padding-left: 96rem;
+    padding-left: 6rem;
   }
+
   nav.s.right ~ .responsive {
-    padding-right: 96rem;
+    padding-right: 6rem;
   }
 }
 
 @media only screen and (min-width: 601px) and (max-width: 992px) {
   nav.m.bottom ~ .responsive:not(header) {
-    padding-bottom: 96rem;
+    padding-bottom: 6rem;
   }
+
   nav.m.top ~ .responsive:not(footer) {
-    padding-top: 96rem;
+    padding-top: 6rem;
   }
+
   nav.m.left ~ .responsive {
-    padding-left: 96rem;
+    padding-left: 6rem;
   }
+
   nav.m.right ~ .responsive {
-    padding-right: 96rem;
+    padding-right: 6rem;
   }
 }
 
 @media only screen and (min-width: 993px) {
   nav.l.bottom ~ .responsive:not(header) {
-    padding-bottom: 96rem;
+    padding-bottom: 6rem;
   }
+
   nav.l.top ~ .responsive:not(footer) {
-    padding-top: 96rem;
+    padding-top: 6rem;
   }
+
   nav.l.left ~ .responsive {
-    padding-left: 96rem;
+    padding-left: 6rem;
   }
+
   nav.l.right ~ .responsive {
-    padding-right: 96rem;
+    padding-right: 6rem;
   }
 }
 
 @media only screen and (max-width: 600px) {
   main.responsive {
-    padding-right: 8rem;
-    padding-left: 8rem;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
   }
-}
+}

package/src/cdn/elements/dropdowns.css

@@ -15,14 +15,14 @@
   transform: translateY(100%);
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 14rem;
+  font-size: 0.875rem;
   font-weight: normal;
   text-transform: none;
   color: var(--on-surface);
   line-height: normal;
   text-align: left;
-  border-radius: 4rem;
-  transform: scale(.8) translateY(120%);
+  border-radius: 0.25rem;
+  transform: scale(0.8) translateY(120%);
   transition: var(--speed2) all, 0s background-color;
 }
 
@@ -51,7 +51,7 @@ button:not([data-ui]):focus-within > .dropdown,
 }
 
 .dropdown > a {
-  padding: 12rem 16rem;
+  padding: 0.75rem 1rem;
   border-radius: 0;
 }
 
@@ -63,4 +63,4 @@ button:not([data-ui]):focus-within > .dropdown,
 .dropdown > a:focus,
 .dropdown > a.active {
   background-color: var(--active);
-}
+}

package/src/cdn/elements/expansions.css

@@ -1,11 +1,15 @@
 summary.none {
   list-style-type: none;
-} 
-  
+}
+
+summary.none::-webkit-details-marker {
+  display: none;
+}
+
 summary {
   cursor: pointer;
-} 
-  
+}
+
 summary:focus {
   outline: none;
-}
+}