beercss 1.2.7 → 2.0.0

package/src/cdn/{shared → elements}/buttons.css

@@ -4,33 +4,22 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow-1);
+  box-shadow: var(--shadow1);
   min-height: 40rem;
   height: 40rem;
   font-size: 14rem;
   font-weight: 500;
-  color: #ffffff;
-  padding: 0 12rem;
-  background-color: var(--color-1);
+  color: var(--on-primary);
+  padding: 0 16rem;
+  background-color: var(--primary);
   margin: 0 8rem;
-  text-transform: uppercase;
   border-radius: 4rem;
-  transition: 0.3s transform, 0.3s border-radius, 0.3s padding;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
-button > :not(.dropdown, .badge) + :not(.dropdown, .badge),
-.button > :not(.dropdown, .badge) + :not(.dropdown, .badge) {
-  margin-left: 6rem;
-}
-
-button > .responsive:first-child,
-.button > .responsive:first-child {
-  margin-left: -12rem;
-}
-
-button > .responsive:last-child,
-.button > .responsive:last-child {
-  margin-right: -12rem;
+.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;
 }
 
 .button.none,
@@ -40,7 +29,7 @@ button.none {
   min-width: auto;
   height: auto;
   min-height: auto;
-  color: var(--color-1);
+  color: var(--primary);
   padding: 0;
   background-color: transparent;
   margin: 0 8rem;
@@ -50,6 +39,7 @@ button.none {
 button.small {
   min-height: 32rem !important;
   height: 32rem;
+  font-size: 14rem;
 }
 
 .button.medium,
@@ -68,13 +58,14 @@ button.large {
 button.extra {
   min-height: 56rem !important;
   height: 56rem;
+  font-size: 16rem;
 }
 
 .button.border,
 button.border {
-  border: 1rem solid var(--color-1);
+  border: 1rem solid var(--primary);
   background-color: transparent;
-  color: var(--color-1);
+  color: var(--primary);
   box-shadow: none;
 }
 
@@ -137,4 +128,68 @@ button.square {
   transform: none;
   border-radius: 4rem;
   padding: 0;
+}
+
+.button.extend,
+button.extend {
+  min-height: 56rem !important;
+  min-width: 56rem !important;
+  padding: 0;
+}
+
+.button.extend > span,
+button.extend > span {
+  display: none;
+}
+
+.button.extend:hover,
+button.extend:hover,
+.button.extend.active,
+button.extend.active {
+  width: auto;
+  max-width: none;  
+  min-width: auto;
+  padding: 0 16rem;
+}
+
+.button.extend:hover > i + span,
+button.extend:hover > i + span,
+.button.extend.active > i + span,
+button.extend.active > i + span {
+  display: inherit;
+  margin-left: 32rem;
+}
+
+.button.extend:hover > img + span,
+button.extend:hover > img + span,
+.button.extend.active > img + span,
+button.extend.active > img + span {
+  display: inherit;
+  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;
+  cursor: not-allowed;
+}
+
+.button[disabled] {
+  pointer-events: none;
+}
+
+.button[disabled]:before,
+button:disabled:before,
+.button[disabled]:after,
+button:disabled:after {
+  display: none;
 }

package/src/cdn/{shared → elements}/cards.css

@@ -1,11 +1,12 @@
 .card,
 article {
-  box-shadow: var(--shadow-1);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow1);
+  background-color: var(--surface-variant);
+  color: var(--on-surface-variant);
   padding: 16rem;
   border-radius: 4rem;
   display: block;
-  transition: 0.3s transform, 0.3s border-radius, 0.3s padding;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
 .card + .card,
@@ -40,8 +41,9 @@ article.large {
 
 .card.border,
 article.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--outline);
   box-shadow: none;
+  background-color: transparent;
 }
 
 .card.round,

package/src/cdn/{shared → elements}/chips.css

@@ -8,27 +8,19 @@
   height: 40rem;
   font-size: 14rem;
   font-weight: 500;
-  color: var(--color-2);
-  padding: 0 12rem;
-  background-color: var(--color-2a);
+  color: var(--on-secondary);
+  padding: 0 16rem;
+  background-color: var(--secondary);
   margin: 0 8rem;
   text-transform: none;
-  border-radius: 24rem;
-  transition: 0.3s transform, 0.3s border-radius, 0.3s padding;
+  border-radius: 8rem;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
 }
 
-.chip > :not(.dropdown, .badge) + :not(.dropdown, .badge) {
+.chip > :not(.dropdown, .progress, .badge, .tooltip) + :not(.dropdown, .progress, .badge, .tooltip) {
   margin-left: 4rem;
 }
 
-.chip > .responsive:first-child {
-  margin-left: -12rem;
-}
-
-.chip > .responsive:last-child {
-  margin-right: -12rem;
-}
-
 .chip.small {
   min-height: 32rem !important;
   height: 32rem;
@@ -45,9 +37,9 @@
 }
 
 .chip.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--secondary);
   background-color: transparent;
-  color: inherit;
+  color: var(--secondary);
 }
 
 .chip.active::before {
@@ -58,7 +50,7 @@
   width: 100%;
   height: 100%;
   border-radius: inherit;
-  background-color: var(--color-2b);
+  background-color: var(--active);
 }
 
 .chip.circle {
@@ -72,4 +64,8 @@
   transform: none;
   border-radius: 4rem;
   padding: 0;
+}
+
+.chip.round {
+  border-radius: 24rem;
 }

