beercss 1.3.0 → 2.0.3

package/src/cdn/elements/media.css

@@ -38,12 +38,12 @@ video.circle,
 video.responsive {
   object-fit: cover;
   object-position: center;
-  transition: var(--speed-3) transform, var(--speed-3) border-radius, var(--speed-3) padding;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
 img.border,
 video.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--outline);
 }
 
 img.round,
@@ -96,6 +96,12 @@ video.responsive {
   height: 100% !important;
 }
 
+button > i,
+.button > i,
+.chip > i {
+  color: inherit;
+}
+
 button > img.responsive,
 .button > img.responsive,
 .chip > img.responsive {
@@ -160,4 +166,44 @@ button.circle > img,
 button.square > img {
   margin: 0!important;
   padding: 0!important;
+}
+
+.button > .responsive:first-child, 
+button > .responsive:first-child,
+.chip > .responsive:first-child {
+  margin-left: -16rem;
+}
+
+.button > .responsive:last-child, 
+button > .responsive:last-child,
+.chip > .responsive:last-child {
+  margin-right: -16rem;
+}
+
+.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.extend > i:last-child,
+.button.extend > img:last-child,
+button.extend > i:last-child,
+button.extend > img:last-child {
+  position: absolute;
+  right: 16rem;
+}
+
+.button.extend > img.responsive:first-child,
+button.extend > img.responsive:first-child {
+  position: absolute;
+  left: 0;
+}
+
+.button.extend > img.responsive:last-child,
+button.extend > img.responsive:last-child {
+  position: absolute;
+  right: 0;
 }

package/src/cdn/elements/menus.css

@@ -5,8 +5,9 @@
   flex-direction: column;
   border: 0;
   position: fixed;
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow2);
+  color: var(--on-surface-variant);
+  background-color: var(--surface-variant);
   transform: none;
   box-sizing: border-box;
   z-index: 100;
@@ -43,7 +44,7 @@
 
 .menu.border {
   box-shadow: none;
-  border: 1rem solid var(--color-2a);
+  border: 1rem solid var(--outline);
 }
 
 .menu.left.border {
@@ -70,26 +71,6 @@
   border-left: none;
 }
 
-.menu.round {
-  border-radius: 40rem;
-}
-
-.menu.left.round:not(.margin, .small-margin, .medium-margin, .large-margin) {
-  border-radius: 0 24rem 24rem 0;
-}
-
-.menu.right.round:not(.margin, .small-margin, .medium-margin, .large-margin) {
-  border-radius: 24rem 0 0 24rem;
-}
-
-.menu.bottom.round:not(.margin, .small-margin, .medium-margin, .large-margin) {
-  border-radius: 24rem 24rem 0 0;
-}
-
-.menu.top.round:not(.margin, .small-margin, .medium-margin, .large-margin) {
-  border-radius: 0 0 24rem 24rem;
-}
-
 .menu.active {
   box-shadow: none;
 }
@@ -144,7 +125,7 @@
   z-index: 1;
 }
 
