beercss 2.3.0 → 3.0.0

package/src/cdn/elements/layouts.css

@@ -13,37 +13,37 @@
 
 .absolute.left.right.small,
 .fixed.left.right.small {
-  height: 320rem;
+  height: 20rem;
 }
 
 .absolute.left.right.medium,
 .fixed.left.right.medium {
-  height: 448rem;
+  height: 28rem;
 }
 
 .absolute.left.right.large,
 .fixed.left.right.large {
-  height: 704rem;
+  height: 44rem;
 }
 
 .absolute.top.bottom.small,
 .fixed.top.bottom.small {
-  width: 320rem;
+  width: 20rem;
 }
 
 .absolute.top.bottom.medium,
 .fixed.top.bottom.medium {
-  width: 448rem;
+  width: 28rem;
 }
 
 .absolute.top.bottom.large,
 .fixed.top.bottom.large {
-  width: 704rem;
+  width: 44rem;
 }
 
 header,
 footer {
-  padding: 0 16rem;
+  padding: 0 1rem;
   background-color: var(--surface);
 }
 
@@ -60,14 +60,14 @@ footer.fixed {
 }
 
 header.fixed::before,
-footer.fixed:before {
-  content: '';
+footer.fixed::before {
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  margin: 0 -8rem;
+  margin: 0 -0.5rem;
   max-width: 100%;
   background-color: inherit;
 }
@@ -89,14 +89,14 @@ article > footer {
 article > header.fixed,
 .padding > header.fixed,
 .medium-padding > header.fixed {
-  transform: translateY(-16rem);
+  transform: translateY(-1rem);
 }
 
 .modal > footer.fixed,
 article > footer.fixed,
 .padding > footer.fixed,
 .medium-padding > footer.fixed {
-  transform: translateY(16rem);
+  transform: translateY(1rem);
 }
 
 .no-padding > header.fixed,
@@ -105,17 +105,17 @@ article > footer.fixed,
 }
 
 .small-padding > header.fixed {
-  transform: translateY(-8rem);
+  transform: translateY(-0.5rem);
 }
 
 .small-padding > footer.fixed {
-  transform: translateY(8rem);
+  transform: translateY(0.5rem);
 }
 
 .large-padding > header.fixed {
-  transform: translateY(-24rem);
+  transform: translateY(-1.5rem);
 }
 
 .large-padding > footer.fixed {
-  transform: translateY(24rem);
-}
+  transform: translateY(1.5rem);
+}

package/src/cdn/elements/loaders.css

@@ -1,57 +1,58 @@
 .loader {
-  --loader-translateY: 0;
+  --loader-translate-y: 0;
+
   display: inline-block;
-  width: 40rem;
-  height: 40rem;
+  width: 2.5rem;
+  height: 2.5rem;
   border-radius: 50%;
-  border: 4rem solid var(--primary);
+  border: 0.25rem solid var(--primary);
   clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
   animation: 1.6s to-loader linear infinite;
   background: none !important;
 }
 
 .loader.small {
-  width: 24rem;
-  height: 24rem;
-  border-width: 3rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-width: 0.1875rem;
 }
 
 .loader.large {
-  width: 56rem;
-  height: 56rem;
-  border-width: 5rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-width: 0.3125rem;
 }
 
 .loader.red {
-  border-color: #f44336;
+  border-color: #F44336;
 }
 
 .loader.pink {
-  border-color: #e91e63;
+  border-color: #E91E63;
 }
 
 .loader.purple {
-  border-color: #9c27b0;
+  border-color: #9C27B0;
 }
 
 .loader.deep-purple {
-  border-color: #673ab7;
+  border-color: #673AB7;
 }
 
 .loader.indigo {
-  border-color: #3f51b5;
+  border-color: #3F51B5;
 }
 
 .loader.blue {
-  border-color: #2196f3;
+  border-color: #2196F3;
 }
 
 .loader.light-blue {
-  border-color: #03a9f4;
+  border-color: #03A9F4;
 }
 
 .loader.cyan {
-  border-color: #00bcd4;
+  border-color: #00BCD4;
 }
 
 .loader.teal {
@@ -59,31 +60,31 @@
 }
 
 .loader.green {
-  border-color: #4caf50;
+  border-color: #4CAF50;
 }
 
 .loader.light-green {
-  border-color: #8bc34a;
+  border-color: #8BC34A;
 }
 
 .loader.lime {
-  border-color: #cddc39;
+  border-color: #CDDC39;
 }
 
 .loader.yellow {
-  border-color: #ffeb3b;
+  border-color: #FFEB3B;
 }
 
 .loader.amber {
-  border-color: #ffc107;
+  border-color: #FFC107;
 }
 
 .loader.orange {
-  border-color: #ff9800;
+  border-color: #FF9800;
 }
 
 .loader.deep-orange {
-  border-color: #ff5722;
+  border-color: #FF5722;
 }
 
 .loader.brown {
@@ -91,56 +92,65 @@
 }
 
 .loader.blue-grey {
-  border-color: #607d8b;
+  border-color: #607D8B;
 }
 
 .loader.grey {
-  border-color: #9e9e9e;
+  border-color: #9E9E9E;
 }
 
 .loader.black {
-  border-color: #000000;
+  border-color: #000;
 }
 
 .loader.white {
-  border-color: #ffffff;
+  border-color: #FFF;
 }
 
 .field > .loader {
-  --loader-translateY: -50%;
+  --loader-translate-y: -50%;
 }
 
 @keyframes to-loader {
   0% {
-    transform: translateY(var(--loader-translateY)) rotate(0deg);
+    transform: translateY(var(--loader-translate-y)) rotate(0deg);
     clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
   }
+
   20% {
     clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
   }
+
   30% {
     clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
   }
+
   40% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);    