package/src/cdn/{shared → elements}/dropdowns.css

@@ -2,8 +2,8 @@
   opacity: 0;
   visibility: hidden;
   position: absolute;
-  box-shadow: var(--shadow-2);
-  background-color: var(--color-4);
+  box-shadow: var(--shadow2);
+  background-color: var(--surface);
   box-sizing: border-box;
   z-index: 2;
   top: auto;
@@ -18,7 +18,7 @@
   font-size: 14rem;
   font-weight: normal;
   text-transform: none;
-  color: var(--color-2);
+  color: var(--on-surface);
   line-height: normal;
   text-align: left;
 }
@@ -28,18 +28,18 @@
 }
 
 .dropdown.active,
-.dropdown:active,
-button:focus > .dropdown,
-.button:focus > .dropdown,
-.field > :focus ~ .dropdown {
+.dropdown:not([data-ui]):active,
+button:not([data-ui]):focus-within > .dropdown,
+.button:not([data-ui]):focus-within > .dropdown,
+.field > :not([data-ui]):focus-within ~ .dropdown {
   opacity: 1;
   visibility: visible;
   max-width: none;
-  animation: 0.1s dropdown-to-bottom;
+  animation: var(--speed1) dropdown-to-bottom;
 }
 
 .dropdown.border {
-  border: 1rem solid var(--color-2b);
+  border: 1rem solid var(--outline);
   box-shadow: none;
 }
 
@@ -63,8 +63,9 @@ button:focus > .dropdown,
 }
 
 .dropdown > a:hover,
