beercss 2.1.3 → 2.2.2

package/src/cdn/elements/media.css

@@ -1,33 +1,8 @@
-img,
-video {
-  border-radius: inherit;
-  margin: 0 auto;
-  max-width: none !important;
-  max-height: none !important;
-  min-width: auto !important;
-  min-height: auto !important;
-}
-
-img.right,
-video.right,
-i.right {
-  position: absolute;
-  right: 0;
-}
-
-img.left,
-video.left,
-i.left {
-  position: absolute;
-  left: 0;
-}
-
 img.small,
 img.medium,
 img.large,
 img.tiny,
 img.extra,
-img.border,
 img.round,
 img.circle,
 img.responsive,
@@ -36,129 +11,120 @@ video.medium,
 video.large,
 video.tiny,
 video.extra,
-video.border,
 video.round,
 video.circle,
 video.responsive {
   object-fit: cover;
   object-position: center;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
-}
-
-img.border,
-video.border {
-  border: 1rem solid var(--outline);
+  height: 48rem;
+  width: 48rem;
 }
 
 img.round,
 video.round {
-  border-radius: 8rem !important;
-  height: 48rem !important;
-  width: 48rem !important;
+  border-radius: 8rem;
 }
 
 img.circle,
 video.circle {
-  border-radius: 50% !important;
-  height: 48rem !important;
-  width: 48rem !important;
+  border-radius: 50%;
 }
 
 img.tiny,
 video.tiny {
-  height: 32rem !important;
-  width: 32rem !important;
+  height: 32rem;
+  width: 32rem;
 }
 
 img.small,
 video.small {
-  height: 40rem !important;
-  width: 40rem !important;
-}
-
-img.medium,
-video.medium {
-  height: 48rem !important;
-  width: 48rem !important;
+  height: 40rem;
+  width: 40rem;
 }
 
 img.large,
 video.large {
-  height: 56rem !important;
-  width: 56rem !important;
+  height: 56rem;
+  width: 56rem;
 }
 
 img.extra,
 video.extra {
-  height: 64rem !important;
-  width: 64rem !important;
+  height: 64rem;
+  width: 64rem;
 }
 
 img.responsive,
 video.responsive {
-  width: 100% !important;
-  height: 100% !important;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
 }
 
 button > img.responsive,
 .button > img.responsive,
 .chip > img.responsive {
-  width: 40rem!important;
-  border: 2rem solid transparent;
-  box-sizing: border-box;
+  width: 40rem;
+}
+
+button:not(.transparent) > img.responsive,
+.button:not(.transparent) > img.responsive,
+.chip:not(.transparent) > img.responsive {
+  border: 4rem solid transparent;
 }
 
 button.small > img.responsive,
 .button.small > img.responsive,
 .chip.small > img.responsive {
-  width: 32rem!important;
+  width: 32rem;
 }
 
 button.large > img.responsive,
 .button.large > img.responsive,
 .chip.large > img.responsive {
-  width: 48rem!important;
+  width: 48rem;
 }
 
 button.extra > img.responsive,
 .button.extra > img.responsive,
 .chip.extra > img.responsive {
-  width: 56rem!important;
+  width: 56rem;
 }
 
 img.responsive.tiny,
 video.responsive.tiny {
-  width: 100% !important;
-  height: 64rem !important;
+  width: 100%;
+  height: 64rem;
 }
 
 img.responsive.small,
 video.responsive.small {
-  width: 100% !important;
-  height: 128rem !important;
+  width: 100%;
+  height: 128rem;
 }
 
 img.responsive.medium,
 video.responsive.medium {
-  width: 100% !important;
-  height: 192rem !important;
+  width: 100%;
+  height: 192rem;
 }
 
 img.responsive.large,
 video.responsive.large {
-  width: 100% !important;
-  height: 256rem !important;
+  width: 100%;
+  height: 256rem;
 }
 
 img.responsive.extra,
 video.responsive.extra {
-  width: 100% !important;
-  height: 320rem !important;
+  width: 100%;
+  height: 320rem;
 }
 
 img.responsive.round,
 video.responsive.round {
-  border-radius: 24rem !important;
+  border-radius: 32rem;
 }
 
 img.empty-state,
@@ -171,60 +137,61 @@ button > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
 .button > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
 .chip > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
 .field > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
