beercss 2.1.3 → 2.2.2

package/src/cdn/helpers/reset.css

@@ -5,12 +5,13 @@
   color: inherit;
   margin: 0;
   padding: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
 }
 
 body {
   color: var(--on-background);
-  background-color: var(--background);
-  margin: 0;
+  background-color: var(--body);
   overflow-x: hidden;
 }
 
@@ -37,4 +38,4 @@ button,
   font-family: inherit;
   outline: inherit;
   justify-content: center;
-}
+}

package/src/cdn/helpers/responsive.css

@@ -1,43 +1,28 @@
 .responsive {
-  margin: 0;
   width: -webkit-fill-available;
   width: -moz-available;
 }
 
-.responsive > i,
-.responsive > img {
-  margin: 0;
-}
-
 @media only screen and (max-width: 600px) {
-  .medium-device:not(.small-device),
-  .large-device:not(.small-device),
-  .medium-device.large-device:not(.small-device),
   .m:not(.s),
   .l:not(.s),
   .m.l:not(.s) {
-    display: none !important;
+    display: none;
   }
 }
 
 @media only screen and (min-width: 601px) and (max-width: 992px) {
-  .small-device:not(.medium-device),
-  .large-device:not(.medium-device),
-  .small-device.large-device:not(.medium-device),
   .s:not(.m),
   .l:not(.m),
   .s.l:not(.m) {
-    display: none !important;
+    display: none;
   }
 }
 
 @media only screen and (min-width: 993px) {
-  .medium-device:not(.large-device),
-  .small-device:not(.large-device),
-  .medium-device.small-device:not(.large-device),
   .m:not(.l),
   .s:not(.l),
   .m.s:not(.l) {
-    display: none !important;
+    display: none;
   }
 }

package/src/cdn/helpers/scrolls.css

@@ -4,5 +4,5 @@
 }
 
 .no-scroll {
-  overflow: hidden !important;
+  overflow: hidden;
 }

package/src/cdn/helpers/shadows.css

@@ -1,44 +1,23 @@
 .shadow {
   background-color: #00000050 !important;
-  box-shadow: none !important;
 }
 
 .left-shadow {
   background-color: transparent !important;
-  box-shadow: none !important;
-  background-image: linear-gradient(to right, black, transparent) !important;
+  background-image: linear-gradient(to right, black, transparent);
 }
 
 .right-shadow {
   background-color: transparent !important;
-  box-shadow: none !important;
-  background-image: linear-gradient(to left, black, transparent) !important;
+  background-image: linear-gradient(to left, black, transparent);
 }
 
 .bottom-shadow {
   background-color: transparent !important;
-  box-shadow: none !important;
-  background-image: linear-gradient(to top, black, transparent) !important;
+  background-image: linear-gradient(to top, black, transparent);
 }
 
 .top-shadow {
   background-color: transparent !important;
-  box-shadow: none !important;
-  background-image: linear-gradient(to bottom, black, transparent) !important;
-}
-
-.no-shadow {
-  box-shadow: none !important;
-}
-
-.small-shadow {
-  box-shadow: var(--shadow1) !important;
-}
-
-.medium-shadow {
-  box-shadow: var(--shadow2) !important;
-}
-
-.large-shadow {
-  box-shadow: var(--shadow3) !important;
+  background-image: linear-gradient(to bottom, black, transparent);
 }

package/src/cdn/helpers/sizes.css

@@ -27,12 +27,10 @@
 
 .wrap {
   display: block;
+  white-space: normal;
 }
 
-a.no-wrap {
-  flex-direction: row;
-}
-
-a.wrap {
-  flex-direction: column;
+.no-wrap:not(.dropdown) {
+  display: flex;
+  white-space: nowrap;
 }

package/src/cdn/helpers/spaces.css

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

package/src/cdn/helpers/theme.css

@@ -116,6 +116,8 @@
 
 .transparent {
   background-color: transparent !important;
+  box-shadow: none !important;
+  color: inherit !important;
 }
 
 .transparent-border {
@@ -124,4 +126,9 @@
 
 .transparent-text {
   color: transparent !important;
+}
+
+.fill:not(i) {
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
 }

package/src/cdn/helpers/typography.css

@@ -14,18 +14,18 @@ h4,
 h5,
 h6 {
   font-weight: 400;
-  margin-bottom: 8rem;
   display: flex;
   align-items: center;
+  margin-bottom: 8rem;
 }
 
-*:not(.progress) + h1,
-*:not(.progress) + h2,
-*:not(.progress) + h3,
-*:not(.progress) + h4,
-*:not(.progress) + h5,
-*:not(.progress) + h6 {
-  margin-top: 8rem;
+* + h1,
+* + h2,
+* + h3,
+* + h4,
+* + h5,
+* + h6 {
+  margin-top: 16rem;
 }
 
 h1 {
@@ -58,10 +58,14 @@ h6 {
 
 .truncate {
   overflow: hidden;
-  white-space: nowrap;
+  white-space: nowrap !important;
   text-overflow: ellipsis;
 }
 
+.truncate > * {
+  white-space: nowrap !important;
+}
+
 .small-text {
   font-size: 12rem;
 }

package/src/cdn/helpers/waves.css

@@ -15,15 +15,17 @@ button::after {
   background-image: radial-gradient(circle, rgba(255,255,255,.4) 1%, transparent 1%);
   opacity: 0;
   transition: none;
-  will-change: background-size;
 }
 
 .wave.dark::after,
-.chip.border::after,
 .button.none::after,
 button.none::after,
+.chip.border::after,
 .button.border::after,
-button.border::after {
+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%);
 }
 

package/src/cdn/settings/dark.css

@@ -25,11 +25,12 @@ body.dark {
   --inverse-surface: #E6E1E5;
   --inverse-on-surface: #313033;
 
+  --body: #000000;
   --overlay: rgba(0,0,0,.5);
   --active: rgba(255,255,255,.2);
-  --shadow1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);
-  --shadow2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);
-  --shadow3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);
+  --elevate1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);
+  --elevate2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);
+  --elevate3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);
   --size: 1px;
   --font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   --speed1: .1s;