+.dropdown > a:focus,
 .dropdown > a.active {
-  background-color: var(--color-2a);
+  background-color: var(--active);
 }
 
 .dropdown.no-wrap > a {

package/src/cdn/{shared → elements}/expansions.css

@@ -1,5 +1,5 @@
 details[open] > :not(summary) {
-  animation: details-to-open 0.3s ease;
+  animation: details-to-open var(--speed3) ease;
 }
 
 summary.none {
@@ -8,6 +8,10 @@ summary.none {
   
 summary {
   cursor: pointer;
+} 
+  
+summary:focus {
+  outline: none;
 }
   
 @keyframes details-to-open {

package/src/cdn/{shared → elements}/fields.css

@@ -44,8 +44,8 @@
   right: 10rem;
   transform: translateY(-50%);
   cursor: pointer;
-  color: #9e9e9e;
-  z-index: 0;
+  color: var(--on-background);
+  z-index: 10;
 }
 
 .field.border > i,
@@ -108,48 +108,53 @@ input[type="file"] {
 .field > textarea {
   border: 0;
   border-radius: 8rem 8rem 0 0;
-  border-bottom: 2rem solid #9e9e9e50;
+  border-bottom: 2rem solid var(--outline);
   padding: 4rem 8rem;
-  font-family: Roboto;
+  font-family: inherit;
   font-size: 14rem;
   width: 100%;
   height: 100%;
   outline: none;
   z-index: 1;
-  color: var(--color-2);
+  color: var(--on-background);
   background-color: transparent;
   box-sizing: border-box;
   resize: none;
-  color: inherit;
 }
 
 .field > input:focus,
 .field > textarea:focus {
-  border-bottom: 2rem solid var(--color-1);
+  border-bottom: 2rem solid var(--primary);
 }
 
 .field.border > input,
 .field.border > textarea {
-  border: 2rem solid #9e9e9e50;
+  border: 2rem solid var(--outline);
   border-radius: 8rem;
   padding: 4rem 8rem;
 }
 
 .field.border > input:focus,
 .field.border > textarea:focus {
-  border: 2rem solid var(--color-1);
+  border: 2rem solid var(--primary);
 }
 
 .field.fill > input,
 .field.fill > textarea {
-  background-color: #9e9e9e10;
+  background-color: var(--surface-variant);
+  color: var(--on-surface-variant);
   padding: 4rem 8rem;
 }
 
+.field.fill > i,
+.field.fill > img {
+  color: var(--on-surface-variant);
+}
+
 .field.round > input,
 .field.round > textarea {
   border: 0;
-  box-shadow: var(--shadow-1);
+  box-shadow: var(--shadow1);
 }
 
 .field.round > input {
@@ -166,7 +171,7 @@ input[type="file"] {
 .field.round.border.fill > input,
 .field.round.border > textarea,
 .field.round.border.fill > textarea {
-  border: 2rem solid #9e9e9e50;
+  border: 2rem solid var(--outline);
   box-shadow: none;
 }
 
@@ -174,7 +179,7 @@ input[type="file"] {
 .field.round.border.fill > input:focus,
 .field.round.border > textarea:focus,
 .field.round.border.fill > textarea:focus {
-  border: 2rem solid var(--color-1);
+  border: 2rem solid var(--primary);
 }
 
 .field.round.fill > input,
@@ -193,7 +198,7 @@ input[type="file"] {
 .field.flat > input:focus,
 .field.flat > input:focus::before,
 .field.flat > input:focus::after {
-  box-shadow: var(--shadow-1)!important;
+  box-shadow: var(--shadow1)!important;
 }
 
 .field.label > input,
@@ -213,7 +218,7 @@ input[type="file"] {
 
 .field.invalid > input,
 .field.invalid > textarea {
-  border-bottom: 2rem solid  var(--color-3);
+  border-bottom: 2rem solid var(--error);
 }
 
 .field.invalid.border > input,
@@ -222,7 +227,7 @@ input[type="file"] {
 .field.invalid.border > textarea,
 .field.invalid.border.round > textarea,
 .field.invalid.border.round.fill > textarea {
-  border: 2rem solid  var(--color-3);
+  border: 2rem solid var(--error);
 }
 
 .field.invalid.round > input,
@@ -231,18 +236,19 @@ input[type="file"] {
 }
 
 .field > :disabled {
-  background-color: #9e9e9e30!important;
+  opacity: .5;
+  cursor: not-allowed;
 }
 
 /* label */
 .field.label > label {
-  animation: 0.1s label-to-middle;
+  animation: var(--speed1) label-to-middle;
   position: absolute;
   top: 50%;
   left: 8rem;
   font-size: 14rem;
   transform: translateY(-50%);
-  z-index: 0;
+  z-index: 10;
 }
 
 .field.label.textarea.small > label {
@@ -290,13 +296,17 @@ input[type="file"] {
 .field.label > label.active,
 .field.label > [placeholder]:focus ~ label,
 .field.label > [placeholder]:not(:placeholder-shown) ~ label {
-  animation: 0.1s label-to-top;
+  animation: var(--speed1) label-to-top;
   font-size: 12rem;
   transform: translateY(-120%);
 }
 
+.field.label > :focus ~ label {
+  color: var(--primary);
+}
+
 .field.invalid > label {
-  color: var(--color-3);
+  color: var(--error)!important;
 }
 
 .field > label.required:after,
@@ -311,55 +321,56 @@ input[type="file"] {
   appearance: none;
   border: 0;
   border-radius: 8rem 8rem 0 0;
-  border-bottom: 2rem solid #9e9e9e50;
+  border-bottom: 2rem solid var(--outline);
   padding: 4rem 8rem;
-  font-family: Roboto;
+  font-family: inherit;
   font-size: 14rem;
   width: 100%;
   height: 100%;
   outline: none;
   cursor: pointer;
-  color: var(--color-2);
+  color: var(--on-background);
   background-color: transparent;
   box-sizing: border-box;
   z-index: 1;
 }
 
 .field > select:focus {
-  border-bottom: 2rem solid var(--color-1);
+  border-bottom: 2rem solid var(--primary);
 }
 
 .field.border > select {
-  border: 2rem solid #9e9e9e50;
+  border: 2rem solid var(--outline);
   border-radius: 8rem;
 }
 
 .field.border > select:focus {
-  border: 2rem solid var(--color-1);
+  border: 2rem solid var(--primary);
 }
 
 .field.fill > select {
-  background-color: #9e9e9e10;
+  background-color: var(--surface-variant);
+  color: var(--on-surface-variant);
   padding: 4rem 8rem 4rem 8rem;
 }
 
 .field.round > select {
   border: 0;
   border-radius: 32rem;
-  box-shadow: var(--shadow-1);
+  box-shadow: var(--shadow1);
   padding: 4rem 16rem;
 }
 
 .field.round.border > select,
 .field.round.border.fill > select {
-  border: 2rem solid #9e9e9e50;
+  border: 2rem solid var(--outline);
   border-radius: 32rem;
   box-shadow: none;
 }
 
 .field.round.border > select:focus,
 .field.round.border.fill > select:focus {
-  border: 2rem solid var(--color-1);
+  border: 2rem solid var(--primary);
 }
 
 .field.round.fill > select {
@@ -381,13 +392,13 @@ input[type="file"] {
 }
 
 .field.invalid > select {
-  border-bottom: 2rem solid  var(--color-3);
+  border-bottom: 2rem solid var(--error);
 }
 
 .field.invalid.border > select,
 .field.invalid.border.round > select,
 .field.invalid.border.round.fill > select {
-  border: 2rem solid  var(--color-3);
+  border: 2rem solid var(--error);
 }
 
 .field.invalid.round > select {
@@ -395,7 +406,7 @@ input[type="file"] {
 }
 
 .field > select > option {
-  background-color: var(--color-4);
+  background-color: var(--surface);
 }
 
 /* helper */
@@ -406,14 +417,15 @@ input[type="file"] {
   bottom: 0;
   transform: translateY(100%);
   font-size: 12rem;
+  background: none!important;
 }
 
 a.helper {
-  color: var(--color-1);
+  color: var(--primary);
 }
 
 .field > .error {
-  color:  var(--color-3);
+  color: var(--error)!important;
 }
 
 .field.round > .helper,

package/src/cdn/{shared → elements}/icons.css

@@ -17,6 +17,7 @@ i {
   overflow: hidden;
   width: 24rem;
   margin: 0 auto;
+  color: var(--on-background);
 }
 
 i.outlined {

package/src/cdn/elements/layouts.css

@@ -0,0 +1,109 @@
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute,
+.fixed {
+  border-radius: inherit;
+  float: none;
+}
+
+.absolute.round,
+.fixed.round {
+  border-radius: 24rem;
+}
+
+.absolute.border,
+.fixed.border {
+  border: 1rem solid var(--outline);
+}
+
+.absolute.left.right,
+.fixed.left.right {
+  width: auto;
+}
+
+.absolute.left.right.small,
+.fixed.left.right.small {
+  height: 320rem;
+}
+
+.absolute.left.right.medium,
+.fixed.left.right.medium {
+  height: 448rem;
+}
+
+.absolute.left.right.large,
+.fixed.left.right.large {
+  height: 704rem;
+}
+
+.absolute.top.bottom.small,
+.fixed.top.bottom.small {
+  width: 320rem;
+}
+
+.absolute.top.bottom.medium,
+.fixed.top.bottom.medium {
+  width: 448rem;
+}
+
+.absolute.top.bottom.large,
+.fixed.top.bottom.large {
+  width: 704rem;
+}
+
+header.fixed,
+footer.fixed {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: inherit;
+  padding: inherit;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.modal > header.fixed,
+.card > header.fixed,
+article > header.fixed,
+.padding > header.fixed,
+.medium-padding > header.fixed {
+  transform: translateY(-16rem);
+}
+
+.modal > footer.fixed,
+.card > footer.fixed,
+article > footer.fixed,
+.padding > footer.fixed,
+.medium-padding > footer.fixed {
+  transform: translateY(16rem);
+}
+
+.no-padding > header.fixed,
+.no-padding > footer.fixed {
+  transform: none;
+}
+
+.small-padding > header.fixed {
+  transform: translateY(-8rem);
+}
+
+.small-padding > footer.fixed {
+  transform: translateY(8rem);
+}
+
+.large-padding > header.fixed {
+  transform: translateY(-24rem);
+}
+
+.large-padding > footer.fixed {
+  transform: translateY(24rem);
+}

package/src/cdn/{shared → elements}/loaders.css

@@ -4,7 +4,7 @@
 	height: 40rem;
 	border-radius: 50%;
 	box-sizing: border-box;
-	border: 4rem solid var(--color-1);
+	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;
 	background: none !important;