+    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
   }
+
   50% {
     clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
   }
+
   60% {
     clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
   }
+
   70% {
     clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%);
   }
+
   80% {
     clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%);
   }
-  90%{
-    transform: translateY(var(--loader-translateY)) rotate(360deg);
+
+  90% {
+    transform: translateY(var(--loader-translate-y)) rotate(360deg);
     clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
   }
+
   100% {
     clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
   }
-}
+}

package/src/cdn/elements/media.css

@@ -17,13 +17,13 @@ video.responsive {
   object-fit: cover;
   object-position: center;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
-  height: 48rem;
-  width: 48rem;
+  height: 3rem;
+  width: 3rem;
 }
 
 img.round,
 video.round {
-  border-radius: 8rem;
+  border-radius: 0.5rem;
 }
 
 img.circle,
@@ -33,26 +33,26 @@ video.circle {
 
 img.tiny,
 video.tiny {
-  height: 32rem;
-  width: 32rem;
+  height: 2rem;
+  width: 2rem;
 }
 
 img.small,
 video.small {
-  height: 40rem;
-  width: 40rem;
+  height: 2.5rem;
+  width: 2.5rem;
 }
 
 img.large,
 video.large {
-  height: 56rem;
-  width: 56rem;
+  height: 3.5rem;
+  width: 3.5rem;
 }
 
 img.extra,
 video.extra {
-  height: 64rem;
-  width: 64rem;
+  height: 4rem;
+  width: 4rem;
 }
 
 img.responsive,
@@ -65,72 +65,72 @@ video.responsive {
 button > img.responsive,
 .button > img.responsive,
 .chip > img.responsive {
-  width: 40rem;
+  width: 2.5rem;
 }
 
 button:not(.transparent) > img.responsive,
 .button:not(.transparent) > img.responsive,
 .chip:not(.transparent) > img.responsive {
-  border: 4rem solid transparent;
+  border: 0.25rem solid transparent;
 }
 
 button.small > img.responsive,
 .button.small > img.responsive,
 .chip.small > img.responsive {
-  width: 32rem;
+  width: 2rem;
 }
 
 button.large > img.responsive,
 .button.large > img.responsive,
 .chip.large > img.responsive {
-  width: 48rem;
+  width: 3rem;
 }
 
 button.extra > img.responsive,
 .button.extra > img.responsive,
 .chip.extra > img.responsive {
-  width: 56rem;
+  width: 3.5rem;
 }
 
 img.responsive.tiny,
 video.responsive.tiny {
   width: 100%;
-  height: 64rem;
+  height: 4rem;
 }
 
 img.responsive.small,
 video.responsive.small {
   width: 100%;
-  height: 128rem;
+  height: 8rem;
 }
 
 img.responsive.medium,
 video.responsive.medium {
   width: 100%;
-  height: 192rem;
+  height: 12rem;
 }
 
 img.responsive.large,
 video.responsive.large {
   width: 100%;
-  height: 256rem;
+  height: 16rem;
 }
 
 img.responsive.extra,
 video.responsive.extra {
   width: 100%;
-  height: 320rem;
+  height: 20rem;
 }
 
 img.responsive.round,
 video.responsive.round {
-  border-radius: 32rem;
+  border-radius: 2rem;
 }
 
 img.empty-state,
 video.empty-state {
   max-width: 100%;
-  width: 384rem;
+  width: 24rem;
 }
 
 button > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
@@ -139,10 +139,10 @@ button > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
 .field > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
 .tabs img:not(.responsive, .tiny, .small, .medium, .large, .extra),
 td img:not(.responsive, .tiny, .small, .medium, .large, .extra) {
-  min-width: 24rem;
-  max-width: 24rem;
-  min-height: 24rem;
-  max-height: 24rem;
+  min-width: 1.5rem;
+  max-width: 1.5rem;
+  min-height: 1.5rem;
+  max-height: 1.5rem;
 }
 
 .button > i,
@@ -154,25 +154,25 @@ button > img.responsive,
 .chip > i,
 .chip > img,
 .chip > img.responsive {
-  margin: 0 -8rem;
+  margin: 0 -0.5rem;
 }
 
-.button > img.responsive, 
+.button > img.responsive,
 button > img.responsive {
-  margin-left: -24rem;
+  margin-left: -1.5rem;
 }
 
 .button > span + img.responsive,
 button > span + img.responsive {
-  margin-right: -24rem;
+  margin-right: -1.5rem;
 }
 
 .chip > img.responsive {
-  margin-left: -16rem;
+  margin-left: -1rem;
 }
 
 .chip > span + img.responsive {
-  margin-right: -16rem;
+  margin-right: -1rem;
 }
 
 .circle > img.responsive,
@@ -184,14 +184,14 @@ button > span + img.responsive {
 .extend > img {
   margin: 0;
   position: absolute;
-  left: 16rem;
+  left: 1rem;
 }
 
 .extend > img.responsive {
   left: 0;
-  width: 56rem;
+  width: 3.5rem;
 }
 
 .extend.border > img.responsive {
-  width: 54rem;
-}
+  width: 3.375rem;
+}

package/src/cdn/elements/modals.css

@@ -5,21 +5,21 @@
   box-shadow: var(--elevate2);
   color: var(--on-surface);
   background-color: var(--surface);
-  padding: 16rem;
+  padding: 1rem;
   z-index: 100;
   left: 50%;
   top: 10%;
-  min-width: 320rem;
+  min-width: 20rem;
   max-width: 100%;
   max-height: 80%;
   overflow-x: hidden;
   overflow-y: auto;
   transition: var(--speed3) all, 0s background-color;
-  transform: translate(-50%, -64rem);
+  transform: translate(-50%, -4rem);
 }
 
 .modal:not(.left, .right, .top, .bottom) {
-  border-radius: 12rem;
+  border-radius: 0.75rem;
 }
 
 .modal.small {
@@ -110,38 +110,38 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  transform: translateY(64rem);
+  transform: translateY(4rem);
   border-radius: 0;
 }
 
 .modal.left.small,
 .modal.right.small {
-  width: 320rem;
+  width: 20rem;
 }
 
 .modal.left.medium,
 .modal.right.medium {
-  width: 512rem;
+  width: 32rem;
 }
 
 .modal.left.large,
 .modal.right.large {
-  width: 704rem;
+  width: 44rem;
 }
 
 .modal.top.small,
 .modal.bottom.small {
-  height: 256rem;
+  height: 16rem;
 }
 
 .modal.top.medium,
 .modal.bottom.medium {
-  height: 384rem;
+  height: 24rem;
 }
 
 .modal.top.large,
 .modal.bottom.large {
-  height: 512rem;
+  height: 32rem;
 }
 
 nav > .modal,
@@ -150,19 +150,19 @@ nav.left > .modal {
   text-align: left;
   overflow-y: auto;
   background-color: inherit;
-  padding: 16rem 16rem 16rem 80rem;
+  padding: 1rem 1rem 1rem 5rem;
 }
 
 nav.right > .modal {
-  padding: 16rem 80rem 16rem 16rem;
+  padding: 1rem 5rem 1rem 1rem;
 }
 
 nav.top > .modal {
-  padding: 80rem 48rem 16rem 48rem;
+  padding: 5rem 3rem 1rem;
 }
 
 nav.bottom > .modal {
-  padding: 16rem 48rem 80rem 48rem;
+  padding: 1rem 3rem 5rem;
 }
 
 .modal > a.row:hover,
@@ -171,5 +171,5 @@ nav.bottom > .modal {
 }
 
 .modal > .row {
-  padding: 12rem 8rem;
-}
+  padding: 0.75rem 0.5rem;
+}