beercss 2.1.3 → 2.2.2

package/src/cdn/elements/buttons.css

@@ -4,137 +4,73 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow1);
-  min-height: 40rem;
   height: 40rem;
+  min-width: 40rem;
   font-size: 14rem;
   font-weight: 500;
   color: var(--on-primary);
-  padding: 0 16rem;
+  padding: 0 24rem;
   background-color: var(--primary);
   margin: 0 8rem;
   border-radius: 8rem;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
   user-select: none;
-}
-
-.button > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip),
-button > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip) {
-  margin-left: 4rem;
+  gap: 8rem;
 }
 
 .button.none,
 button.none {
-  box-shadow: none;
   width: auto;
-  min-width: auto;
   height: auto;
-  min-height: auto;
   color: var(--primary);
   padding: 0;
   background-color: transparent;
-  margin: 0 8rem;
+  min-width: auto;
+  min-height: 24rem;
 }
 
 .button.small,
 button.small {
-  min-height: 32rem !important;
   height: 32rem;
+  min-width: 32rem;
   font-size: 14rem;
 }
 
-.button.medium,
-button.medium {
-  min-height: 40rem !important;
-  height: 40rem;
-}
-
 .button.large,
 button.large {
-  min-height: 48rem !important;
   height: 48rem;
+  min-width: 48rem;
 }
 
 .button.extra,
