beercss 3.0.7 → 3.1.0

package/src/cdn/elements/fields.css

@@ -60,9 +60,7 @@
 }
 
 /* icon */
-.field > i,
-.field > img,
-.field > .loader {
+.field > :is(i, img, svg, .loader) {
   position: absolute;
   top: 50%;
   left: auto;
@@ -72,35 +70,17 @@
   z-index: 0;
 }
 
-.field.border > i,
-.field.fill > i,
-.field.round > i,
-.field.border > img,
-.field.fill > img,
-.field.round > img,
-.field.border > .loader,
-.field.fill > .loader,
-.field.round > .loader {
+.field:is(.border, .fill, .round) > :is(i, img, svg, .loader) {
   left: auto;
   right: 1rem;
 }
 
-.field > i:first-child,
-.field > img:first-child,
-.field > .loader:first-child {
+.field > :is(i, img, svg, .loader):first-child {
   left: 1rem;
   right: auto;
 }
 
-.field.border > i:first-child,
-.field.fill > i:first-child,
-.field.round > i:first-child,
-.field.border > img:first-child,
-.field.fill > img:first-child,
-.field.round > img:first-child,
-.field.border > .loader:first-child,
-.field.fill > .loader:first-child,
-.field.round > .loader:first-child {
+.field:is(.border, .fill, .round) > :is(i, img, svg, .loader):first-child {
   left: 1rem;
   right: auto;
 }
@@ -118,9 +98,8 @@
 /* input, textarea and select */
 .field > select,
 input[type^=date],
-input[type^=time] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+input[type^=time],
+input[type^=search] {
   appearance: none;
   cursor: pointer;
 }
@@ -152,9 +131,14 @@ input[type=file] {
   cursor: pointer;
 }
 
-.field > input,
-.field > textarea,
-.field > select {
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
+
+.field > :is(input, textarea, select) {
   border: 0.0625rem solid transparent;
   padding: 0 0.9375rem;
   font-family: inherit;
@@ -167,72 +151,58 @@ input[type=file] {
   resize: none;
 }
 
-.field > input:focus,
-.field > textarea:focus,
-.field > select:focus {
+.field > :is(input, textarea, select):focus {
   border: 0.125rem solid transparent;
   padding: 0 0.875rem;
 }
 
-.field.border > input,
-.field.border > textarea,
-.field.border > select {
+.field.border > :is(input, textarea, select) {
   border-color: var(--outline);
 }
 
-.field.border > input:focus,
-.field.border > textarea:focus,
-.field.border > select:focus {
+.field.border > :is(input, textarea, select):focus {
   border-color: var(--primary);
 }
 
-.field.round > input,
-.field.round > textarea,
-.field.round > select {
+.field.round > :is(input, textarea, select) {
   padding-left: 1.4376rem;
   padding-right: 1.4376rem;
 }
 
-.field.round > input:focus,
-.field.round > textarea:focus,
-.field.round > select:focus {
+.field.round > :is(input, textarea, select):focus {
   padding-left: 1.375rem;
   padding-right: 1.375rem;
 }
 
-.field.prefix > input,
-.field.prefix > textarea,
-.field.prefix > select {
+.field.prefix > :is(input, textarea, select) {
   padding-left: 2.9375rem;
 }
 
-.field.prefix > input:focus,
-.field.prefix > textarea:focus,
-.field.prefix > select:focus {
+.field.prefix > .slider {
+  margin-left: 3.5rem;
+}
+
+.field.prefix > :is(input, textarea, select):focus {
   padding-left: 2.875rem;
 }
 
-.field.suffix > input,
-.field.suffix > textarea,
-.field.suffix > select {
+.field.suffix > :is(input, textarea, select) {
   padding-right: 2.9375rem;
 }
 
-.field.suffix > input:focus,
-.field.suffix > textarea:focus,
-.field.suffix > select:focus {
+.field.suffix > .slider {
+  margin-right: 3.5rem;
+}
+
+.field.suffix > :is(input, textarea, select):focus {
   padding-right: 2.875rem;
 }
 
-.field:not(.border, .round) > input,
-.field:not(.border, .round) > textarea,
-.field:not(.border, .round) > select {
+.field:not(.border, .round) > :is(input, textarea, select) {
   border-bottom-color: var(--outline);
 }
 
-.field:not(.border, .round) > input:focus,
-.field:not(.border, .round) > textarea:focus,
-.field:not(.border, .round) > select:focus {
+.field:not(.border, .round) > :is(input, textarea, select):focus {
   border-bottom-color: var(--primary);
 }
 
@@ -244,40 +214,22 @@ input[type=file] {
   border-radius: 0.25rem;
 }
 
-.field.round {
-  border-radius: 2rem;
-}
-
-.field.round:not(.border, .fill) > input,
-.field.round:not(.border, .fill) > textarea,
-.field.round:not(.border, .fill) > select,
-.field.round:not(.border) > input:focus,
-.field.round:not(.border) > textarea:focus,
-.field.round:not(.border) > select:focus {
+.field.round:not(.border, .fill) > :is(input, textarea, select),
+.field.round:not(.border) > :is(input, textarea, select):focus {
   box-shadow: var(--elevate1);
 }
 
-.field.round:not(.border, .fill) > input:focus,
-.field.round:not(.border, .fill) > textarea:focus,
-.field.round:not(.border, .fill) > select:focus {
+.field.round:not(.border, .fill) > :is(input, textarea, select):focus {
   box-shadow: var(--elevate2);
 }
 
-.field.invalid:not(.border, .round) > input,
-.field.invalid:not(.border, .round) > textarea,
-.field.invalid:not(.border, .round) > select,
-.field.invalid:not(.border, .round) > input:focus,
-.field.invalid:not(.border, .round) > textarea:focus,
-.field.invalid:not(.border, .round) > select:focus {
+.field.invalid:not(.border, .round) > :is(input, textarea, select),
+.field.invalid:not(.border, .round) > :is(input, textarea, select):focus {
   border-bottom-color: var(--error);
 }
 
-.field.invalid.border > input,
-.field.invalid.border > textarea,
-.field.invalid.border > select,
-.field.invalid.border > input:focus,
-.field.invalid.border > textarea:focus,
-.field.invalid.border > select:focus {
+.field.invalid.border > :is(input, textarea, select),
+.field.invalid.border > :is(input, textarea, select):focus {
   border-color: var(--error);
 }
 
@@ -313,8 +265,7 @@ input[type=file] {
   padding-top: 1rem;
 }
 
-.field.label.border:not(.fill) > input,
-.field.label.border:not(.fill) > select {
+.field.label.border:not(.fill) > :is(input, select) {
   padding-top: 0;
 }
 
@@ -432,8 +383,7 @@ input[type=file] {
 }
 
 /* helper */
-.field > .helper,
-.field > .error {
+.field > :is(.helper, .error) {
   position: absolute;
   left: 1rem;
   bottom: 0;
@@ -451,8 +401,7 @@ a.helper {
   color: var(--error) !important;
 }
 
-.field.round > .helper,
-.field.round > .error {
+.field.round > :is(.helper, .error) {
   left: 1.5rem;
 }
 

package/src/cdn/elements/icons.css

@@ -1,52 +1,57 @@
 i {
+  --i-size: 1.5rem;
+
   font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;
-  font-size: 1.5rem;
-  line-height: 1;
+  font-size: var(--i-size);
   letter-spacing: normal;
   text-transform: none;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
   vertical-align: middle;
   text-align: center;
   overflow: hidden;
-  width: 1.5rem;
-  min-width: 1.5rem;
+  width: var(--i-size);
+  min-width: var(--i-size);
+  height: var(--i-size);
+  min-height: var(--i-size);
   box-sizing: content-box;
 }
 
 i.tiny {
-  font-size: 1rem;
-  width: 1rem;
-  min-width: 1rem;
+  --i-size: 1rem;
 }
 
 i.small {
-  font-size: 1.25rem;
-  width: 1.25rem;
-  min-width: 1.25rem;
+  --i-size: 1.25rem;
 }
 
 i.large {
-  font-size: 1.75rem;
-  width: 1.75rem;
-  min-width: 1.75rem;
+  --i-size: 1.75rem;
 }
 
 i.extra {
-  font-size: 2rem;
-  width: 2rem;
+  --i-size: 2rem;
 }
 
 i.fill,
-a.row:hover > i,
-a.row:focus > i,
-.transparent:hover > i,
-.transparent:focus > i {
+a.row:is(:hover, :focus) > i,
+.transparent:is(:hover, :focus) > i {
   font-variation-settings: "FILL" 1;
 }
+
+i > :is(img, svg) {
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/src/cdn/elements/layouts.css

@@ -6,38 +6,31 @@
   position: fixed;
 }
 
-.absolute.left.right,
-.fixed.left.right {
+:is(.absolute, .fixed).left.right {
   width: auto;
 }
 
-.absolute.left.right.small,
-.fixed.left.right.small {
+:is(.absolute, .fixed).left.right.small {
   height: 20rem;
 }
 
-.absolute.left.right.medium,
-.fixed.left.right.medium {
+:is(.absolute, .fixed).left.right.medium {
   height: 28rem;
 }
 
-.absolute.left.right.large,
-.fixed.left.right.large {
+:is(.absolute, .fixed).left.right.large {
   height: 44rem;
 }
 
-.absolute.top.bottom.small,
-.fixed.top.bottom.small {
+:is(.absolute, .fixed).top.bottom.small {
   width: 20rem;
 }
 
-.absolute.top.bottom.medium,
-.fixed.top.bottom.medium {
+:is(.absolute, .fixed).top.bottom.medium {
   width: 28rem;
 }
 
-.absolute.top.bottom.large,
-.fixed.top.bottom.large {
+:is(.absolute, .fixed).top.bottom.large {
   width: 44rem;
 }
 
@@ -47,8 +40,7 @@ footer {
   background-color: var(--surface);
 }
 
-header.fixed,
-footer.fixed {
+:is(header, footer).fixed {
   position: sticky;
   top: 0;
   bottom: 0;
@@ -59,8 +51,7 @@ footer.fixed {
   border-radius: 0;
 }
 
-header.fixed::before,
-footer.fixed::before {
+:is(header, footer).fixed::before {
   content: "";
   position: absolute;
   top: 0;
@@ -72,35 +63,27 @@ footer.fixed::before {
   background-color: inherit;
 }
 
-.modal > header,
-.modal > footer {
+:is(.modal, .dropdown) > :is(header, footer) {
   padding: 0;
+  background-color: inherit;
 }
 
-article > header,
-article > footer {
+article > :is(header, footer) {
   padding: inherit;
   padding-left: 0;
   padding-right: 0;
   z-index: 11 !important;
 }
 
-.modal > header.fixed,
-article > header.fixed,
-.padding > header.fixed,
-.medium-padding > header.fixed {
+:is(.modal, article, .padding, .medium-padding) > header.fixed {
   transform: translateY(-1rem);
 }
 
-.modal > footer.fixed,
-article > footer.fixed,
-.padding > footer.fixed,
-.medium-padding > footer.fixed {
+:is(.modal, article, .padding, .medium-padding) > footer.fixed {
   transform: translateY(1rem);
 }
 
-.no-padding > header.fixed,
-.no-padding > footer.fixed {
+.no-padding > :is(header, footer).fixed {
   transform: none;
 }
 

package/src/cdn/elements/media.css

@@ -1,19 +1,8 @@
-img.small,
-img.medium,
-img.large,
-img.tiny,
-img.extra,
-img.round,
-img.circle,
-img.responsive,
-video.small,
-video.medium,
-video.large,
-video.tiny,
-video.extra,
-video.round,
-video.circle,
-video.responsive {
+svg {
+  fill: currentColor;
+}
+
+:is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .responsive) {
   object-fit: cover;
   object-position: center;
   transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
@@ -21,177 +10,138 @@ video.responsive {
   width: 3rem;
 }
 
-img.round,
-video.round {
+:is(img, svg, video).round {
   border-radius: 0.5rem;
 }
 
-img.circle,
-video.circle {
+:is(img, svg, video).circle {
   border-radius: 50%;
 }
 
-img.tiny,
-video.tiny {
+:is(img, svg, video).tiny {
   height: 2rem;
   width: 2rem;
 }
 
-img.small,
-video.small {
+:is(img, svg, video).small {
   height: 2.5rem;
   width: 2.5rem;
 }
 
-img.large,
-video.large {
+:is(img, svg, video).large {
   height: 3.5rem;
   width: 3.5rem;
 }
 
-img.extra,
-video.extra {
+:is(img, svg, video).extra {
   height: 4rem;
   width: 4rem;
 }
 
-img.responsive,
-video.responsive {
+:is(img, svg, video).responsive {
   width: 100%;
   height: 100%;
   margin: 0 auto;
 }
 
-button > img.responsive,
-.button > img.responsive,
-.chip > img.responsive {
+:is(button, .button, .chip) > :is(img, svg).responsive {
   width: 2.5rem;
 }
 
-button:not(.transparent) > img.responsive,
-.button:not(.transparent) > img.responsive,
-.chip:not(.transparent) > img.responsive {
+:is(button, .button, .chip):not(.transparent) > :is(img, svg).responsive {
   border: 0.25rem solid transparent;
 }
 
-button.small > img.responsive,
-.button.small > img.responsive,
-.chip.small > img.responsive {
+:is(button, .button, .chip).small > :is(img, svg).responsive {
   width: 2rem;
 }
 
-button.large > img.responsive,
-.button.large > img.responsive,
-.chip.large > img.responsive {
+:is(button, .button, .chip).large > :is(img, svg).responsive {
   width: 3rem;
 }
 
-button.extra > img.responsive,
-.button.extra > img.responsive,
-.chip.extra > img.responsive {
+:is(button, .button, .chip).extra > :is(img, svg).responsive {
   width: 3.5rem;
 }
 
-img.responsive.tiny,
-video.responsive.tiny {
+:is(img, svg, video).responsive.tiny {
   width: 100%;
   height: 4rem;
 }
 
-img.responsive.small,
-video.responsive.small {
+:is(img, svg, video).responsive.small {
   width: 100%;
   height: 8rem;
 }
 
-img.responsive.medium,
-video.responsive.medium {
+:is(img, svg, video).responsive.medium {
   width: 100%;
   height: 12rem;
 }
 
-img.responsive.large,
-video.responsive.large {
+:is(img, svg, video).responsive.large {
   width: 100%;
   height: 16rem;
 }
 
-img.responsive.extra,
-video.responsive.extra {
+:is(img, svg, video).responsive.extra {
   width: 100%;
   height: 20rem;
 }
 
-img.responsive.round,
-video.responsive.round {
+:is(img, svg, video).responsive.round {
   border-radius: 2rem;
 }
 
-img.empty-state,
-video.empty-state {
+:is(img, svg, video).empty-state {
   max-width: 100%;
   width: 24rem;
 }
 
-button > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
-.button > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
-.chip > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
-.field > img:not(.responsive, .tiny, .small, .medium, .large, .extra),
-.tabs img:not(.responsive, .tiny, .small, .medium, .large, .extra),
-td img:not(.responsive, .tiny, .small, .medium, .large, .extra) {
+: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) {
   min-width: 1.5rem;
   max-width: 1.5rem;
   min-height: 1.5rem;
   max-height: 1.5rem;
 }
 
-.button > i,
-.button > img,
-.button > img.responsive,
-button > i,
-button > img,
-button > img.responsive,
-.chip > i,
-.chip > img,
-.chip > img.responsive {
+:is(button, .button, .chip) > :is(i, img, svg),
+:is(button, .button, .chip) > :is(img, svg).responsive {
   margin: 0 -0.5rem;
 }
 
-.button > img.responsive,
-button > img.responsive {
+:is(button, .button) > :is(img, svg).responsive {
   margin-left: -1.5rem;
 }
 
-.button > span + img.responsive,
-button > span + img.responsive {
+:is(button, .button) > span + :is(img, svg).responsive {
   margin-right: -1.5rem;
 }
 
-.chip > img.responsive {
+.chip > :is(img, svg).responsive {
   margin-left: -1rem;
 }
 
-.chip > span + img.responsive {
+.chip > span + :is(img, svg).responsive {
   margin-right: -1rem;
 }
 
-.circle > img.responsive,
-.square > img.responsive {
+:is(.circle, .square) > :is(img, svg).responsive {
   margin: 0;
 }
 
-.extend > i,
-.extend > img {
+.extend > :is(i, img, svg) {
   margin: 0;
   position: absolute;
   left: 1rem;
 }
 
-.extend > img.responsive {
+.extend > :is(img, svg).responsive {
   left: 0;
   width: 3.5rem;
 }
 
-.extend.border > img.responsive {
+.extend.border > :is(img, svg).responsive {
   width: 3.375rem;
 }