beercss 2.2.11 → 3.0.0

package/src/cdn/elements/fields.css

@@ -1,50 +1,50 @@
 .field {
-  height: 48rem;
-  margin-bottom: 32rem;
+  height: 3rem;
+  margin-bottom: 2rem;
 }
 
 * + .field {
-  margin-top: 16rem;
+  margin-top: 1rem;
 }
 
 .grid > * > .field {
-  margin-bottom: 16rem;
+  margin-bottom: 1rem;
 }
 
 .grid > * > .field + .field {
-  margin-top: 32rem;
+  margin-top: 2rem;
 }
 
 .grid.no-space > * > .field + .field {
-  margin-top: 16rem;
+  margin-top: 1rem;
 }
 
 .grid.medium-space > * > .field + .field {
-  margin-top: 40rem;
+  margin-top: 2.5rem;
 }
 
 .grid.large-space > * > .field + .field {
-  margin-top: 48rem;
+  margin-top: 3rem;
 }
 
 .field.small {
-  height: 40rem;
+  height: 2.5rem;
 }
 
 .field.medium {
-  height: 48rem;
+  height: 3rem;
 }
 
 .field.large {
-  height: 56rem;
+  height: 3.5rem;
 }
 
 .field.extra {
-  height: 64rem;
+  height: 4rem;
 }
 
 .field::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -66,7 +66,7 @@
   position: absolute;
   top: 50%;
   left: auto;
-  right: 16rem;
+  right: 1rem;
   transform: translateY(-50%);
   cursor: pointer;
   z-index: 0;
@@ -82,13 +82,13 @@
 .field.fill > .loader,
 .field.round > .loader {
   left: auto;
-  right: 16rem;
+  right: 1rem;
 }
 
 .field > i:first-child,
 .field > img:first-child,
 .field > .loader:first-child {
-  left: 16rem;
+  left: 1rem;
   right: auto;
 }
 
@@ -101,7 +101,7 @@
 .field.border > .loader:first-child,
 .field.fill > .loader:first-child,
 .field.round > .loader:first-child {
-  left: 16rem;
+  left: 1rem;
   right: auto;
 }
 