-.menu > a:not(.button, .chip) {
+.menu > a:not(button, .button, .chip) {
   border: 0;
   display: flex;
   align-items: center;
@@ -161,46 +142,53 @@
   min-height: 56rem;
 }
 
-.menu.no-space:not(.left, .right) > a:not(.button, .chip) {
+.menu.no-space:not(.left, .right) > a:not(button, .button, .chip) {
   margin: 0;
 }
 
-.menu:not(.left, .right) > a:not(.button, .chip),
-.menu.small-space:not(.left, .right) > a:not(.button, .chip) {
+.menu:not(.left, .right) > a:not(button, .button, .chip),
+.menu.small-space:not(.left, .right) > a:not(button, .button, .chip) {
   margin: 0 8rem;
 }
 
-.menu.medium-space:not(.left, .right) > a:not(.button, .chip) {
+.menu.medium-space:not(.left, .right) > a:not(button, .button, .chip) {
   margin: 0 12rem;
 }
 
-.menu.large-space:not(.left, .right) > a:not(.button, .chip) {
+.menu.large-space:not(.left, .right) > a:not(button, .button, .chip) {
   margin: 0 16rem;
 }
 
-.menu.no-space:not(.top, .bottom) > a:not(.button, .chip) {
+.menu.no-space:not(.top, .bottom) > a:not(button, .button, .chip) {
   margin: 0;
 }
 
-.menu:not(.top, .bottom) > a:not(.button, .chip),
-.menu.small-space:not(.top, .bottom) > a:not(.button, .chip) {
+.menu:not(.top, .bottom) > a:not(button, .button, .chip),
+.menu.small-space:not(.top, .bottom) > a:not(button, .button, .chip) {
   margin: 4rem 0;
 }
 
-.menu.medium-space:not(.top, .bottom) > a:not(.button, .chip) {
+.menu.medium-space:not(.top, .bottom) > a:not(button, .button, .chip) {
   margin: 8rem 0;
 }
 
-.menu.large-space:not(.top, .bottom) > a:not(.button, .chip) {
+.menu.large-space:not(.top, .bottom) > a:not(button, .button, .chip) {
   margin: 12rem 0;
 }
 
-.menu > a:not(.button, .chip):hover {
-  color: var(--color-1);
+.menu > a:not(button, .button, .chip) > i {
+  margin-bottom: 4rem;
+  padding: 4rem;
+  border-radius: 32rem;
+  transition: var(--speed1) padding linear;
 }
 
-.menu > a:not(.button, .chip).active {
-  color: var(--color-1);
+.menu > a:not(button, .button, .chip):hover > i,
+.menu > a:not(button, .button, .chip):focus > i,
+.menu > a:not(button, .button, .chip).active > i {
+  background-color: var(--primary);
+  color: var(--on-primary);
+  padding: 4rem 16rem;
 }
 
 .menu > .row {

package/src/cdn/elements/modals.css

@@ -2,8 +2,9 @@
   opacity: 0;
   visibility: hidden;
   position: fixed;
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow2);
+  color: var(--on-surface-variant);
+  background-color: var(--surface-variant);
   padding: 16rem;
   box-sizing: border-box;
   z-index: 100;
@@ -17,7 +18,7 @@
 }
 
 .modal.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--outline);
   box-shadow: none;
 }
 
@@ -60,27 +61,27 @@
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0);
-  animation: var(--speed-2) modal-to-center ease;
+  animation: var(--speed2) modal-to-center ease;
 }
 
 .modal.active.left {
   transform: translate(0);
-  animation: var(--speed-2) modal-to-right ease;
+  animation: var(--speed2) modal-to-right ease;
 }
 
 .modal.active.right {
   transform: translate(0);
-  animation: var(--speed-2) modal-to-left ease;
+  animation: var(--speed2) modal-to-left ease;
 }
 
 .modal.active.top {
   transform: translate(0);
-  animation: var(--speed-2) modal-to-bottom ease;
+  animation: var(--speed2) modal-to-bottom ease;
 }
 
 .modal.active.bottom {
   transform: translate(0);
-  animation: var(--speed-2) modal-to-top ease;
+  animation: var(--speed2) modal-to-top ease;
 }
 
 .modal.top {
@@ -159,6 +160,7 @@
   text-align: left;
   padding: 16rem 16rem 16rem 80rem;
   overflow-y: auto;
+  background-color: inherit;
 }
 
 .menu.right > .modal {
@@ -173,6 +175,19 @@
   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:not(button, .button, .chip) {
+  padding: 12rem 0;
+}
+
 @keyframes modal-to-right {
   from {
     opacity: 0;

package/src/cdn/elements/navs.css

@@ -5,7 +5,7 @@ nav {
   margin: 0 -8rem;
 }
 
-* + nav {
+*:not(.progress) + nav {
   margin-top: 16rem;
 }
 
@@ -18,7 +18,7 @@ nav.wrap {
   white-space: normal;
 }
 
-* + nav.wrap {
+*:not(.progress) + nav.wrap {
   margin: 8rem -8rem;
 }
 

package/src/cdn/elements/overlays.css

@@ -6,16 +6,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0.5);
+  color: var(--on-background);
+  background-color: var(--overlay);
   z-index: 100;
 }
 
-.overlay.light {
-  color: var(--color-2);
-  background-color: var(--color-4a);
-}
-
 .menu > .overlay {
   z-index: 0;
 }
@@ -23,7 +18,7 @@
 .overlay.active {
   opacity: 1;
   visibility: visible;
-  animation: var(--speed-3) overlay-to-active;
+  animation: var(--speed3) overlay-to-active;
 }
 
 .overlay.active.top-align,

package/src/cdn/elements/pages.css

@@ -1,4 +1,6 @@
-.page {
+.page,
+.modal:not(.active) .page.active,
+.page:not(.active) .page.active {
   opacity: 0;
   position: absolute;
   visibility: hidden;
@@ -12,19 +14,19 @@
 }
 
 .page.top.active {
-  animation: var(--speed-4) page-to-bottom ease;
+  animation: var(--speed4) page-to-bottom ease;
 }
 
 .page.bottom.active  {
-  animation: var(--speed-4) page-to-top ease;
+  animation: var(--speed4) page-to-top ease;
 }
 
 .page.left.active {
-  animation: var(--speed-4) page-to-right ease;
+  animation: var(--speed4) page-to-right ease;
 }
 
 .page.right.active {
-  animation: var(--speed-4) page-to-left ease;
+  animation: var(--speed4) page-to-left ease;
 }
 
 @keyframes page-to-bottom {

package/src/cdn/elements/progress.css

@@ -0,0 +1,29 @@
+.progress {
+  position: absolute;
+  background-color: var(--active);
+  top: 0;
+  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%);
+}
+
+.progress.left {
+  clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
+}
+
+.progress.right {
+  clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
+}
+  
+.progress.top {
+  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
+}
+
+.progress.bottom {
+  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
+}

package/src/cdn/elements/selections.css

@@ -7,6 +7,8 @@
   line-height: normal;
   white-space: nowrap;
   cursor: pointer;
+  display: inline-flex;
+  align-items: center;
 }
 
 .checkbox > *,
@@ -28,7 +30,7 @@
 .switch > span {
   display: inline-flex;
   align-items: center;
-  color: var(--color-2);
+  color: var(--on-background);
   font-size: 14rem;
 }
 
@@ -61,8 +63,8 @@
   margin: 0 auto;
   padding: 0;
   outline: none;
-  cursor: pointer;
-  color: #9e9e9e;
+  cursor: inherit;
+  color: var(--primary);
   position: absolute;
   left: -24rem;
   background-color: transparent;
@@ -79,18 +81,18 @@
 
 .checkbox > input:focus + span::before,
 .radio > input:focus + span::before {
-  background-color: var(--color-2a);
-  box-shadow: 0 0 0 8rem var(--color-2a);
-  animation: var(--speed-1) to-checked ease-out;
+  background-color: var(--active);
+  box-shadow: 0 0 0 8rem var(--active);
+  animation: var(--speed1) to-checked ease-out;
 }
 
 .checkbox > input:checked + span::before {
-  color: var(--color-1);
+  color: var(--primary);
   content: "check_box";
 }
 
 .radio > input:checked + span::before {
-  color: var(--color-1);
+  color: var(--primary);
   content: "radio_button_checked";
 }
 
@@ -129,17 +131,17 @@
   position:absolute;
   left: 0;
   top: 50%;
-  background-color: #9e9e9e;
+  background-color: var(--on-background);
+  opacity: .6;
   width: 32rem;
   height: 14rem;
   border-radius: 8rem;
   animation: none;
-  cursor: pointer;
   transform: translate(-40rem, -50%);
 }
 
 .switch > input:checked + span::before {
-  background-color: var(--color-1a);
+  background-color: var(--primary);
 }
 
 .switch > input + span::after {
@@ -149,33 +151,34 @@
   width: 20rem;
   height: 20rem;
   background-color: #ffffff;
-  box-shadow: var(--shadow-1);
+  box-shadow: var(--shadow1);
   left: 0;
   top: 50%;
-  transition: var(--speed-1) transform, var(--speed-1) background-color;
+  transition: var(--speed1) transform, var(--speed1) background-color;
   transform: translate(-44rem, -50%);
 }
 
 .switch > input:checked + span::after {
-  background-color: var(--color-1);
+  background-color: var(--primary);
   transform: translate(-24rem, -50%);
 }
 
 .switch > input:focus + span::after {
-  box-shadow: 0 0 0 8rem var(--color-2a);
+  box-shadow: 0 0 0 8rem var(--active);
 }
 
 .checkbox > input:disabled + span,
 .radio > input:disabled + span,
 .switch > input:disabled + span {
-  opacity: 0.5;
+  opacity: .5;
+  cursor: not-allowed;
 }
 
 @keyframes to-checked {
   from {
-    box-shadow: 0 0 0 0 var(--color-2a);
+    box-shadow: 0 0 0 0 var(--active);
   }
   to {
-    box-shadow: 0 0 0 8rem var(--color-2a);
+    box-shadow: 0 0 0 8rem var(--active);
   }
 }

package/src/cdn/elements/tables.css

@@ -2,6 +2,7 @@ table {
   width: 100%;
   border-spacing: 0;
   font-size: 14rem;
+  color: var(--on-background);
 }
 
 table th {
@@ -21,7 +22,7 @@ table td {
 
 table.border td, 
 table.border th {
-  border-bottom: 1rem solid var(--color-2b);
+  border-bottom: 1rem solid var(--outline);
 }
 
 table.small td,

package/src/cdn/elements/tabs.css

@@ -1,7 +1,9 @@
 .tabs {
+  display: flex;
+  justify-content: space-around;
   margin-top: 16rem;
   white-space: nowrap;
-  border-bottom: 1rem solid var(--color-2b);
+  border-bottom: 1rem solid var(--outline);
 }
 
 * > .tabs:first-child {
@@ -13,12 +15,13 @@
   align-items: center;
   font-size: 14rem;
   font-weight: 500;
-  color: var(--color-2);
+  color: var(--on-background);
   padding: 0 16rem;
   text-transform: uppercase;
   border-bottom: 2rem solid transparent;
   text-align: center;
   min-height: 40rem;
+  width: 100%;
 }
 
 .tabs > a > span {
@@ -38,5 +41,21 @@
 }
 
 .tabs > a.active {
-  border-bottom: 2rem solid var(--color-2);
+  color: var(--primary);
+  border-bottom: 2rem solid var(--primary);
+}
+
+.tabs > a.active > i {
+  color: var(--primary);
+}
+
+.tabs > a > i,
+.tabs > a > img {
+  margin: 0;
+}
+
+.tabs.left-align > a,
+.tabs.center-align > a,
+.tabs.right-align > a {
+  width: auto;
 }

package/src/cdn/elements/toasts.css

@@ -9,8 +9,9 @@
   z-index: 200;
   visibility: hidden;
   display: inline-block;
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow2);
+  color: var(--on-error);
+  background-color: var(--error-background);
   padding: 16rem;
   opacity: 1;
   margin: 0;
@@ -32,12 +33,12 @@
 
 .toast.active  {
   visibility: visible;
-  animation: var(--speed-2) toast-to-top;
+  animation: var(--speed2) toast-to-top;
 }
 
 .toast.active.top {
   visibility: visible;
-  animation: var(--speed-2) toast-to-bottom;
+  animation: var(--speed2) toast-to-bottom;
 }
 
 .toast.small {
@@ -60,6 +61,10 @@
   margin-left: 8rem;
 }
 
+.toast > * {
+  color: inherit;
+}
+
 @keyframes toast-to-top {
   0% {
     opacity: 0;

package/src/cdn/elements/tooltips.css

@@ -1,6 +1,6 @@
 .tooltip {
   display: none;
-  background-color:rgba(0, 0, 0, 0.8);
+  background-color: rgba(0,0,0,.9);
   color: #ffffff;
   font-size: 12rem;
   text-align: center;
@@ -25,7 +25,7 @@
 }
 
 .tooltip.border {
-  border: 1rem solid var(--color-4);
+  border: 1rem solid var(--outline);
 }
 
 .tooltip.left {