package/src/cdn/settings/light.css

@@ -26,11 +26,12 @@ body.light {
   --inverse-surface: #313033;
   --inverse-on-surface: #F4EFF4;
 
+  --body: #ffffff;
   --overlay: rgba(0,0,0,.5);
   --active: rgba(0,0,0,.1);
-  --shadow1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);
-  --shadow2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);
-  --shadow3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);
+  --elevate1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);
+  --elevate2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);
+  --elevate3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);
   --size: 1px;
   --font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   --speed1: .1s;

package/src/cdn/settings/urls.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Roboto:wght@300;400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&family=Roboto:wght@300;400;500&display=swap");

package/src/cdn/elements/rows.css

@@ -1,251 +0,0 @@
-.row {
-  margin: 0 -8rem;
-  min-width: 100%;
-}
-
-.row .row:not(.no-wrap) {
-  margin-top: -8rem;
-}
-
-.row .row .row:not(.no-wrap) {
-  margin-top: 8rem;
-}
-
-.row + .row,
-.row .row + .row {
-  margin-top: 16rem;
-}
-
-.row:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-.row.no-space {
-  height: auto;
-  margin: 0;
-}
-
-.row.min {
-  width: fit-content;
-  min-width: auto;
-  max-width: -webkit-fill-available;
-}
-
-.row.space,
-.row.small-space {
-  margin: 0 -8rem;
-}
-
-.row.medium-space {
-  margin: 0 -12rem;
-}
-
-.row.large-space {
-  margin: 0 -16rem;
-}
-
-.row > .col {
-  float: left;
-  text-align: left;
-  box-sizing: border-box;
-  width: min-content;
-  padding: 8rem;
-  margin-left: auto;
-  left: auto;
-  right: auto;
-}
-
-.row.no-space > .col {
-  padding: 0;
-}
-
-.row.space > .col,
-.row.small-space > .col {
-  padding: 8rem;
-}
-
-.row.medium-space > .col {
-  padding: 12rem;
-}
-
-.row.large-space > .col {
-  padding: 16rem;
-}
-
-.row.no-wrap {
-  margin-top: 0;
-  margin-bottom: 0;
-  display: flex;
-}
-
-.modal > .row.no-wrap:only-child {
-  min-height: 100%;
-  height: max-content;
-}
-
-.row + .row {
-  margin-top: 16rem;
-}
-
-.row.no-wrap > .col {
-  float: none;
-  flex: 1;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin: 0;
-}
-
-.row.no-wrap > .col.min,
-.row.no-wrap.scroll > .col {
-  flex: 0;
-}
-
-.row .col.s1 {
-  width: 8.3333333333%;
-}
-
-.row .col.s2 {
-  width: 16.6666666667%;
-}
-
-.row .col.s3 {
-  width: 25%;
-}
-
-.row .col.s4 {
-  width: 33.3333333333%;
-}
-
-.row .col.s5 {
-  width: 41.6666666667%;
-}
-
-.row .col.s6 {
-  width: 50%;
-}
-
-.row .col.s7 {
-  width: 58.3333333333%;
-}
-
-.row .col.s8 {
-  width: 66.6666666667%;
-}
-
-.row .col.s9 {
-  width: 75%;
-}
-
-.row .col.s10 {
-  width: 83.3333333333%;
-}
-
-.row .col.s11 {
-  width: 91.6666666667%;
-}
-
-.row .col.s12 {
-  width: 100%;
-}
-
-@media only screen and (min-width: 601px) {
-  .row .col.m1 {
-    width: 8.3333333333%;
-  }
-  
-  .row .col.m2 {
-    width: 16.6666666667%;
-  }
-
-  .row .col.m3 {
-    width: 25%;
-  }
-
-  .row .col.m4 {
-    width: 33.3333333333%;
-  }
-
-  .row .col.m5 {
-    width: 41.6666666667%;
-  }
-
-  .row .col.m6 {
-    width: 50%;
-  }
-
-  .row .col.m7 {
-    width: 58.3333333333%;
-  }
-
-  .row .col.m8 {
-    width: 66.6666666667%;
-  }
-
-  .row .col.m9 {
-    width: 75%;
-  }
-
-  .row .col.m10 {
-    width: 83.3333333333%;
-  }
-
-  .row .col.m11 {
-    width: 91.6666666667%;
-  }
-
-  .row .col.m12 {
-    width: 100%;
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  .row .col.l1 {
-    width: 8.3333333333%;
-  }
-
-  .row .col.l2 {
-    width: 16.6666666667%;
-  }
-
-  .row .col.l3 {
-    width: 25%;
-  }
-
-  .row .col.l4 {
-    width: 33.3333333333%;
-  }
-
-  .row .col.l5 {
-    width: 41.6666666667%;
-  }
-
-  .row .col.l6 {
-    width: 50%;
-  }
-
-  .row .col.l7 {
-    width: 58.3333333333%;
-  }
-
-  .row .col.l8 {
-    width: 66.6666666667%;
-  }
-
-  .row .col.l9 {
-    width: 75%;
-  }
-
-  .row .col.l10 {
-    width: 83.3333333333%;
-  }
-
-  .row .col.l11 {
-    width: 91.6666666667%;
-  }
-
-  .row .col.l12 {
-    width: 100%;
-  }
-}