@@ -110,9 +110,9 @@
 }
 
 .field > .loader {
-  border-width: 3rem;
-  width: 24rem;
-  height: 24rem;
+  border-width: 0.1875rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 /* input, textarea and select */
@@ -129,7 +129,7 @@ input[type^=date]::-webkit-inner-spin-button,
 input[type^=date]::-webkit-calendar-picker-indicator,
 input[type^=time]::-webkit-inner-spin-button,
 input[type^=time]::-webkit-calendar-picker-indicator {
-  opacity: 0;   
+  opacity: 0;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -155,10 +155,10 @@ input[type=file] {
 .field > input,
 .field > textarea,
 .field > select {
-  border: 1rem solid transparent;
-  padding: 0 15rem;
+  border: 0.0625rem solid transparent;
+  padding: 0 0.9375rem;
   font-family: inherit;
-  font-size: 16rem;
+  font-size: 1rem;
   width: 100%;
   height: 100%;
   outline: none;
@@ -170,8 +170,8 @@ input[type=file] {
 .field > input:focus,
 .field > textarea:focus,
 .field > select:focus {
-  border: 2rem solid transparent;
-  padding: 0 14rem;
+  border: 0.125rem solid transparent;
+  padding: 0 0.875rem;
 }
 
 .field.border > input,
@@ -189,39 +189,39 @@ input[type=file] {
 .field.round > input,
 .field.round > textarea,
 .field.round > select {
-  padding-left: 23rem;
-  padding-right: 23rem;
+  padding-left: 1.4376rem;
+  padding-right: 1.4376rem;
 }
 
 .field.round > input:focus,
 .field.round > textarea:focus,
 .field.round > select:focus {
-  padding-left: 22rem;
-  padding-right: 22rem;
+  padding-left: 1.375rem;
+  padding-right: 1.375rem;
 }
 
 .field.prefix > input,
 .field.prefix > textarea,
 .field.prefix > select {
-  padding-left: 47rem;
+  padding-left: 2.9375rem;
 }
 
 .field.prefix > input:focus,
 .field.prefix > textarea:focus,
 .field.prefix > select:focus {
-  padding-left: 46rem;
+  padding-left: 2.875rem;
 }
 
 .field.suffix > input,
 .field.suffix > textarea,
 .field.suffix > select {
-  padding-right: 47rem;
+  padding-right: 2.9375rem;
 }
 
 .field.suffix > input:focus,
 .field.suffix > textarea:focus,
 .field.suffix > select:focus {
-  padding-right: 46rem;
+  padding-right: 2.875rem;
 }
 
 .field:not(.border, .round) > input,
@@ -237,15 +237,15 @@ input[type=file] {
 }
 
 .field {
-  border-radius: 4rem 4rem 0 0;
+  border-radius: 0.25rem 0.25rem 0 0;
 }
 
 .field.border {
-  border-radius: 4rem;
+  border-radius: 0.25rem;
 }
 
 .field.round {
-  border-radius: 32rem;
+  border-radius: 2rem;
 }
 
 .field.round:not(.border, .fill) > input,
@@ -282,25 +282,25 @@ input[type=file] {
 }
 
 .field > :disabled {
-  opacity: .5;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .field.small.textarea {
-  height: 72rem;
+  height: 4.5rem;
 }
 
 .field.textarea,
 .field.medium.textarea {
-  height: 88rem;
+  height: 5.5rem;
 }
 
 .field.large.textarea {
-  height: 104rem;
+  height: 6.5rem;
 }
 
 .field.extra.textarea {
-  height: 120rem;
+  height: 7.5rem;
 }
 
 .field > select > option {
@@ -310,7 +310,7 @@ input[type=file] {
 
 .field.label > input,
 .field.label > select {
-  padding-top: 16rem;
+  padding-top: 1rem;
 }
 
 .field.label.border:not(.fill) > input,
@@ -319,84 +319,84 @@ input[type=file] {
 }
 
 .field.label.small > textarea {
-  padding-top: 18rem;
+  padding-top: 1.125rem;
 }
 
 .field.label > textarea,
 .field.label.medium > textarea {
-  padding-top: 22rem;
+  padding-top: 1.375rem;
 }
 
 .field.label.large > textarea {
-  padding-top: 26rem;
+  padding-top: 1.625rem;
 }
 
 .field.label.extra > textarea {
-  padding-top: 30rem;
+  padding-top: 1.875rem;
 }
 
 .field.small:not(.label) > textarea,
 .field.small.border:not(.fill) > textarea {
-  padding-top: 10rem;
+  padding-top: 0.625rem;
 }
 
 .field:not(.label) > textarea,
 .field.border:not(.fill) > textarea,
 .field.medium:not(.label) > textarea,
 .field.medium.border:not(.fill) > textarea {
-  padding-top: 14rem;
+  padding-top: 0.875rem;
 }
 
 .field.large:not(.label) > textarea,
 .field.large.border:not(.fill) > textarea {
-  padding-top: 18rem;
+  padding-top: 1.125rem;
 }
 
 .field.extra:not(.label) > textarea,
 .field.extra.border:not(.fill) > textarea {
-  padding-top: 22rem;
+  padding-top: 1.375rem;
 }
 
 /* label */
 .field.label > label {
   position: absolute;
   top: 50%;
-  left: 16rem;
-  font-size: 16rem;
+  left: 1rem;
+  font-size: 1rem;
   transform: translateY(-50%);
   transition: var(--speed2) all, 0s background-color;
   z-index: 0;
 }
 
 .field.label.textarea.small > label {
-  top: 20rem;
+  top: 1.25rem;
 }
 
 .field.label.textarea > label,
 .field.label.textarea.medium > label {
-  top: 24rem;
+  top: 1.5rem;
 }
 
 .field.label.textarea.large > label {
-  top: 28rem;
+  top: 1.75rem;
 }
 
 .field.label.textarea.extra > label {
-  top: 32rem;
+  top: 2rem;
 }
 
 .field.label.round > label {
-  left: 24rem;
+  left: 1.5rem;
 }
 
 .field.label.prefix > label {
-  left: 48rem;
+  left: 3rem;
 }
 
 .field.label > label.active,
 .field.label > [placeholder]:focus ~ label,
 .field.label > [placeholder]:not(:placeholder-shown) ~ label {
-  font-size: 12rem;
+  font-size: 0.75rem;
   transform: translateY(-120%);
   z-index: 1;
 }
@@ -404,9 +404,9 @@ input[type=file] {
 .field.label.border:not(.fill) > label.active,
 .field.label.border:not(.fill) > [placeholder]:focus ~ label,
 .field.label.border:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
-  font-size: 12rem;
+  font-size: 0.75rem;
   top: 0%;
-  left: 16rem;
+  left: 1rem;
   transform: translateY(-50%);
   z-index: 1;
 }
@@ -414,7 +414,7 @@ input[type=file] {
 .field.label.border.round:not(.fill) > label.active,
 .field.label.border.round:not(.fill) > [placeholder]:focus ~ label,
 .field.label.border.round:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
-  left: 24rem;
+  left: 1.5rem;
   z-index: 1;
 }
 
@@ -426,8 +426,8 @@ input[type=file] {
   color: var(--error) !important;
 }
 
-.field > label.required:after,
-.field.required > label:after {
+.field > label.required::after,
+.field.required > label::after {
   content: " * ";
 }
 
@@ -435,12 +435,12 @@ input[type=file] {
 .field > .helper,
 .field > .error {
   position: absolute;
-  left: 16rem;
+  left: 1rem;
   bottom: 0;
   transform: translateY(100%);
-  font-size: 12rem;
+  font-size: 0.75rem;
   background: none !important;
-  padding-top: 2rem;
+  padding-top: 0.125rem;
 }
 
 a.helper {
@@ -453,7 +453,7 @@ a.helper {
 
 .field.round > .helper,
 .field.round > .error {
-  left: 24rem;
+  left: 1.5rem;
 }
 
 .field.invalid > .helper {
@@ -463,4 +463,4 @@ a.helper {
 table td > .field {
   max-height: 100%;
   height: 100%;
-}
+}

package/src/cdn/elements/grids.css

@@ -1,24 +1,25 @@
 .grid {
-  --grid-gap: 16rem;
+  --grid-gap: 1rem;
+
   display: grid;
-  grid-template-columns: repeat(12, calc(8.33% - var(--grid-gap) + (var(--grid-gap)/12)));
+  grid-template-columns: repeat(12, calc(8.33% - var(--grid-gap) + (var(--grid-gap) / 12)));
   gap: var(--grid-gap);
 }
 
 * + .grid {
-  margin-top: 16rem;
+  margin-top: 1rem;
 }
 
 .grid.no-space {
-  --grid-gap: 0rem;
+  --grid-gap: 0;
 }
 
 .grid.medium-space {
-  --grid-gap: 24rem;
+  --grid-gap: 1.5rem;
 }
 
 .grid.large-space {
-  --grid-gap: 32rem;
+  --grid-gap: 2rem;
 }
 
 .s1 {
@@ -73,98 +74,98 @@
   .m1 {
     grid-area: auto/span 1;
   }
-  
+
   .m2 {
     grid-area: auto/span 2;
   }
-  
+
   .m3 {
     grid-area: auto/span 3;
   }
-  
+
   .m4 {
     grid-area: auto/span 4;
   }
-  
+
   .m5 {
     grid-area: auto/span 5;
   }
-  
+
   .m6 {
     grid-area: auto/span 6;
   }
-  
+
   .m7 {
     grid-area: auto/span 7;
   }
-  
+
   .m8 {
     grid-area: auto/span 8;
   }
-  
+
   .m9 {
     grid-area: auto/span 9;
   }
-  
+
   .m10 {
     grid-area: auto/span 10;
   }
-  
+
   .m11 {
     grid-area: auto/span 11;
   }
-  
+
   .m12 {
     grid-area: auto/span 12;
-  }  
+  }
 }
 
 @media only screen and (min-width: 993px) {
   .l1 {
     grid-area: auto/span 1;
   }
-  
+
   .l2 {
     grid-area: auto/span 2;
   }
-  
+
   .l3 {
     grid-area: auto/span 3;
   }
-  
+
   .l4 {
     grid-area: auto/span 4;
   }
-  
+
   .l5 {
     grid-area: auto/span 5;
   }
-  
+
   .l6 {
     grid-area: auto/span 6;
   }
-  
+
   .l7 {
     grid-area: auto/span 7;
   }
-  
+
   .l8 {
     grid-area: auto/span 8;
   }
-  
+
   .l9 {
     grid-area: auto/span 9;
   }
-  
+
   .l10 {
     grid-area: auto/span 10;
   }
-  
+
   .l11 {
     grid-area: auto/span 11;
   }
-  
+
   .l12 {
     grid-area: auto/span 12;
   }
-}
+}

package/src/cdn/elements/icons.css

@@ -1,8 +1,8 @@
 i {
-  font-family: 'Material Symbols Outlined';
+  font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;
-  font-size: 24rem;
+  font-size: 1.5rem;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
@@ -10,37 +10,37 @@ i {
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
   vertical-align: middle;
   text-align: center;
   overflow: hidden;
-  width: 24rem;
-  min-width: 24rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
   box-sizing: content-box;
 }
 
 i.tiny {
-  font-size: 16rem;
-  width: 16rem;
-  min-width: 16rem;
+  font-size: 1rem;
+  width: 1rem;
+  min-width: 1rem;
 }
 
 i.small {
-  font-size: 20rem;
-  width: 20rem;
-  min-width: 20rem;
+  font-size: 1.25rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
 }
 
 i.large {
-  font-size: 28rem;
-  width: 28rem;
-  min-width: 28rem;
+  font-size: 1.75rem;
+  width: 1.75rem;
+  min-width: 1.75rem;
 }
 
 i.extra {
-  font-size: 32rem;
-  width: 32rem;
+  font-size: 2rem;
+  width: 2rem;
 }
 
 i.fill,
@@ -48,5 +48,5 @@ a.row:hover > i,
 a.row:focus > i,
 .transparent:hover > i,
 .transparent:focus > i {
-  font-variation-settings: 'FILL' 1;
-}
+  font-variation-settings: "FILL" 1;
+}