beercss 3.2.9 → 3.2.11

package/src/cdn/elements/fields.css

@@ -31,10 +31,6 @@
   height: 2.5rem;
 }
 
-.field.medium {
-  height: 3rem;
-}
-
 .field.large {
   height: 3.5rem;
 }
@@ -256,17 +252,20 @@ input[type=search]::-webkit-search-results-decoration {
   border-color: var(--error);
 }
 
-.field > :disabled {
+.field:has(> :disabled) {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+.field > :disabled {
+  cursor: not-allowed;
+}
+
 .field.small.textarea {
   height: 4.5rem;
 }
 
-.field.textarea,
-.field.medium.textarea {
+.field.textarea {
   height: 5.5rem;
 }
 
@@ -283,8 +282,7 @@ input[type=search]::-webkit-search-results-decoration {
   color: var(--on-surface);
 }
 
-.field.label > input,
-.field.label > select {
+.field.label > :is(input, select) {
   padding-top: 1rem;
 }
 
@@ -296,8 +294,7 @@ input[type=search]::-webkit-search-results-decoration {
   padding-top: 1.125rem;
 }
 
-.field.label > textarea,
-.field.label.medium > textarea {
+.field.label > textarea {
   padding-top: 1.375rem;
 }
 
@@ -309,100 +306,106 @@ input[type=search]::-webkit-search-results-decoration {
   padding-top: 1.875rem;
 }
 
-.field.small:not(.label) > textarea,
+.field.small > textarea,
 .field.small.border:not(.fill) > textarea {
   padding-top: 0.625rem;
 }
 
-.field:not(.label) > textarea,
-.field.border:not(.fill) > textarea,
-.field.medium:not(.label) > textarea,
-.field.medium.border:not(.fill) > textarea {
+.field > textarea,
+.field > textarea:focus,
+.field.border:not(.fill) > textarea {
   padding-top: 0.875rem;
 }
 
-.field.large:not(.label) > textarea,
+.field.large > textarea,
 .field.large.border:not(.fill) > textarea {
   padding-top: 1.125rem;
 }
 
-.field.extra:not(.label) > textarea,
+.field.extra > textarea,
 .field.extra.border:not(.fill) > textarea {
   padding-top: 1.375rem;
 }
 
 /* label */
-.field.label > label {
+.field > label {
   position: absolute;
-  top: 50%;
+  top: -0.5rem;
   left: 1rem;
+  display: flex;
+  width: calc(100% - 5rem);
+  height: 100%;
   font-size: 1rem;
-  transform: translateY(-50%);
-  transition: var(--speed2) all, 0s background-color;
-  z-index: 0;
+  line-height: 4rem;
+  transition: left 0.2s, font-size 0.2s, line-height 0.2s;
 }
 
-.field.label.textarea.small > label {
-  top: 1.25rem;
+.field.small > label {
+  line-height: 3.5rem;
 }
 
-.field.label.textarea > label,
-.field.label.textarea.medium > label {
-  top: 1.5rem;
+.field.large > label {
+  line-height: 4.5rem;
 }
 
-.field.label.textarea.large > label {
-  top: 1.75rem;
+.field.extra > label {
+  line-height: 5rem;
 }
 
-.field.label.textarea.extra > label {
-  top: 2rem;
+.field.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+  left: 1rem;
 }
 
-.field.label.round > label {
+.field.round > label,
+.field.border.prefix.round:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
   left: 1.5rem;
 }
 
-.field.label.prefix > label {
+.field.prefix > label {
   left: 3rem;
 }
 
-.field.label > label.active,
-.field.label > [placeholder]:focus ~ label,
-.field.label > [placeholder]:not(:placeholder-shown) ~ label {
+.field > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+  line-height: 2.5rem;
   font-size: 0.75rem;
-  transform: translateY(-120%);
-  z-index: 1;
 }
 
-.field.label.border:not(.fill) > label.active,
-.field.label.border:not(.fill) > [placeholder]:focus ~ label,
-.field.label.border:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
-  font-size: 0.75rem;
-  top: 0%;
-  left: 1rem;
-  transform: translateY(-50%);
-  z-index: 1;
+.field.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+  line-height: 1rem;
 }
 
-.field.label.border.round:not(.fill) > label.active,
-.field.label.border.round:not(.fill) > [placeholder]:focus ~ label,
-.field.label.border.round:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
-  left: 1.5rem;
-  z-index: 1;
+.field.border:not(.fill) > label::after {
+  content: "";
+  display: block;
+  margin-top: 0.5rem;
+  border-top: 0.0625rem solid var(--outline);
+  min-width: 1rem;
+  height: 1rem;
+  transition: none;
+  flex: auto;
+  margin-left: 0.25rem;
 }
 
-.field.label > :focus ~ label {
-  color: var(--primary);
+.field.border:not(.fill) > :focus + label::after {
+  border-top: 0.125rem solid var(--primary);
 }
 
-.field.invalid > label {
-  color: var(--error) !important;
+.field.label.border:not(.fill) > :is(input, select, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active) {
+  clip-path: polygon(-1% -1%, 0.75rem -1%, 0.75rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -1%, 101% -1%, 101% 101%, -1% 101%);
 }
 
-.field > label.required::after,
-.field.required > label::after {
-  content: " * ";
+.field.label.border.round:not(.fill) > :is(input, select, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active) {
+  clip-path: polygon(-1% -1%, 1.25rem -1%, 1.25rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -1%, 101% -1%, 101% 101%, -1% 101%);
+}
+
+.field > :focus + label {
+  color: var(--primary);
+}
+
+.field.invalid > label,
+.field.invalid > label::after {
+  color: var(--error) !important;
+  border-color: var(--error) !important;
 }
 
 /* helper */
@@ -433,6 +436,5 @@ a.helper {
 }
 
 table td > .field {
-  max-height: 100%;
-  height: 100%;
+  margin: 0;
 }

package/src/cdn/elements/layouts.css

@@ -48,7 +48,6 @@ footer {
   right: 0;
   z-index: 12;
   background-color: inherit;
-  border-radius: 0;
 }
 
 :is(header, footer).fixed::before {

package/src/cdn/elements/media.css

@@ -14,10 +14,6 @@ svg {
   border-radius: 0.5rem;
 }
 
-:is(img, svg, video).circle {
-  border-radius: 50%;
-}
-
 :is(img, svg, video).tiny {
   height: 2rem;
   width: 2rem;
@@ -44,23 +40,23 @@ svg {
   margin: 0 auto;
 }
 
-:is(button, .button, .chip) > :is(img, svg).responsive {
+:is(button, .button, .chip) > .responsive {
   width: 2.5rem;
 }
 
-:is(button, .button, .chip):not(.transparent) > :is(img, svg).responsive {
+:is(button, .button, .chip):not(.transparent) > .responsive {
   border: 0.25rem solid transparent;
 }
 
-:is(button, .button, .chip).small > :is(img, svg).responsive {
+:is(button, .button, .chip).small > .responsive {
   width: 2rem;
 }
 
-:is(button, .button, .chip).large > :is(img, svg).responsive {
+:is(button, .button, .chip).large > .responsive {
   width: 3rem;
 }
 
-:is(button, .button, .chip).extra > :is(img, svg).responsive {
+:is(button, .button, .chip).extra > .responsive {
   width: 3.5rem;
 }
 
@@ -99,7 +95,7 @@ svg {
 }
 
 :is(button, .button, .chip, .field) > :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra),
-:is(.tabs, td) :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
+:is(.tabs) :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
   min-width: 1.5rem;
   max-width: 1.5rem;
   min-height: 1.5rem;
@@ -107,42 +103,44 @@ svg {
 }
 
 :is(button, .button, .chip) > :is(i, img, svg),
-:is(button, .button, .chip) > :is(img, svg).responsive {
+:is(button, .button, .chip) > .responsive {
   margin: 0 -0.5rem;
 }
 
-:is(button, .button) > :is(img, svg).responsive {
+:is(button, .button) > .responsive {
   margin-left: -1.5rem;
 }
 
-:is(button, .button) > span + :is(img, svg).responsive {
+:is(button, .button) > span + .responsive {
+  margin-left: -0.5rem;
   margin-right: -1.5rem;
 }
 
-.chip > :is(img, svg).responsive {
+.chip > .responsive {
   margin-left: -1rem;
 }
 
-.chip > span + :is(img, svg).responsive {
+.chip > span + .responsive {
+  margin-left: -0.5rem;
   margin-right: -1rem;
 }
 
-:is(.circle, .square) > :is(img, svg).responsive {
+:is(.circle, .square) > .responsive {
   margin: 0;
 }
 
-.extend > :is(i, img, svg) {
+.extend > :is(.responsive, i) {
   margin: 0;
   position: absolute;
   left: 1rem;
   z-index: 1;
 }
 
-.extend > :is(img, svg).responsive {
+.extend > .responsive {
   left: 0;
   width: 3.5rem;
 }
 
-.extend.border > :is(img, svg).responsive {
+.extend.border > .responsive {
   width: 3.375rem;
 }

package/src/cdn/elements/menus.css

@@ -49,7 +49,6 @@ menu * {
 
 menu > a {
   padding: 0.75rem 1rem;
-  border-radius: 0;
 }
 
 menu > a:not(.row) {
@@ -77,7 +76,6 @@ menu.max {
   max-height: none;
   min-height: auto;
   z-index: 100;
-  border-radius: 0;
   transform: none !important;
 }
 

package/src/cdn/elements/navigations.css

@@ -4,7 +4,6 @@ nav,
   align-items: center;
   justify-content: flex-start;
   white-space: nowrap;
-  border-radius: 0;
   gap: 1rem;
 }
 

package/src/cdn/elements/tables.css

@@ -4,7 +4,6 @@ table {
   font-size: 0.875rem;
   color: var(--on-background);
   text-align: left;
-  border-radius: 0;
 }
 
 table :is(th, td) {
@@ -31,18 +30,4 @@ table.medium-space :is(th, td) {
 
 table.large-space :is(th, td) {
   padding: 1rem;
-}
-
-td > :is(.button, button, .none, .chip),
-td > nav > :is(.button, button, .none, .chip) {
-  min-height: 1.5rem;
-  max-height: 1.5rem;
-}
-
-td > :is(.circle, .square):not(.tiny, .small, .medium, .large, .extra),
-td > nav > :is(.circle, .square):not(.tiny, .small, .medium, .large, .extra) {
-  min-width: 1.5rem;
-  max-width: 1.5rem;
-  min-height: 1.5rem;
-  max-height: 1.5rem;
-}
+}

package/src/cdn/elements/tabs.css

@@ -2,7 +2,6 @@
   display: flex;
   white-space: nowrap;
   border-bottom: 0.0625rem solid var(--outline);
-  border-radius: 0;
 }
 
 .tabs.min {
@@ -40,10 +39,6 @@
   min-height: 2rem;
 }
 
-.tabs.medium > a {
-  min-height: 2.5rem;
-}
-
 .tabs.large > a {
   min-height: 4rem;
 }

package/src/cdn/helpers/forms.css

@@ -1,14 +1,28 @@
-.medium-round:not(i, img, video, svg),
-.round:not(i, img, video, svg, button, .button, .chip, .field) {
-  border-radius: 2rem !important;
+.round {
+  border-radius: var(---round);
 }
 
-.small-round:not(i, img, video, svg) {
-  border-radius: 0.5rem !important;
+.small-round,
+.medium-round,
+.large-round {
+  border-radius: var(---round) !important;
 }
 
-.large-round:not(i, img, video, svg) {
-  border-radius: 3.5rem !important;
+.top-round,
+.bottom-round,
+.left-round,
+.right-round,
+.medium-round,
+.round {
+  ---round: 2rem;
+}
+
+.small-round {
+  ---round: 0.5rem;
+}
+
+.large-round {
+  ---round: 3.5rem;
 }
 
 .no-round,
@@ -17,35 +31,35 @@
 }
 
 .top-round {
-  border-radius: 2rem 2rem 0 0 !important;
+  border-radius: var(---round) var(---round) 0 0 !important;
 }
 
 .bottom-round {
-  border-radius: 0 0 2rem 2rem !important;
+  border-radius: 0 0 var(---round) var(---round) !important;
 }
 
 .left-round {
-  border-radius: 2rem 0 0 2rem !important;
+  border-radius: var(---round) 0 0 var(---round) !important;
 }
 
 .right-round {
-  border-radius: 0 2rem 2rem 0 !important;
+  border-radius: 0 var(---round) var(---round) 0 !important;
 }
 
 .top-round.left-round {
-  border-radius: 2rem 2rem 0 !important;
+  border-radius: var(---round) var(---round) 0 !important;
 }
 
 .top-round.right-round {
-  border-radius: 2rem 2rem 2rem 0 !important;
+  border-radius: var(---round) var(---round) var(---round) 0 !important;
 }
 
 .bottom-round.left-round {
-  border-radius: 2rem 0 2rem 2rem !important;
+  border-radius: var(---round) 0 var(---round) var(---round) !important;
 }
 
 .bottom-round.right-round {
-  border-radius: 0 2rem 2rem !important;
+  border-radius: 0 var(---round) var(---round) !important;
 }
 
 .circle {
@@ -92,6 +106,6 @@
   box-shadow: none;
 }
 
-.badge.square {
+:is(nav, .row, .dialog.max, header.fixed, footer.fixed, menu > a, menu.max, table, .tabs):not(.round) {
   border-radius: 0;
 }

package/src/cdn/helpers/reset.css

@@ -38,4 +38,4 @@ button,
   font-family: inherit;
   outline: inherit;
   justify-content: center;
-}
+}

package/src/cdn/helpers/responsive.css

@@ -1,7 +1,6 @@
 .responsive {
   width: -webkit-fill-available;
   width: -moz-available;
-  width: stretch;
 }
 
 @media only screen and (max-width: 600px) {