beercss 3.0.8 → 3.1.1

package/src/cdn/elements/selections.css

@@ -1,4 +1,4 @@
-/* checkbox, radio and switch */
+/* checkbox, radio, switch */
 .checkbox,
 .radio,
 .switch {
@@ -11,31 +11,31 @@
   align-items: center;
 }
 
-.checkbox > input,
-.radio > input {
+:is(.checkbox, .radio) > input {
   width: 1.5rem;
   height: 1.5rem;
   opacity: 0;
 }
 
-.checkbox > span,
-.radio > span,
-.switch > span {
+.switch > input {
+  width: 3.25rem;
+  height: 2rem;
+  opacity: 0;
+}
+
+:is(.checkbox, .radio, .switch) > span {
   display: inline-flex;
   align-items: center;
   color: var(--on-background);
   font-size: 0.875rem;
 }
 
-.checkbox > span:not(:empty),
-.radio > span:not(:empty) {
+:is(.checkbox, .radio) > span:not(:empty) {
   padding-left: 0.25rem;
 }
 
-.checkbox > input + span::before,
-.radio > input + span::before,
-.switch > input + span:empty::after,
-.switch > input + span > i {
+:is(.checkbox, .radio, .switch) > span::before,
+.icon > span > i {
   font-family: "Material Symbols Outlined";
   font-weight: normal;
   font-style: normal;
@@ -62,140 +62,126 @@
   left: -1.5rem;
   background-color: transparent;
   border-radius: 50%;
+  user-select: none;
+  z-index: 1;
+  box-shadow: 0 0 0 0 var(--active);
+  transition: var(--speed1) all;
 }
 
-.checkbox > input + span::before {
-  content: "check_box_outline_blank";
+.switch > span::before,
+.switch.icon > span > i {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: var(--speed2) all;
+  font-size: 1rem;
+  user-select: none;
+  min-width: auto;
+  content: "";
+  color: var(--surface-variant);
+  background-color: var(--outline);
+  transform: translate(-3rem, -50%) scale(0.6);
 }
 
-.radio > input + span::before {
-  content: "radio_button_unchecked";
+.switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(1);
 }
 
-.checkbox > input:not([disabled]):focus + span::before,
-.checkbox > input:not([disabled]):hover + span::before,
-.radio > input:not([disabled]):focus + span::before,
-.radio > input:not([disabled]):hover + span::before {
-  background-color: var(--active);
-  box-shadow: 0 0 0 0.5rem var(--active);
-  animation: var(--speed1) to-checked ease-out;
+.checkbox > span::before {
+  content: "check_box_outline_blank";
+}
+
+.radio > span::before {
+  content: "radio_button_unchecked";
 }
 
 .checkbox > input:checked + span::before {
-  color: var(--primary);
   content: "check_box";
   font-variation-settings: "FILL" 1;
 }
 
 .radio > input:checked + span::before {
-  color: var(--primary);
   content: "radio_button_checked";
 }
 
-.checkbox + .checkbox,
-.radio + .radio,
-.switch + .switch {
-  margin-left: 0.5rem;
+:is(.radio, .checkbox, .switch).icon > span::before {
+  content: "" !important;
+  font-variation-settings: unset !important;
 }
 
-.switch > input {
-  width: 3.25rem;
-  height: 2rem;
+:is(.checkbox, .radio) > input:is(:focus, :hover) + span::before {
+  background-color: var(--active);
+  box-shadow: 0 0 0 0.5rem var(--active);
+}
+
+.switch > input:is(:focus, :hover) + span::before,
+.switch.icon > input:is(:focus, :hover) + span > i {
+  box-shadow: 0 0 0 0.5rem var(--active);
+}
+
+:is(.checkbox, .radio) > input:checked + span::before,
+:is(.checkbox, .radio).icon > input:checked + span > i {
+  color: var(--primary);
+}
+
+.icon > input:checked + span > i:first-child,
+.icon > span > i:last-child {
   opacity: 0;
 }
 
-.switch > input + span::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 50%;
-  background-color: var(--active);
-  border: 0.125rem solid var(--outline);
-  box-sizing: border-box;
-  width: 3.25rem;
-  height: 2rem;
-  border-radius: 2rem;
-  transform: translate(-3.25rem, -50%);
+.icon > input:checked + span > i:last-child,
+.icon > span > i:first-child {
+  opacity: 1;
 }
 
-.switch > input:checked + span::before {
+.switch > input:checked + span::after {
   border: none;
   background-color: var(--primary);
 }
 
-.switch > input + span:empty::after,
-.switch > input + span > i {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: var(--speed2) all;
-  font-size: 1rem;
-  user-select: none;
-  min-width: auto;
-  content: "";
-  color: var(--surface-variant);
-  background-color: var(--outline);
-  transform: translate(-3rem, -50%) scale(0.6);
-}
-
-.switch > input:checked + span:empty::after,
-.switch > input:checked + span > i {
+.switch > input:checked + span::before,
+.switch.icon > input:checked + span > i {
   content: "check";
   color: var(--primary);
   background-color: var(--on-primary);
   transform: translate(-1.75rem, -50%) scale(1);
 }
 
-.switch > input + span > i {
-  transform: translate(-3rem, -50%) scale(1);
-}
-
-.switch > input + span > i:last-child,
-.switch > input:checked + span > i:first-child {
-  opacity: 0;
-}
-
-.switch > input:checked + span > i:last-child,
-.switch > input + span > i:first-child {
-  opacity: 1;
+:is(.checkbox, .radio, .switch) > input:disabled + span {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.switch > input:not([disabled]):focus + span:empty::after,
-.switch > input:not([disabled]):hover + span:empty::after,
-.switch > input:not([disabled]):focus + span > i,
-.switch > input:not([disabled]):hover + span > i {
-  box-shadow: 0 0 0 0.5rem var(--active);
+.checkbox + .checkbox,
+.radio + .radio,
+.switch + .switch {
+  margin-left: 0.5rem;
 }
 
-.checkbox > input:disabled + span,
-.radio > input:disabled + span,
-.switch > input:disabled + span {
-  opacity: 0.5;
-  cursor: not-allowed;
+.switch > span::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  background-color: var(--active);
+  border: 0.125rem solid var(--outline);
+  box-sizing: border-box;
+  width: 3.25rem;
+  height: 2rem;
+  border-radius: 2rem;
+  transform: translate(-3.25rem, -50%);
 }
 
-.field > nav,
-.field > .row {
+.field > :is(nav, .row) {
   flex-grow: 1;
   padding: 0 1rem;
 }
 
-.field.round > nav,
-.field.round > .row {
+.field.round > :is(nav, .row) {
   flex-grow: 1;
   padding: 0 1.5rem;
 }
-
-@keyframes to-checked {
-  from {
-    box-shadow: 0 0 0 0 var(--active);
-  }
-
-  to {
-    box-shadow: 0 0 0 0.5rem var(--active);
-  }
-}

package/src/cdn/elements/sliders.css

@@ -0,0 +1,124 @@
+.slider {
+  display: flex;
+  align-items: center !important;
+  width: auto;
+  margin: 1.125rem;
+  flex: auto;
+}
+
+.slider.small {
+  width: 4rem;
+  flex: none;
+}
+
+.slider.medium {
+  width: 8rem;
+  flex: none;
+}
+
+.slider.large {
+  width: 12rem;
+  flex: none;
+}
+
+.slider.vertical {
+  margin: 0.5rem auto !important;
+  padding: 50% 0;
+  transform: rotate(-90deg);
+}
+
+.slider > input {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: none;
+  width: 100%;
+  height: 0.25rem;
+  border-radius: 1rem;
+  background: var(--active);
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+}
+
+.slider > input:focus ~ .tooltip {
+  visibility: visible;
+}
+
+.slider > input:only-of-type {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.slider > input + input {
+  position: absolute;
+}
+
+.slider > input::-webkit-slider-thumb {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: all;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 50%;
+  background: var(--primary);
+  transition: var(--speed1) all ease-out;
+  cursor: pointer;
+}
+
+.slider > input::-moz-range-thumb {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: all;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 50%;
+  background: var(--primary);
+  transition: var(--speed1) all ease-out;
+  cursor: pointer;
+}
+
+.slider > input:not(:disabled):is(:focus, :hover)::-webkit-slider-thumb {
+  box-shadow: 0 0 0 0.625rem var(--active);
+}
+
+.slider > input:not(:disabled):is(:focus, :hover)::-moz-range-thumb {
+  box-shadow: 0 0 0 0.625rem var(--active);
+}
+
+.slider > input:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.slider > input:disabled::-webkit-slider-thumb {
+  background: #9E9E9E;
+  cursor: not-allowed;
+}
+
+.slider > input:disabled::-moz-range-thumb {
+  background: #9E9E9E;
+  cursor: not-allowed;
+}
+
+.slider > input:disabled + span {
+  background: #9E9E9E;
+}
+
+.slider > span {
+  position: absolute;
+  top: calc(50% - 0.1875rem);
+  height: 0.375rem;
+  border-radius: 1rem;
+  background: var(--primary);
+  z-index: 0;
+}
+
+.field > .slider {
+  width: 100%;
+}

package/src/cdn/elements/tables.css

@@ -7,8 +7,7 @@ table {
   border-radius: 0;
 }
 
-table td,
-table th {
+table :is(th, td) {
   width: 1%;
   text-align: inherit;
   padding: 0.5rem;
@@ -18,42 +17,30 @@ table th {
   font-weight: 500;
 }
 
-table.border td,
-table.border th {
+table.border :is(th, td) {
   border-bottom: 0.0625rem solid var(--outline);
 }
 
-table.no-space td,
-table.no-space th {
+table.no-space :is(th, td) {
   padding: 0;
 }
 
-table.medium-space td,
-table.medium-space th {
+table.medium-space :is(th, td) {
   padding: 0.75rem;
 }
 
-table.large-space td,
-table.large-space th {
+table.large-space :is(th, td) {
   padding: 1rem;
 }
 
-td > .button,
-td > nav > .button,
-td > button,
-td > nav > button,
-td > .none,
-td > nav > .none,
-td > .chip,
-td > nav > .chip {
+td > :is(.button, button, .none, .chip),
+td > nav > :is(.button, button, .none, .chip) {
   min-height: 1.5rem;
   max-height: 1.5rem;
 }
 
-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 > :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;

package/src/cdn/elements/tabs.css

@@ -57,8 +57,6 @@
   color: var(--primary);
 }
 
-.tabs.left-align > a,
-.tabs.center-align > a,
-.tabs.right-align > a {
+.tabs:is(.left-align, .center-align .right-align) > a {
   width: auto;
 }

package/src/cdn/elements/tooltips.css

@@ -1,5 +1,11 @@
 .tooltip {
-  display: none;
+  ---space: 0;
+
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
   background-color: rgb(0 0 0 / 0.9);
   color: #FFF;
   font-size: 0.75rem;
@@ -12,10 +18,12 @@
   left: 50%;
   bottom: auto;
   right: auto;
-  transform: translate(-50%, -100%);
+  transform: translate(-50%, -100%) scale(0.9);
   width: auto;
   white-space: nowrap;
   font-weight: 500;
+  opacity: 0;
+  transition: var(--speed2) all;
 }
 
 .tooltip.left {
@@ -23,7 +31,7 @@
   top: 50%;
   bottom: auto;
   right: auto;
-  transform: translate(-100%, -50%);
+  transform: translate(-100%, -50%) scale(0.9);
 }
 
 .tooltip.right {
@@ -31,15 +39,7 @@
   top: 50%;
   bottom: auto;
   left: auto;
-  transform: translate(100%, -50%);
-}
-
-.tooltip.top {
-  top: 0;
-  left: 50%;
-  bottom: auto;
-  right: auto;
-  transform: translate(-50%, -100%);
+  transform: translate(100%, -50%) scale(0.9);
 }
 
 .tooltip.bottom {
@@ -47,7 +47,7 @@
   left: 50%;
   top: auto;
   right: auto;
-  transform: translate(-50%, 100%);
+  transform: translate(-50%, 100%) scale(0.9);
 }
 
 .tooltip.small {
@@ -65,15 +65,87 @@
   white-space: normal;
 }
 
-*:hover > .tooltip {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+:hover > .tooltip {
+  visibility: visible;
+  opacity: 1;
+  transform: translate(-50%, -100%) scale(1);
+}
+
+:hover > .tooltip.left {
+  transform: translate(-100%, -50%) scale(1);
+}
+
+:hover > .tooltip.right {
+  transform: translate(100%, -50%) scale(1);
+}
+
+:hover > .tooltip.bottom {
+  transform: translate(-50%, 100%) scale(1);
+}
+
+.tooltip.small-space,
+.tooltip.space {
+  ---space: -0.5rem;
+}
+
+.tooltip.medium-space {
+  ---space: -1rem;
+}
+
+.tooltip.large-space {
+  ---space: -1.5rem;
+}
+
+.tooltip:not(.left, .right, .bottom) {
+  margin-top: var(---space) !important;
+}
+
+.tooltip.left {
+  margin-left: var(---space) !important;
+}
+
+.tooltip.right {
+  margin-right: var(---space) !important;
+}
+
+.tooltip.bottom {
+  margin-bottom: var(---space) !important;
 }
 
 .dropdown:active ~ .tooltip,
-button:focus > .dropdown ~ .tooltip,
-.button:focus > .dropdown ~ .tooltip,
+:is(button, .button):focus > .dropdown ~ .tooltip,
 .field > :focus ~ .dropdown ~ .tooltip {
-  display: none;
+  visibility: hidden;
+}
+
+.vertical > .tooltip:not(.left, .right, .bottom) {
+  top: calc(50% + var(---space));
+  transform: translate(-50%, -100%) scale(1) rotate(90deg);
+}
+
+.vertical > .tooltip.left {
+  left: var(---space);
+  transform: translate(-100%, -50%) scale(1) rotate(90deg);
+}
+
+.vertical > .tooltip.right {
+  right: var(---space);
+  transform: translate(100%, -50%) scale(1) rotate(90deg);
+}
+
+.vertical > .tooltip.bottom {
+  bottom: calc(50% + var(---space));
+  transform: translate(-50%, 100%) scale(1) rotate(90deg);
+}
+
+.slider > .tooltip {
+  ---space: -1.25rem;
+}
+
+.slider.vertical > .tooltip {
+  ---space: -0.75rem;
+}
+
+.slider.vertical > .tooltip:is(.left, .right) {
+  ---space: -0.5rem;
 }

package/src/cdn/helpers/blurs.css

@@ -0,0 +1,21 @@
+:is(.blur, .small-blur, .medium-blur, .large-blur),
+:is(.blur, .small-blur, .medium-blur, .large-blur).light {
+  ---blur: 1rem;
+  -webkit-backdrop-filter: blur(var(---blur));
+  backdrop-filter: blur(var(---blur));
+  color: var(--on-background);
+  background-color: rgb(255 255 255 / 0.5);
+}
+
+.dark :is(.blur, .small-blur, .medium-blur, .large-blur),
+:is(.blur, .small-blur, .medium-blur, .large-blur).dark {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
+.small-blur {
+  ---blur: 0.5rem;
+}
+
+.large-blur {
+  ---blur: 1.5rem;
+}

package/src/cdn/helpers/directions.css

@@ -12,9 +12,7 @@
 }
 
 .vertical,
-button.vertical,
-.button.vertical,
-.chip.vertical {
+.vertical:is(button, .button, .chip) {
   display: inline-flex;
   flex-direction: column !important;
   gap: 0.25rem;

package/src/cdn/helpers/forms.css

@@ -1,4 +1,4 @@
-.round:not(img, video) {
+.round:not(i, img, video, svg) {
   border-radius: 2rem !important;
 }
 
@@ -38,38 +38,40 @@
   border-radius: 0 2rem 2rem !important;
 }
 
-.circle:not(img, video),
-.square:not(img, video) {
+.circle {
+  border-radius: 50%;
+}
+
+:is(button, .button, .chip).circle {
+  border-radius: 2.5rem;
+}
+
+:is(.circle, .square):not(i, img, video, svg) {
   height: 2.5rem;
   width: 2.5rem;
   padding: 0;
 }
 
-.circle > span,
-.square > span {
+:is(.circle, .square) > span {
   display: none;
 }
 
-.square.small:not(img, video),
-.circle.small:not(img, video) {
+:is(.circle, .square).small:not(i, img, video, svg) {
   height: 2rem;
   width: 2rem;
 }
 
-.square.large:not(img, video),
-.circle.large:not(img, video) {
+:is(.circle, .square).large:not(i, img, video, svg) {
   height: 3rem;
   width: 3rem;
 }
 
-.square.extra:not(img, video),
-.circle.extra:not(img, video) {
+:is(.circle, .square).extra:not(i, img, video, svg) {
   height: 3.5rem;
   width: 3.5rem;
 }
 
-.square.round,
-.circle.round {
+:is(.circle, .square).round {
   border-radius: 1rem !important;
 }