beercss 2.1.3 → 2.2.2

package/src/cdn/elements/selections.css

@@ -11,13 +11,6 @@
   align-items: center;
 }
 
-.checkbox > *,
-.radio > *,
-.switch > * {
-  margin: 0;
-  padding: 0;
-}
-
 .checkbox > input,
 .radio > input {
   width: 24rem;
@@ -34,26 +27,26 @@
   font-size: 14rem;
 }
 
-.checkbox > span,
-.radio > span {
+.checkbox > span:not(:empty),
+.radio > span:not(:empty) {
   padding-left: 4rem;
 }
 
 .checkbox > input + span::before,
-.radio > input + span::before {
-  font-family: "Material Icons";
+.radio > input + span::before,
+.switch > input + span::after {
+  font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24rem;
-  line-height: inherit;
+  line-height: 1;
   letter-spacing: normal;
   text-transform: none;
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: "liga";
+  -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   vertical-align: middle;
   text-align: center;
@@ -61,13 +54,13 @@
   width: 24rem;
   height: 24rem;
   margin: 0 auto;
-  padding: 0;
   outline: none;
   color: var(--primary);
   position: absolute;
   left: -24rem;
   background-color: transparent;
   border-radius: 50%;
+  box-sizing: content-box;
 }
 
 .checkbox > input + span::before {
@@ -78,12 +71,8 @@
   content: "radio_button_unchecked";
 }
 
-.checkbox:focus > input:not([disabled]) + span::before,
-.checkbox:hover > input:not([disabled]) + span::before,
 .checkbox > input:not([disabled]):focus + span::before,
 .checkbox > input:not([disabled]):hover + span::before,
-.radio:focus > input:not([disabled]) + span::before,
-.radio:hover > input:not([disabled]) + span::before,
 .radio > input:not([disabled]):focus + span::before,
 .radio > input:not([disabled]):hover + span::before {
   background-color: var(--active);
@@ -94,6 +83,7 @@
 .checkbox > input:checked + span::before {
   color: var(--primary);
   content: "check_box";
+  font-variation-settings: 'FILL' 1;
 }
 
 .radio > input:checked + span::before {
@@ -107,27 +97,9 @@
   margin-left: 8rem;
 }
 
-.field > .checkbox,
-.field > .radio,
-.field > nav > .checkbox,
-.field > nav > .radio {
-  margin: 0 4rem 0 12rem;
-}
-
-.field > .switch,
-.field > nav > .switch {
-  margin: 0 4rem 0 16rem;
-}
-
-.checkbox > span:empty,
-.radio > span:empty,
-.switch > span:empty {
-  padding: 0;
-}
-
 .switch > input {
-  width: 40rem;
-  height: 24rem;
+  width: 52rem;
+  height: 32rem;
   opacity: 0;
 }
 
@@ -136,44 +108,47 @@
   position:absolute;
   left: 0;
   top: 50%;
-  background-color: var(--on-background);
-  opacity: .6;
-  width: 32rem;
-  height: 14rem;
-  border-radius: 8rem;
-  animation: none;
-  transform: translate(-40rem, -50%);
+  background-color: var(--active);
+  border: 2rem solid var(--outline);
+  width: 52rem;
+  height: 32rem;
+  border-radius: 32rem;
+  transform: translate(-52rem, -50%);
 }
 
 .switch > input:checked + span::before {
+  border: none;
   background-color: var(--primary);
 }
 
 .switch > input + span::after {
   content: "";
   position: absolute;
-  border-radius: 50%;
-  width: 20rem;
-  height: 20rem;
-  background-color: #ffffff;
-  box-shadow: var(--shadow1);
   left: 0;
   top: 50%;
-  transition: var(--speed1) transform, var(--speed1) background-color;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: var(--speed2) all;
+  background-color: var(--outline);
+  width: 16rem;
+  height: 16rem;
+  font-size: 16rem;
   transform: translate(-44rem, -50%);
 }
 
 .switch > input:checked + span::after {
-  background-color: var(--primary);
-  transform: translate(-24rem, -50%);
+  content: "check";
+  background-color: var(--on-primary);
+  width: 24rem;
+  height: 24rem;
+  transform: translate(-28rem, -50%);
 }
 
-.switch:focus > input:not([disabled]) + span::after,
-.switch:hover > input:not([disabled]) + span::after,
 .switch > input:not([disabled]):focus + span::after,
 .switch > input:not([disabled]):hover + span::after {
-  box-shadow: 0 0 0 8rem var(--active);
-  animation: var(--speed1) to-checked ease-out;
+  box-shadow: 0 0 0 12rem var(--active);
 }
 
 .checkbox > input:disabled + span,
@@ -183,6 +158,18 @@
   cursor: not-allowed;
 }
 
+.field > nav,
+.field > .row {
+  flex-grow: 1;
+  padding: 0 16rem;
+}
+
+.field.round > nav,
+.field.round > .row {
+  flex-grow: 1;
+  padding: 0 24rem;
+}
+
 @keyframes to-checked {
   from {
     box-shadow: 0 0 0 0 var(--active);

package/src/cdn/elements/tables.css

@@ -4,6 +4,7 @@ table {
   font-size: 14rem;
   color: var(--on-background);
   text-align: left;
+  border-radius: 0;
 }
 
 table td,
@@ -11,7 +12,6 @@ table th {
   width: 1%;
   text-align: inherit;
   padding: 8rem;
-  margin: 0;
 }
 
 table th {
@@ -23,24 +23,11 @@ table.border th {
   border-bottom: 1rem solid var(--outline);
 }
 
-table.min {
-  width: min-content;
-  min-width: auto;
-  max-width: -webkit-fill-available;
-}
-
 table.no-space td,
 table.no-space th {
   padding: 0;
 }
 
-table.space td,
-table.space th,
-table.small-space th,
-table.small-space td {
-  padding: 8rem;
-}
-
 table.medium-space td,
 table.medium-space th {
   padding: 12rem;
@@ -61,18 +48,14 @@ td > .chip,
 td > nav > .chip {
   min-height: 24rem;
   max-height: 24rem;
-  box-sizing: border-box;
 }
 
 td > .circle:not(.tiny, .small, .medium, .large, .extra),
 td > nav > .circle:not(.tiny, .small, .medium, .large, .extra),
 td > .square:not(.tiny, .small, .medium, .large, .extra),
-td > nav > .square:not(.tiny, .small, .medium, .large, .extra),
-td > .diamond:not(.tiny, .small, .medium, .large, .extra),
-td > nav > .diamond:not(.tiny, .small, .medium, .large, .extra) {
+td > nav > .square:not(.tiny, .small, .medium, .large, .extra){
   min-width: 24rem;
   max-width: 24rem;
   min-height: 24rem;
   max-height: 24rem;
-  box-sizing: border-box;
 }

package/src/cdn/elements/tabs.css

@@ -1,13 +1,16 @@
 .tabs {
   display: flex;
-  justify-content: space-around;
-  margin-top: 16rem;
   white-space: nowrap;
   border-bottom: 1rem solid var(--outline);
+  border-radius: 0;
+}
+
+.tabs:not(.left-align, .right-align, .center-align) {
+  justify-content: space-around;
 }
 
-* > .tabs:first-child {
-  margin-top: 0;
+* + .tabs {
+  margin-top: 16rem;
 }
 
 .tabs > a {
@@ -25,7 +28,7 @@
 }
 
 .tabs > a > span {
-  margin: 4rem;
+  margin: 0 8rem;
 }
 
 .tabs.small > a {
@@ -49,11 +52,6 @@
   color: var(--primary);
 }
 
-.tabs > a > i,
-.tabs > a > img {
-  margin: 0;
-}
-
 .tabs.left-align > a,
 .tabs.center-align > a,
 .tabs.right-align > a {

package/src/cdn/elements/toasts.css

@@ -1,7 +1,7 @@
 .toast {
   position: fixed;
   top: auto;
-  bottom: 72rem;
+  bottom: 96rem;
   left: 50%;
   right: auto;
   width: 80%;
@@ -9,21 +9,21 @@
   z-index: 200;
   visibility: hidden;
   display: inline-block;
-  box-shadow: var(--shadow2);
+  box-shadow: var(--elevate2);
   color: var(--on-error);
   background-color: var(--error-background);
   padding: 16rem;
   opacity: 1;
-  margin: 0;
   cursor: pointer;
   transform: translate(-50%, 0);
   text-align: left;
   display: flex;
   align-items: center;
+  border-radius: 4rem;
 }
 
 .toast.top {
-  top: 72rem;
+  top: 96rem;
   bottom: auto;
 }
 
@@ -54,12 +54,7 @@
   padding: 24rem;
 }
 
-.toast.round {
-  border-radius: 24rem;
-}
-
 .toast > * {
-  margin: 0;
   overflow: unset;
 }
 

package/src/cdn/elements/tooltips.css

@@ -24,10 +24,6 @@
   border-radius: 64rem;
 }
 
-.tooltip.border {
-  border: 1rem solid var(--outline);
-}
-
 .tooltip.left {
   left: 0;
   top: 50%;
@@ -79,44 +75,6 @@
   display: initial;
 }
 
-.tooltip.margin,
-.tooltip.small-margin,
-.tooltip.medium-margin,
-.tooltip.large-margin {
-  max-width: none;
-  max-height: none;
-}
-
-.tooltip.small-margin {
-  margin: -8rem 0 !important;
-}
-
-.tooltip.margin,
-.tooltip.medium-margin {
-  margin: -16rem 0 !important;
-}
-
-.tooltip.large-margin {
-  margin: -24rem 0 !important;
-}
-
-.tooltip.left.small-margin,
-.tooltip.right.small-margin {
-  margin: 0 -8rem !important;
-}
-
-.tooltip.left.margin,
-.tooltip.left.medium-margin,
-.tooltip.right.margin,
-.tooltip.right.medium-margin {
-  margin: 0 -16rem !important;
-}
-
-.tooltip.left.large-margin,
-.tooltip.right.large-margin {
-  margin: 0 -24rem !important;
-}
-
 .dropdown:active ~ .tooltip,
 button:focus > .dropdown ~ .tooltip,
 .button:focus > .dropdown ~ .tooltip,

package/src/cdn/helpers/alignments.css

@@ -1,45 +1,29 @@
 .middle-align {
-  display: flex !important;
-  align-items: center;
+  display: flex;
+  align-items: center !important;
 }
 
 .bottom-align {
-  display: flex !important;
-  align-items: flex-end;
+  display: flex;
+  align-items: flex-end !important;
 }
 
 .top-align {
-  display: flex !important;
-  align-items: flex-start;
+  display: flex;
+  align-items: flex-start !important;
 }
 
 .left-align {
-  text-align: left !important;
-  justify-content: flex-start;
+  text-align: left;
+  justify-content: flex-start !important;
 }
 
 .right-align {
-  text-align: right !important;
-  justify-content: flex-end;
+  text-align: right;
+  justify-content: flex-end !important;
 }
 
 .center-align {
-  text-align: center !important;
-  justify-content: center;
-}
-
-.center-align > .row,
-.center-align > table {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.right-align > .row,
-.right-align > table {
-  margin-left: auto;
-}
-
-.left-align > .row,
-.left-align > table {
-  margin-right: auto;
+  text-align: center;
+  justify-content: center !important;
 }

package/src/cdn/helpers/dividers.css

@@ -1,34 +1,20 @@
 .divider,
-.small-divider {
+.small-divider,
+.medium-divider,
+.large-divider {
   border-bottom: 1rem solid var(--outline);
   display: block;
-  margin: 8rem 0;
+  margin: 0 !important;
 }
 
 .medium-divider {
-  border-bottom: 1rem solid var(--outline);
-  display: block;
-  margin: 16rem 0;
+  margin: 16rem 0 !important;
 }
 
 .large-divider {
-  border-bottom: 1rem solid var(--outline);
-  display: block;
-  margin: 24rem 0;
+  margin: 24rem 0 !important;
 }
 
-.row.divider,
-.row.small-divider {
-  margin: 0 -8rem !important;
-  padding: 8rem 0;
-}
-
-.row.medium-divider {
-  margin: 0 -8rem !important;
-  padding: 16rem 0;
-}
-
-.row.large-divider {
-  margin: 0 -8rem !important;
-  padding: 24rem 0;
+.small-divider {
+  margin: 8rem 0 !important;
 }

package/src/cdn/helpers/elevates.css

@@ -0,0 +1,16 @@
+.no-elevate {
+  box-shadow: none !important;
+}
+
+.small-elevate,
+.elevate {
+  box-shadow: var(--elevate1) !important;
+}
+
+.medium-elevate {
+  box-shadow: var(--elevate2) !important;
+}
+
+.large-elevate {
+  box-shadow: var(--elevate3) !important;
+}

package/src/cdn/helpers/forms.css

@@ -1,110 +1,81 @@
-.flat {
-  box-shadow: none !important;
+.round:not(img, video) {
+  border-radius: 32rem !important;
 }
 
-.round {
-  border-radius: 24rem;
+.no-round {
+  border-radius: 0 !important;
 }
 
 .top-round {
-  border-radius: 24rem 24rem 4rem 4rem !important;
+  border-radius: 32rem 32rem 0 0 !important;
 }
 
 .bottom-round {
-  border-radius: 4rem 4rem 24rem 24rem !important;
+  border-radius: 0 0 32rem 32rem !important;
 }
 
 .left-round {
-  border-radius: 24rem 4rem 4rem 24rem !important;
+  border-radius: 32rem 0 0 32rem !important;
 }
 
 .right-round {
-  border-radius: 4rem 24rem 24rem 4rem !important;
+  border-radius: 0 32rem 32rem 0 !important;
 }
 
 .top-round.left-round {
-  border-radius: 24rem 24rem 4rem 24rem !important;
+  border-radius: 32rem 32rem 0 32rem !important;
 }
 
 .top-round.right-round {
-  border-radius: 24rem 24rem 24rem 4rem !important;
+  border-radius: 32rem 32rem 32rem 0 !important;
 }
 
 .bottom-round.left-round {
-  border-radius: 24rem 4rem 24rem 24rem !important;
+  border-radius: 32rem 0 32rem 32rem !important;
 }
 
 .bottom-round.right-round {
-  border-radius: 4rem 24rem 24rem 24rem !important;
+  border-radius: 0 32rem 32rem 32rem !important;
 }
 
-.circle,
-.square,
-.diamond {
-  min-width: 40rem;
-  min-height: 40rem;
-  max-width: 40rem;
-  max-height: 40rem;
+.circle:not(img, video),
+.square:not(img, video) {
   height: 40rem;
+  width: 40rem;
+  padding: 0;
 }
 
 .circle > span,
-.square > span,
-.diamond > span {
+.square > span {
   display: none;
 }
 
-.diamond.small,
-.square.small,
-.circle.small {
-  min-width: 32rem;
-  min-height: 32rem;
-  max-width: 32rem;
-  max-height: 32rem;
+.square.small:not(img, video),
+.circle.small:not(img, video) {
   height: 32rem;
+  width: 32rem;
 }
 
-.diamond.large,
-.square.large,
-.circle.large {
-  min-width: 48rem;
-  min-height: 48rem;
-  max-width: 48rem;
-  max-height: 48rem;
+.square.large:not(img, video),
+.circle.large:not(img, video) {
   height: 48rem;
+  width: 48rem;
 }
 
-.diamond.extra,
-.square.extra,
-.circle.extra {
-  min-width: 56rem;
-  min-height: 56rem;
-  max-width: 56rem;
-  max-height: 56rem;
+.square.extra:not(img, video),
+.circle.extra:not(img, video) {
   height: 56rem;
-}
-
-.diamond {
-  transform: rotate(45deg);
-  border-radius: 4rem;
-  padding: 0;
-}
-
-.diamond > i {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-45deg);
-  margin: 0;
-  padding: 0;
+  width: 56rem;
 }
 
 .square.round,
-.circle.round,
-.diamond.round {
-  border-radius: 16rem;
+.circle.round {
+  border-radius: 16rem !important;
 }
 
-.diamond.round {
-  transform: rotate(45deg);
+.border:not(table, .field) { 
+  box-sizing: border-box;
+  border: 1px solid var(--outline);
+  background-color: transparent;
+  box-shadow: none;
 }

package/src/cdn/helpers/margins.css

@@ -2,6 +2,10 @@
   margin: 0 !important;
 }
 
+.tiny-margin {
+  padding: 4rem !important;
+}
+
 .small-margin {
   margin: 8rem !important;
 }

package/src/cdn/helpers/paddings.css

@@ -1,5 +1,9 @@
 .no-padding {
-    padding: 0 !important;
+  padding: 0 !important;
+}
+
+.tiny-padding {
+  padding: 4rem !important;
 }
 
 .small-padding {

package/src/cdn/helpers/positions.css

@@ -1,9 +1,9 @@
 .front {
-  z-index: 10!important;
+  z-index: 10;
 }
 
 .back {
-  z-index: -10!important;
+  z-index: -10;
 }
 
 .left {