-button.extra {
-  min-height: 56rem !important;
+button.extra,
+.button.extend,
+button.extend {
   height: 56rem;
+  min-width: 56rem;
   font-size: 16rem;
 }
 
 .button.border,
 button.border {
   border: 1rem solid var(--primary);
-  background-color: transparent;
   color: var(--primary);
-  box-shadow: none;
-}
-
-.button.round,
-button.round {
-  transform: none;
-  border-radius: 32rem;
-}
-
-.button.top-round,
-button.top-round {
-  border-radius: 32rem 32rem 4rem 4rem !important;
-}
-
-.button.bottom-round,
-button.bottom-round {
-  border-radius: 4rem 4rem 32rem 32rem !important;
-}
-
-.button.left-round,
-button.left-round {
-  border-radius: 32rem 4rem 4rem 32rem !important;
-}
-
-.button.right-round,
-button.right-round {
-  border-radius: 4rem 32rem 32rem 4rem !important;
-}
-
-.button.top-round.left-round,
-button.top-round.left-round {
-  border-radius: 32rem 32rem 4rem 32rem !important;
-}
-
-.button.top-round.right-round,
-button.top-round.right-round {
-  border-radius: 32rem 32rem 32rem 4rem !important;
-}
-
-.button.bottom-round.left-round,
-button.bottom-round.left-round {
-  border-radius: 32rem 4rem 32rem 32rem !important;
-}
-
-.button.bottom-round.right-round,
-button.bottom-round.right-round {
-  border-radius: 4rem 32rem 32rem 32rem !important;
 }
 
 .button.circle,
 button.circle {
-  transform: none;
-  padding: 0;
   border-radius: 40rem;
   padding: 0;
 }
 
 .button.square, 
 button.square {
-  transform: none;
-  border-radius: 4rem;
+  border-radius: 0;
   padding: 0;
 }
 
 .button.extend,
 button.extend {
-  min-height: 56rem !important;
-  min-width: 56rem !important;
   padding: 0;
 }
 
@@ -148,8 +84,6 @@ button.extend:hover,
 .button.extend.active,
 button.extend.active {
   width: auto;
-  max-width: none;  
-  min-width: auto;
   padding: 0 16rem;
 }
 
@@ -169,15 +103,6 @@ button.extend.active > img + span {
   margin-left: 48rem;
 }
 
-.button.square:not(.flat, .border),
-.button.circle:not(.flat, .border),
-.button.diamond:not(.flat, .border),
-button.square:not(.flat, .border),
-button.circle:not(.flat, .border),
-button.diamond:not(.flat, .border) {
-  box-shadow: var(--shadow2);
-}
-
 .button[disabled],
 button:disabled {
   opacity: .5;
@@ -193,4 +118,10 @@ button:disabled::before,
 .button[disabled]::after,
 button:disabled::after {
   display: none;
+}
+
+.button.fill,
+button.fill {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
 }

package/src/cdn/elements/cards.css

@@ -1,52 +1,25 @@
-.card,
 article {
-  box-shadow: var(--shadow1);
-  background-color: var(--surface-variant);
-  color: var(--on-surface-variant);
+  box-shadow: var(--elevate1);
+  background-color: var(--surface);
+  color: var(--on-surface);
   padding: 16rem;
-  border-radius: 4rem;
+  border-radius: 12rem;
   display: block;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
-.card + .card,
-article + article {
+* + article {
   margin-top: 16rem;
 }
 
-.row.medium-space > .col > .card + .card,
-.row.medium-space > .col > article + article {
-  margin-top: 24rem;
-}
-
-.row.large-space > .col > .card + .card,
-.row.large-space > .col > article + article {
-  margin-top: 32rem;
-}
-
-.card.small,
 article.small {
   height: 192rem;
 }
 
-.card.medium,
 article.medium {
   height: 320rem;
 }
 
-.card.large,
 article.large {
   height: 512rem;
-}
-
-.card.border,
-article.border {
-  border: 1rem solid var(--outline);
-  box-shadow: none;
-  background-color: transparent;
-}
-
-.card.round,
-article.round {
-  border-radius: 24rem;
 }

package/src/cdn/elements/chips.css

@@ -3,9 +3,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: none;
-  min-height: 40rem;
   height: 40rem;
+  min-width: 40rem;
   font-size: 14rem;
   font-weight: 500;
   color: var(--on-secondary);
@@ -16,57 +15,36 @@
   border-radius: 8rem;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
   user-select: none;
-}
-
-.chip > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip) {
-  margin-left: 4rem;
+  gap: 8rem;
 }
 
 .chip.small {
-  min-height: 32rem !important;
   height: 32rem;
-}
-
-.chip.medium {
-  min-height: 40rem !important;
-  height: 40rem;
+  min-width: 32rem;
 }
 
 .chip.large {
-  min-height: 48rem !important;
   height: 48rem;
+  min-width: 48rem;
 }
 
 .chip.border {
   border: 1rem solid var(--secondary);
-  background-color: transparent;
   color: var(--secondary);
 }
 
-.chip.active::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  background-color: var(--active);
-}
-
 .chip.circle {
-  transform: none;
-  padding: 0;
   border-radius: 40rem;
   padding: 0;
 }
 
 .chip.square {
-  transform: none;
-  border-radius: 4rem;
+  border-radius: 0;
   padding: 0;
 }
 
-.chip.round {
-  border-radius: 24rem;
+.chip.fill {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+  border: none;
 }

package/src/cdn/elements/containers.css

@@ -1,74 +1,72 @@
-main.responsive,
-main.responsive.min {
+main.responsive {
   margin: 0 auto;
-  max-width: 992rem;
+  max-width: 1200rem;
   padding: 8rem;
   overflow-x: hidden;
   min-height: 100vh;
-  box-sizing: border-box;
 }
 
 main.responsive.max {
   max-width: 100%;
 }
 
-nav.top:not(.s, .m, .l) ~ main.responsive {
-  padding-top: 96rem;
+nav.bottom:not(.s, .m, .l) ~ .responsive:not(header) {
+  padding-bottom: 96rem;
 }
 
-nav.bottom:not(.s, .m, .l) ~ main.responsive {
-  padding-bottom: 96rem;
+nav.top:not(.s, .m, .l) ~ .responsive:not(footer) {
+  padding-top: 96rem;
 }
 
-nav.left:not(.s, .m, .l) ~ main.responsive {
+nav.left:not(.s, .m, .l) ~ .responsive {
   padding-left: 96rem;
 }
 
-nav.right:not(.s, .m, .l) ~ main.responsive {
+nav.right:not(.s, .m, .l) ~ .responsive {
   padding-right: 96rem;
 }
 
 @media only screen and (max-width: 600px) {
-  nav.s.bottom ~ main.responsive {
+  nav.s.bottom ~ .responsive:not(header) {
     padding-bottom: 96rem;
   }
-  nav.s.top ~ main.responsive {
+  nav.s.top ~ .responsive:not(footer) {
     padding-top: 96rem;
   }
-  nav.s.left ~ main.responsive {
+  nav.s.left ~ .responsive {
     padding-left: 96rem;
   }
-  nav.s.right ~ main.responsive {
+  nav.s.right ~ .responsive {
     padding-right: 96rem;
   }
 }
 
 @media only screen and (min-width: 601px) and (max-width: 992px) {
-  nav.m.bottom ~ main.responsive {
+  nav.m.bottom ~ .responsive:not(header) {
     padding-bottom: 96rem;
   }
-  nav.m.top ~ main.responsive {
+  nav.m.top ~ .responsive:not(footer) {
     padding-top: 96rem;
   }
-  nav.m.left ~ main.responsive {
+  nav.m.left ~ .responsive {
     padding-left: 96rem;
   }
-  nav.m.right ~ main.responsive {
+  nav.m.right ~ .responsive {
     padding-right: 96rem;
   }
 }
 
 @media only screen and (min-width: 993px) {
-  nav.l.bottom ~ main.responsive {
+  nav.l.bottom ~ .responsive:not(header) {
     padding-bottom: 96rem;
   }
-  nav.l.top ~ main.responsive {
+  nav.l.top ~ .responsive:not(footer) {
     padding-top: 96rem;
   }
-  nav.l.left ~ main.responsive {
+  nav.l.left ~ .responsive {
     padding-left: 96rem;
   }
-  nav.l.right ~ main.responsive {
+  nav.l.right ~ .responsive {
     padding-right: 96rem;
   }
 }

package/src/cdn/elements/dropdowns.css

@@ -2,16 +2,16 @@
   opacity: 0;
   visibility: hidden;
   position: absolute;
-  box-shadow: var(--shadow2);
+  box-shadow: var(--elevate2);
   background-color: var(--surface);
-  box-sizing: border-box;
   z-index: 11;
   top: auto;
   bottom: 0;
   left: 0;
   right: auto;
   width: 100%;
-  max-height: 320rem;
+  max-height: 50vh;
+  max-width: none;
   transform: translateY(100%);
   overflow-x: hidden;
   overflow-y: auto;
@@ -21,10 +21,14 @@
   color: var(--on-surface);
   line-height: normal;
   text-align: left;
+  border-radius: 4rem;
+  transform: scale(.8) translateY(120%);
+  transition: var(--speed2) all, 0s background-color;
 }
 
 .dropdown.no-wrap {
   width: auto;
+  white-space: nowrap !important;
 }
 
 .dropdown.active,
@@ -34,22 +38,7 @@ button:not([data-ui]):focus-within > .dropdown,
 .field > :not([data-ui]):focus-within ~ .dropdown {
   opacity: 1;
   visibility: visible;
-  max-width: none;
-  animation: var(--speed1) dropdown-to-bottom;
-}
-
-.dropdown.border {
-  border: 1rem solid var(--outline);
-  box-shadow: none;
-}
-
-.dropdown.round {
-  border-radius: 24rem;
-}
-
-.dropdown.right {
-  left: 0;
-  right: auto;
+  transform: scale(1) translateY(100%);
 }
 
 .dropdown.left {
@@ -57,33 +46,21 @@ button:not([data-ui]):focus-within > .dropdown,
   right: 0;
 }
 
+.dropdown * {
+  white-space: inherit !important;
+}
+
 .dropdown > a {
+  padding: 12rem 16rem;
+  border-radius: 0;
+}
+
+.dropdown > a:not(.row) {
   display: block;
-  padding: 8rem 16rem;
 }
 
 .dropdown > a:hover,
 .dropdown > a:focus,
 .dropdown > a.active {
   background-color: var(--active);
-}
-
-.dropdown.no-wrap > a {
-  white-space: nowrap;
-}
-
-.dropdown > a.row.no-wrap,
-.dropdown > a.row.no-wrap + a.row.no-wrap {
-  margin: 0 -8rem;
-}
-
-@keyframes dropdown-to-bottom {
-  from {
-    opacity: 0;
-    transform: translateY(75%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(100%);
-  }
-}
+}

package/src/cdn/elements/expansions.css

@@ -1,7 +1,3 @@
-details[open] > :not(summary) {
-  animation: details-to-open var(--speed3) ease;
-}
-
 summary.none {
   list-style-type: none;
 } 
@@ -12,15 +8,4 @@ summary {
   
 summary:focus {
   outline: none;
-}
-  
-@keyframes details-to-open {
-  0% {
-    opacity: 0; 
-    transform: translateY(-8rem); 
-  }
-  100% {
-    opacity: 1; 
-    transform: translateY(0); 
-  }
 }