-.tabs > a > 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!important;
-  max-width: 24rem!important;
-  min-height: 24rem!important;
-  max-height: 24rem!important;
+  min-width: 24rem;
+  max-width: 24rem;
+  min-height: 24rem;
+  max-height: 24rem;
 }
 
-.button.diamond > img,
-button.diamond > img,
-.button.circle > img,
-button.circle > img,
-.button.square > img,
-button.square > img {
-  margin: 0!important;
-  padding: 0!important;
+.button:not(.circle, .square) > i,
+.button:not(.circle, .square) > img,
+button:not(.circle, .square) > i,
+button:not(.circle, .square) > img,
+.chip:not(.circle, .square) > i,
+.chip:not(.circle, .square) > img {
+  margin: 0 0 0 -8rem;
 }
 
-.button > img.responsive:first-child, 
-button > img.responsive:first-child,
-.chip > img.responsive:first-child {
-  margin-left: -16rem;
+.button:not(.circle, .square) > span + i,
+.button:not(.circle, .square) > span + img,
+button:not(.circle, .square) > span + i,
+button:not(.circle, .square) > span + img,
+.chip:not(.circle, .square) > span + i,
+.chip:not(.circle, .square) > span + img {
+  margin: 0 -8rem 0 0;
 }
 
-.button > img.responsive:last-child, 
-button > img.responsive:last-child,
-.chip > img.responsive:last-child {
-  margin-right: -16rem;
+.button:not(.circle, .square) > img.responsive, 
+button:not(.circle, .square) > img.responsive {
+  margin: 0 0 0 -24rem;
 }
 
-.button.extend > i:first-child,
-.button.extend > img:first-child,
-button.extend > i:first-child,
-button.extend > img:first-child {
-  position: absolute;
-  left: 16rem;
+.button:not(.circle, .square) > span + img.responsive,
+button:not(.circle, .square) > span + img.responsive {
+  margin: 0 -24rem 0 0;
 }
 
-.button.extend > i:last-child,
-.button.extend > img:last-child,
-button.extend > i:last-child,
-button.extend > img:last-child {
-  position: absolute;
-  right: 16rem;
+.chip:not(.circle, .square) > img.responsive {
+  margin: 0 0 0 -16rem;
 }
 
-.button.extend > img.responsive:first-child,
-button.extend > img.responsive:first-child {
+.chip:not(.circle, .square) > span + img.responsive {
+  margin: 0 -16rem 0 0;
+}
+
+.extend > i,
+.extend > img {
   position: absolute;
+  left: 16rem;
+}
+
+.extend > img.responsive {
   left: 0;
+  width: 56rem;
 }
 
-.button.extend > img.responsive:last-child,
-button.extend > img.responsive:last-child {
-  position: absolute;
-  right: 0;
+.extend.border > img.responsive {
+  width: 54rem;
 }

package/src/cdn/elements/modals.css

@@ -2,11 +2,10 @@
   opacity: 0;
   visibility: hidden;
   position: fixed;
-  box-shadow: var(--shadow2);
-  color: var(--on-surface-variant);
-  background-color: var(--surface-variant);
+  box-shadow: var(--elevate2);
+  color: var(--on-surface);
+  background-color: var(--surface);
   padding: 16rem;
-  box-sizing: border-box;
   z-index: 100;
   left: 50%;
   top: 10%;
@@ -15,34 +14,12 @@
   max-height: 80%;
   overflow-x: hidden;
   overflow-y: auto;
-  will-change: opacity, transform;
   transition: var(--speed3) all, 0s background-color;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -64rem);
 }
 
-.modal.border {
-  border: 1rem solid var(--outline);
-  box-shadow: none;
-}
-
-.modal.round {
-  border-radius: 24rem;
-}
-
-.modal.bottom.round {
-  border-radius: 24rem 24rem 0 0;
-}
-
-.modal.top.round {
-  border-radius: 0 0 24rem 24rem;
-}
-
-.modal.left.round {
-  border-radius: 0 24rem 24rem 0;
-}
-
-.modal.right.round {
-  border-radius: 24rem 0 0 24rem;
+.modal:not(.left, .right, .top, .bottom) {
+  border-radius: 12rem;
 }
 
 .modal.small {
@@ -66,19 +43,11 @@
   transform: translate(-50%, 0);
 }
 
-.modal.active.left {
-  transform: translate(0, 0);
-}
-
-.modal.active.right {
-  transform: translate(0, 0);
-}
-
-.modal.active.top {
-  transform: translate(0, 0);
-}
-
-.modal.active.bottom {
+.modal.active.left,
+.modal.active.right,
+.modal.active.top,
+.modal.active.bottom,
+.modal.active.max {
   transform: translate(0, 0);
 }
 
@@ -97,7 +66,6 @@
 
 .modal.left {
   opacity: 1;
-  float: none;
   top: 0;
   left: 0;
   right: auto;
@@ -110,7 +78,6 @@
 
 .modal.right {
   opacity: 1;
-  float: none;
   top: 0;
   left: auto;
   right: 0;
@@ -134,6 +101,19 @@
   transform: translateY(100%);
 }
 
+.modal.max {
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  transform: translateY(64rem);
+  border-radius: 0;
+}
+
 .modal.left.small,
 .modal.right.small {
   width: 320rem;
@@ -168,9 +148,9 @@ nav > .modal,
 nav.left > .modal {
   z-index: 0;
   text-align: left;
-  padding: 16rem 16rem 16rem 80rem;
   overflow-y: auto;
   background-color: inherit;
+  padding: 16rem 16rem 16rem 80rem;
 }
 
 nav.right > .modal {
@@ -185,15 +165,11 @@ nav.bottom > .modal {
   padding: 16rem 48rem 80rem 48rem;
 }
 
-.modal > a:not(button, .button, .chip):hover,
-.modal > a:not(button, .button, .chip).active {
-  background-color: var(--active);
-}
-
-.modal > a.row {
-  margin: 0 -8rem;
+.modal > a.row:hover,
+.modal > a.row.active {
+  background-color: var(--secondary-container);
 }
 
-.modal > a:not(button, .button, .chip) {
-  padding: 12rem 0;
+.modal > .row {
+  padding: 12rem 8rem;
 }

package/src/cdn/elements/navigations.css

@@ -1,37 +1,75 @@
-nav:not(.left, .right, .top, .bottom) {
+nav,
+.row {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   white-space: nowrap;
-  margin: 0 -8rem;
+  border-radius: 0;
+  gap: 16rem;
 }
 
-*:not(.progress) + nav:not(.left, .right, .top, .bottom) {
-  margin-top: 8rem;
+*:not(.divider, .small-divider, .medium-divider, .large-divider) + nav:not(.left, .right, .top, .bottom),
+*:not(.divider, .small-divider, .medium-divider, .large-divider) + .row:not(a) {
+  margin-top: 16rem;
 }
 
-nav:not(.left, .right, .top, .bottom) > :not(.dropdown, .badge) {
-  margin: 0 8rem;
+nav *,
+.row * {
+  margin-top: 0;
+  margin-bottom: 0;
+  flex: none;
 }
 
-nav.wrap {
-  display: block;
+nav > *,
+.row > * {
+  margin: 0 !important;
   white-space: normal;
 }
 
-*:not(.progress) + nav.wrap {
-  margin: 8rem -8rem;
+nav.no-space,
+.row.no-space {
+  gap: 0rem;
+}
+
+nav.no-space > .border + .border,
+.row.no-space > .border + .border {
+  border-left: 0;
+}
+
+nav.medium-space,
+.row.medium-space {
+  gap: 24rem;
 }
 
-nav.wrap > :not(.dropdown, .badge) {
-  margin: 8rem;
+nav.large-space,
+.row.large-space {
+  gap: 32rem;
+}
+
+nav > .max,
+.row > .max {
+  flex: auto;
+}
+
+nav.wrap,
+.row.wrap {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.field > nav {
-  padding: 0 8rem;
+header > nav,
+header > .row {
+  min-height: 64rem;
 }
 
-nav > .max {
-  flex-grow: 1;
+footer > nav,
+footer > .row {
+  min-height: 80rem;
+}
+
+nav > .border.no-margin + .border.no-margin,
+.row > .border.no-margin + .border.no-margin {
+  border-left: 0;
 }
 
 nav.left,
@@ -44,11 +82,9 @@ nav.bottom {
   flex-direction: column;
   border: 0;
   position: fixed;
-  box-shadow: var(--shadow2);
-  color: var(--on-surface-variant);
-  background-color: var(--surface-variant);
+  color: var(--on-surface);
+  background-color: var(--surface);
   transform: none;
-  box-sizing: border-box;
   z-index: 100;
   left: 0;
   top: 0;
@@ -57,7 +93,7 @@ nav.bottom {
   height: auto;
   width: auto;
   text-align: center;
-  margin: 0;
+  padding: 8rem;
 }
 
 nav.left,
@@ -70,35 +106,6 @@ nav.bottom {
   height: 80rem;
 }
 
-nav.border {
-  box-shadow: none;
-  border: 1rem solid var(--outline);
-}
-
-nav.left.border {
-  border-top: none;
-  border-bottom: none;
-  border-left: none;
-}
-
-nav.right.border {
-  border-top: none;
-  border-bottom: none;
-  border-right: none;
-}
-
-nav.top.border {
-  border-top: none;
-  border-right: none;
-  border-left: none;
-}
-
-nav.bottom.border {
-  border-bottom: none;
-  border-right: none;
-  border-left: none;
-}
-
 nav.top {
   bottom: auto;
   justify-content: center;
@@ -130,7 +137,6 @@ nav.bottom > a:not(button, .button, .chip, img, video) {
   min-width: 56rem;
   min-height: 56rem;
   text-align: center;
-  margin: 8rem;
   display: grid;
   z-index: 101;
 }
@@ -158,6 +164,7 @@ nav.bottom:before {
   bottom: 0;
   background-color: inherit;
   z-index: 101;
+  border-radius: inherit;
 }
 
 nav.left > :not(.modal, .overlay),
@@ -167,18 +174,6 @@ nav.bottom > :not(.modal, .overlay) {
   z-index: 101;  
 }
 
-nav.no-space > a:not(button, .button, .chip) {
-  margin: 0;
-}
-
-nav.medium-space > a:not(button, .button, .chip) {
-  margin: 16rem;
-}
-
-nav.large-space > a:not(button, .button, .chip) {
-  margin: 24rem;
-}
-
 nav.left > a:not(button, .button, .chip) > i,
 nav.right > a:not(button, .button, .chip) > i,
 nav.top > a:not(button, .button, .chip) > i,
@@ -186,6 +181,7 @@ nav.bottom > a:not(button, .button, .chip) > i {
   padding: 4rem;
   border-radius: 32rem;
   transition: var(--speed1) padding linear;
+  margin: 0 auto;
 }
 
 nav.left > a:not(button, .button, .chip):hover > i,
@@ -200,16 +196,10 @@ nav.top > a:not(button, .button, .chip).active > i,
 nav.bottom > a:not(button, .button, .chip):focus > i,
 nav.bottom > a:not(button, .button, .chip):hover > i,
 nav.bottom > a:not(button, .button, .chip).active > i {
-  background-color: var(--primary);
-  color: var(--on-primary);
+  background-color: var(--secondary-container);
+  color: var(--on-secondary-container);
   padding: 4rem 16rem;
-}
-
-nav.left > .modal,
-nav.right > .modal,
-nav.top > .modal,
-nav.bottom > .modal {
-  margin: 0;
+  font-variation-settings: 'FILL' 1;
 }
 
 nav.left > .modal {
@@ -243,6 +233,18 @@ nav.middle-align {
   justify-content: center;
 }
 
+nav:not(.left, .right) > .space {
+  width: 8rem;
+}
+
+nav:not(.left, .right) > .medium-space {
+  width: 16rem;
+}
+
+nav:not(.left, .right) > .large-space {
+  width: 24rem;
+}
+
 @media only screen and (max-width: 600px) {
   nav.top,
   nav.bottom {

package/src/cdn/elements/overlays.css

@@ -9,7 +9,6 @@
   color: var(--on-background);
   background-color: var(--overlay);
   z-index: 100;
-  will-change: opacity;
   transition: var(--speed3) all, 0s background-color;
 }
 

package/src/cdn/elements/progress.css

@@ -5,9 +5,6 @@
   bottom: 0;
   left: 0;
   right: 0;
-  border-radius: inherit;
-  margin: 0 !important;
-  padding: 0 !important;
   transition: var(--speed4) clip-path;
   clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
 }
@@ -26,4 +23,8 @@
 
 .progress.bottom {
   clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
+}
+
+.progress + * {
+  margin-top: 0;
 }