beercss 2.1.3 → 2.2.2

package/src/cdn/elements/fields.css

@@ -1,28 +1,30 @@
 .field {
   height: 48rem;
   margin-bottom: 32rem;
-  border: none!important;
 }
 
-*:not(.field) + .field,
-.field + *:not(.field) {
+* + .field {
   margin-top: 16rem;
 }
 
-.row > .col > .field:last-child {
+.grid > * > .field {
   margin-bottom: 16rem;
 }
 
-.row.no-space > .col > .field:not(:last-child) {
-  margin-bottom: 16rem;
+.grid > * > .field + .field {
+  margin-top: 32rem;
 }
 
-.row.medium-space > .col > .field:not(:last-child) {
-  margin-bottom: 40rem;
+.grid.no-space > * > .field + .field {
+  margin-top: 16rem;
 }
 
-.row.large-space > .col > .field:not(:last-child) {
-  margin-bottom: 48rem;
+.grid.medium-space > * > .field + .field {
+  margin-top: 40rem;
+}
+
+.grid.large-space > * > .field + .field {
+  margin-top: 48rem;
 }
 
 .field.small {
@@ -104,7 +106,7 @@
 }
 
 .field.invalid > i {
-  color: var(--error)!important;
+  color: var(--error);
 }
 
 .field > .loader {
@@ -136,8 +138,6 @@ input[type^=time]::-webkit-calendar-picker-indicator {
   width: 100%;
   height: 100%;
   z-index: -1;
-  padding: 0;
-  margin: 0;
   cursor: pointer;
 }
 
@@ -164,9 +164,7 @@ input[type=file] {
   outline: none;
   z-index: 1;
   background: none;
-  box-sizing: border-box;
   resize: none;
-  border-radius: inherit;
 }
 
 .field > input:focus,
@@ -180,7 +178,6 @@ input[type=file] {
 .field.border > textarea,
 .field.border > select {
   border-color: var(--outline);
-  box-shadow: none!important;
 }
 
 .field.border > input:focus,
@@ -192,7 +189,6 @@ input[type=file] {
 .field.round > input,
 .field.round > textarea,
 .field.round > select {
-  box-shadow: var(--shadow1);
   padding-left: 23rem;
   padding-right: 23rem;
 }
@@ -228,59 +224,51 @@ input[type=file] {
   padding-right: 46rem;
 }
 
-.field:not(.border, .flat, .round) > input,
-.field:not(.border, .flat, .round) > textarea,
-.field:not(.border, .flat, .round) > select {
+.field:not(.border, .round) > input,
+.field:not(.border, .round) > textarea,
+.field:not(.border, .round) > select {
   border-bottom-color: var(--outline);
 }
 
-.field:not(.border, .flat, .round) > input:focus,
-.field:not(.border, .flat, .round) > textarea:focus,
-.field:not(.border, .flat, .round) > select:focus {
+.field:not(.border, .round) > input:focus,
+.field:not(.border, .round) > textarea:focus,
+.field:not(.border, .round) > select:focus {
   border-bottom-color: var(--primary);
 }
 
 .field {
-  border-radius: 8rem 8rem 0 0;
+  border-radius: 4rem 4rem 0 0;
 }
 
 .field.border {
-  border-radius: 8rem;
+  border-radius: 4rem;
 }
 
 .field.round {
   border-radius: 32rem;
 }
 
-.field.round.textarea {
-  border-radius: 24rem;
-}
-
-.field.fill > input,
-.field.fill > textarea,
-.field.fill > select {
-  box-shadow: none;
-}
-
-.field.flat > input,
-.field.flat > textarea,
-.field.flat > select {
-  border-color: transparent!important;
-  box-shadow: none!important;
+.field.round:not(.border, .fill) > input,
+.field.round:not(.border, .fill) > textarea,
+.field.round:not(.border, .fill) > select,
+.field.round:not(.border) > input:focus,
+.field.round:not(.border) > textarea:focus,
+.field.round:not(.border) > select:focus {
+  box-shadow: var(--elevate1);
 }
 
-.field.flat > input:focus,
-.field.flat > textarea:focus,
-.field.flat > select:focus {
-  box-shadow: var(--shadow1)!important;
+.field.round:not(.border, .fill) > input:focus,
+.field.round:not(.border, .fill) > textarea:focus,
+.field.round:not(.border, .fill) > select:focus {
+  box-shadow: var(--elevate2);
 }
 
-.field.invalid:not(.border, .round, .flat) > input,
-.field.invalid:not(.border, .round, .flat) > textarea,
-.field.invalid:not(.border, .round, .flat) > select,
-.field.invalid:not(.border, .round, .flat) > input:focus,
-.field.invalid:not(.border, .round, .flat) > textarea:focus,
-.field.invalid:not(.border, .round, .flat) > select:focus {
+.field.invalid:not(.border, .round) > input,
+.field.invalid:not(.border, .round) > textarea,
+.field.invalid:not(.border, .round) > select,
+.field.invalid:not(.border, .round) > input:focus,
+.field.invalid:not(.border, .round) > textarea:focus,
+.field.invalid:not(.border, .round) > select:focus {
   border-bottom-color: var(--error);
 }
 
@@ -376,7 +364,6 @@ input[type=file] {
   left: 16rem;
   font-size: 16rem;
   transform: translateY(-50%);
-  will-change: top, left;
   transition: var(--speed2) all, 0s background-color;
   z-index: 0;
 }
@@ -433,7 +420,7 @@ input[type=file] {
 }
 
 .field.invalid > label {
-  color: var(--error)!important;
+  color: var(--error) !important;
 }
 
 .field > label.required:after,
@@ -449,7 +436,7 @@ input[type=file] {
   bottom: 0;
   transform: translateY(100%);
   font-size: 12rem;
-  background: none!important;
+  background: none !important;
   padding-top: 2rem;
 }
 
@@ -458,7 +445,7 @@ a.helper {
 }
 
 .field > .error {
-  color: var(--error)!important;
+  color: var(--error) !important;
 }
 
 .field.round > .helper,
@@ -473,6 +460,4 @@ a.helper {
 table td > .field {
   max-height: 100%;
   height: 100%;
-  margin: 0;
-  padding: 0;
 }

package/src/cdn/elements/grids.css

@@ -0,0 +1,170 @@
+.grid {
+  --row-gap: 16rem;
+  display: grid;
+  grid-template-columns: repeat(12, calc(8.33% - var(--row-gap) + (var(--row-gap)/12)));
+  gap: var(--row-gap);
+}
+
+* + .grid {
+  margin-top: 16rem;
+}
+
+.grid.no-space {
+  --row-gap: 0rem;
+}
+
+.grid.medium-space {
+  --row-gap: 24rem;
+}
+
+.grid.large-space {
+  --row-gap: 32rem;
+}
+
+.s1 {
+  grid-area: auto/span 1;
+}
+
+.s2 {
+  grid-area: auto/span 2;
+}
+
+.s3 {
+  grid-area: auto/span 3;
+}
+
+.s4 {
+  grid-area: auto/span 4;
+}
+
+.s5 {
+  grid-area: auto/span 5;
+}
+
+.s6 {
+  grid-area: auto/span 6;
+}
+
+.s7 {
+  grid-area: auto/span 7;
+}
+
+.s8 {
+  grid-area: auto/span 8;
+}
+
+.s9 {
+  grid-area: auto/span 9;
+}
+
+.s10 {
+  grid-area: auto/span 10;
+}
+
+.s11 {
+  grid-area: auto/span 11;
+}
+
+.s12 {
+  grid-area: auto/span 12;
+}
+
+@media only screen and (min-width: 601px) {
+  .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,48 +1,48 @@
 i {
-  font-family: "Material Icons";
+  font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24rem;
-  line-height: inherit;
+  line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   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;
-  margin: 0 auto;
+  box-sizing: content-box;
 }
 
-i.outlined {
-  font-family: "Material Icons Outlined";
-}
-
-i.small {
+i.tiny {
   font-size: 16rem;
   width: 16rem;
 }
 
-i.medium {
-  font-size: 24rem;
-  width: 24rem;
+i.small {
+  font-size: 20rem;
+  width: 20rem;
 }
 
 i.large {
-  font-size: 32rem;
-  width: 32rem;
+  font-size: 28rem;
+  width: 28rem;
 }
 
 i.extra {
-  font-size: 48rem;
-  width: 48rem;
+  font-size: 32rem;
+  width: 32rem;
 }
 
-.circle > i {
-  vertical-align: unset;
+i.fill,
+a.row:hover > i,
+a.row:focus > i,
+.transparent:hover > i,
+.transparent:focus > i {
+  font-variation-settings: 'FILL' 1;
 }

package/src/cdn/elements/layouts.css

@@ -6,26 +6,6 @@
   position: fixed;
 }
 
-.absolute,
-.fixed {
-  border-radius: inherit;
-  float: none;
-}
-
-.absolute.round,
-.fixed.round,
-header.round,
-footer.round {
-  border-radius: 24rem;
-}
-
-.absolute.border,
-.fixed.border,
-header.border,
-footer.border {
-  border: 1rem solid var(--outline);
-}
-
 .absolute.left.right,
 .fixed.left.right {
   width: auto;
@@ -61,6 +41,12 @@ footer.border {
   width: 704rem;
 }
 
+header,
+footer {
+  padding: 0 16rem;
+  background-color: var(--surface);
+}
+
 header.fixed,
 footer.fixed {
   position: sticky;
@@ -68,15 +54,38 @@ footer.fixed {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 11;
+  z-index: 12;
   background-color: inherit;
+  border-radius: 0;
+}
+
+header.fixed::before,
+footer.fixed:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0 -8rem;
+  max-width: 100%;
+  background-color: inherit;
+}
+
+.modal > header,
+.modal > footer {
+  padding: 0;
+}
+
+article > header,
+article > footer {
   padding: inherit;
   padding-left: 0;
   padding-right: 0;
+  z-index: 11 !important;
 }
 
 .modal > header.fixed,
-.card > header.fixed,
 article > header.fixed,
 .padding > header.fixed,
 .medium-padding > header.fixed {
@@ -84,7 +93,6 @@ article > header.fixed,
 }
 
 .modal > footer.fixed,
-.card > footer.fixed,
 article > footer.fixed,
 .padding > footer.fixed,
 .medium-padding > footer.fixed {

package/src/cdn/elements/loaders.css

@@ -4,7 +4,6 @@
   width: 40rem;
   height: 40rem;
   border-radius: 50%;
-  box-sizing: border-box;
   border: 4rem 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;
@@ -17,12 +16,6 @@
   border-width: 3rem;
 }
 
-.loader.medium {
-  width: 40rem;
-  height: 40rem;
-  border-width: 4rem;
-}
-
 .loader.large {
   width: 56rem;
   height: 56rem;
@@ -30,87 +23,87 @@
 }
 
 .loader.red {
-  border-color: #f44336 !important;
+  border-color: #f44336;
 }
 
 .loader.pink {
-  border-color: #e91e63 !important;
+  border-color: #e91e63;
 }
 
 .loader.purple {
-  border-color: #9c27b0 !important;
+  border-color: #9c27b0;
 }
 
 .loader.deep-purple {
-  border-color: #673ab7 !important;
+  border-color: #673ab7;
 }
 
 .loader.indigo {
-  border-color: #3f51b5 !important;
+  border-color: #3f51b5;
 }
 
 .loader.blue {
-  border-color: #2196f3 !important;
+  border-color: #2196f3;
 }
 
 .loader.light-blue {
-  border-color: #03a9f4 !important;
+  border-color: #03a9f4;
 }
 
 .loader.cyan {
-  border-color: #00bcd4 !important;
+  border-color: #00bcd4;
 }
 
 .loader.teal {
-  border-color: #009688 !important;
+  border-color: #009688;
 }
 
 .loader.green {
-  border-color: #4caf50 !important;
+  border-color: #4caf50;
 }
 
 .loader.light-green {
-  border-color: #8bc34a !important;
+  border-color: #8bc34a;
 }
 
 .loader.lime {
-  border-color: #cddc39 !important;
+  border-color: #cddc39;
 }
 
 .loader.yellow {
-  border-color: #ffeb3b !important;
+  border-color: #ffeb3b;
 }
 
 .loader.amber {
-  border-color: #ffc107 !important;
+  border-color: #ffc107;
 }
 
 .loader.orange {
-  border-color: #ff9800 !important;
+  border-color: #ff9800;
 }
 
 .loader.deep-orange {
-  border-color: #ff5722 !important;
+  border-color: #ff5722;
 }
 
 .loader.brown {
-  border-color: #795548 !important;
+  border-color: #795548;
 }
 
 .loader.blue-grey {
-  border-color: #607d8b !important;
+  border-color: #607d8b;
 }
 
 .loader.grey {
-  border-color: #9e9e9e !important;
+  border-color: #9e9e9e;
 }
 
 .loader.black {
-  border-color: #000000 !important;
+  border-color: #000000;
 }
 
 .loader.white {
-  border-color: #ffffff !important;
+  border-color: #ffffff;
 }
 
 .field > .loader {