beercss 3.13.0 → 3.13.2

package/src/cdn/elements/sliders.css

@@ -1,358 +1,358 @@
-.slider {
-  --_start: 0%;
-  --_end: 0%;
-  --_value1: "";
-  --_value2: "";
-  --_track: 1rem;
-  --_thumb: max(2.5rem, calc(var(--_track) + 0.5rem));
-  display: flex;
-  align-items: center !important;
-  inline-size: auto;
-  block-size: var(--_thumb);
-  flex: none;
-  direction: ltr;
-  margin: 0 1.25rem;
-}
-
-[dir=rtl] .slider {
-  transform: scaleX(-1);
-}
-
-.slider.vertical {
-  flex-direction: row !important;
-  margin: 0.5rem auto !important;
-  padding: 50% 0;
-  transform: rotate(-90deg);
-  inline-size: 100%;
-}
-
-.slider.tiny {
-  --_track: 1rem;
-}
-
-.slider.small {
-  --_track: 1.5rem;
-}
-
-.slider.medium {
-  --_track: 2.5rem;
-}
-
-.slider.large {
-  --_track: 3.5rem;
-}
-
-.slider.extra {
-  --_track: 6rem;
-}
-
-.slider > input {
-  appearance: none;
-  box-shadow: none;
-  border: none;
-  outline: none;
-  pointer-events: none;
-  inline-size: 100%;
-  block-size: var(--_track);
-  background: none;
-  z-index: 1;
-  padding: 0;
-  margin: 0;
-  transform: rotate(0deg);
-}
-
-.slider > input:only-of-type {
-  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;
-  block-size: var(--_thumb);
-  inline-size: 0.25rem;
-  border-radius: 0.25rem;
-  background: var(--primary);
-  cursor: grab;
-  margin: 0;
-  z-index: 1;
-}
-
-.slider > input::-webkit-slider-thumb:active {
-  cursor: grabbing;
-}
-
-.slider > input::-moz-range-thumb {
-  appearance: none;
-  box-shadow: none;
-  border: none;
-  outline: none;
-  pointer-events: all;
-  block-size: 2.75rem;
-  inline-size: 0.25rem;
-  border-radius: 0.25rem;
-  background: var(--primary);
-  cursor: grab;
-  margin: 0;
-}
-
-.slider > input::-moz-range-thumb:active {
-  cursor: grabbing;
-}
-
-.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
-  transform: scaleX(0.6);
-}
-
-.slider > input:not(:disabled):is(:focus)::-moz-range-thumb {
-  transform: scaleX(0.6);
-}
-
-.slider > input:disabled {
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-.slider > input:disabled::-webkit-slider-thumb {
-  background: var(--outline);
-  cursor: not-allowed;
-}
-
-.slider > input:disabled::-moz-range-thumb {
-  background: var(--outline);
-  cursor: not-allowed;
-}
-
-.slider > input:disabled ~ span {
-  background: var(--outline);
-}
-
-.slider > span {
-  position: absolute;
-  block-size: var(--_track);
-  border-radius: 1rem 0 0 1rem;
-  background: var(--primary);
-  color: var(--on-primary);
-  z-index: 0;
-  inset: calc(50% - (var(--_track) / 2)) var(--_end) auto var(--_start);
-  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
-}
-
-.slider > input[type=range] + input[type=range] ~ span {
-  border-radius: 0;
-  clip-path: polygon(0.5rem 0, max(0.5rem, calc(100% - 0.5rem)) 0, max(0.5rem, calc(100% - 0.5rem)) 100%, 0.5rem 100%);
-}
-
-.field > .slider {
-  inline-size: 100%;
-}
-
-.slider::before {
-  content: "";
-  position: absolute;
-  inline-size: 100%;
-  block-size: var(--_track);
-  border-radius: 1rem;
-  background: var(--secondary-container);
-  clip-path: polygon(calc(var(--_start) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start) - 0.5rem) 100%, calc(var(--_start) - 0.5rem) 0, calc(100% - var(--_end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end) + 0.5rem) 100%, calc(100% - var(--_end) + 0.5rem) 0);
-}
-
-.slider:has(> [disabled])::before {
-  background: var(--outline-variant);
-}
-
-.slider:has([disabled]) {
-  opacity: 0.62;
-}
-
-.slider > span > i {
-  position: absolute;
-  block-size: auto;
-  inset: 0 auto 0 0.5rem;
-  color: currentColor;
-  z-index: 1;
-}
-
-.slider:not(.medium, .large, .extra) > span > i {
-  display: none;
-}
-
-.slider.vertical > i {
-  transform: rotate(90deg);
-}
-
-.slider > .tooltip {
-  visibility: hidden !important;
-  opacity: 0 !important;
-  inset: 0 auto auto calc(100% - var(--_end));
-  border-radius: 2rem;
-  transition: top var(--speed2) ease, opacity var(--speed2) ease;
-  transform: translate(-50%, -25%) !important;
-  padding: 0.75rem 1rem;
-}
-
-.slider > .tooltip.bottom {
-  inset: auto auto 0 calc(100% - var(--_end));
-  transition: bottom var(--speed2) ease, opacity var(--speed2) ease;
-  transform: translate(-50%, 25%) !important;
-}
-
-[dir=rtl] .slider > .tooltip {
-  transform: translate(-50%, -25%) scaleX(-1) !important;
-}
-
-[dir=rtl] .slider > .tooltip.bottom {
-  transform: translate(-50%, 25%) scaleX(-1) !important;
-}
-
-.slider > .tooltip + .tooltip {
-  inset: 0.25rem calc(100% - var(--_start)) auto auto;
-  transform: translate(50%, -25%) !important;
-}
-
-.slider > .tooltip + .tooltip.bottom {
-  inset: auto calc(100% - var(--_start)) -0.25rem auto;
-  transform: translate(50%, 25%) !important;
-}
-
-[dir=rtl] .slider > .tooltip + .tooltip {
-  transform: translate(50%, -25%) scaleX(-1) !important;
-}
-
-[dir=rtl] .slider > .tooltip + .tooltip.bottom {
-  transform: translate(50%, 25%) scaleX(-1) !important;
-}
-
-.slider > .tooltip::before {
-  content: var(--_value1);
-}
-
-.slider > .tooltip + .tooltip::before {
-  content: var(--_value2);
-}
-
-.slider > :focus ~ .tooltip {
-  inset-block: -1rem auto;
-  opacity: 1 !important;
-  visibility: visible !important;
-}
-
-.slider > :focus ~ .tooltip.bottom {
-  inset-block: auto -1rem;
-}
-
-.slider.vertical > .tooltip {
-  inset-block: auto;
-  block-size: 2.5rem;
-  inline-size: 2.5rem;
-  margin-block: calc(-1 * var(--_thumb)) 0 !important;
-  transform: rotate(90deg) translate(-75%, 50%) !important;
-}
-
-.slider.vertical > .tooltip.bottom {
-  inset-block: auto;
-  margin-block: 0 calc(-1 * var(--_thumb)) !important;
-  transform: rotate(90deg) translate(75%, 50%) !important;
-}
-
-.slider.vertical > .tooltip + .tooltip {
-  transform: rotate(90deg) translate(-75%, -50%) !important;
-}
-
-.slider.vertical > .tooltip + .tooltip.bottom {
-  transform: rotate(90deg) translate(75%, -50%) !important;
-}
-
-:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
-  flex: auto;
-}
-
-.slider.max,
-.slider.max.vertical,
-.slider.max > input,
-.slider.max.vertical > input {
-  all: unset;
-  margin: 0 !important;
-  position: absolute;
-  color: var(--primary);
-  inset: 0;
-  border-radius: inherit;
-  overflow: hidden;
-  z-index: 2;
-  cursor: grab;
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.slider.max::before {
-  display: none;
-}
-
-.slider.max.vertical > input {
-  writing-mode: vertical-lr;
-  transform: rotate(-180deg);
-}
-
-.slider.max > input::-webkit-slider-thumb {
-  opacity: 0;
-  inline-size: 1rem;
-  block-size: 100vh;
-  transform: none !important;
-}
-
-.slider.max > input::-moz-range-thumb {
-  opacity: 0;
-  inline-size: 1rem;
-  block-size: 100vh;
-  transform: none !important;
-}
-
-.slider.max > span {
-  block-size: auto !important;
-  inset: 0 var(--_end) 0 var(--_start);
-  clip-path: none;
-  background: currentcolor;
-  color: inherit;
-  border-radius: 0;
-}
-
-.slider.max.vertical > span {
-  inset: var(--_end) 0 var(--_start) 0;
-}
-
-.slider > input:focus-visible::-webkit-slider-thumb {
-  outline: 0.1875rem solid var(--primary);
-  outline-offset: 0.25rem;
-}
-
-.slider > input:focus-visible::-moz-range-thumb {
-  outline: 0.1875rem solid var(--primary);
-  outline-offset: 0.25rem;
-}
-
-.slider.max > input:focus-visible {
-  outline: 0.1875rem solid var(--primary);
-  outline-offset: -0.125rem;
-}
-
-@media (pointer: coarse) {
-  .slider > :hover ~ .tooltip {
-    inset-block: -1rem auto !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-
-  .slider > :hover ~ .tooltip.bottom {
-    inset-block: auto -1rem !important;
-  }
-  
-  body:has(input[type=range]:focus) {
-    overflow: hidden;
-  }
+.slider {
+  --_start: 0%;
+  --_end: 0%;
+  --_value1: "";
+  --_value2: "";
+  --_track: 1rem;
+  --_thumb: max(2.5rem, calc(var(--_track) + 0.5rem));
+  display: flex;
+  align-items: center !important;
+  inline-size: auto;
+  block-size: var(--_thumb);
+  flex: none;
+  direction: ltr;
+  margin: 0 1.25rem;
+}
+
+[dir=rtl] .slider {
+  transform: scaleX(-1);
+}
+
+.slider.vertical {
+  flex-direction: row !important;
+  margin: 0.5rem auto !important;
+  padding: 50% 0;
+  transform: rotate(-90deg);
+  inline-size: 100%;
+}
+
+.slider.tiny {
+  --_track: 1rem;
+}
+
+.slider.small {
+  --_track: 1.5rem;
+}
+
+.slider.medium {
+  --_track: 2.5rem;
+}
+
+.slider.large {
+  --_track: 3.5rem;
+}
+
+.slider.extra {
+  --_track: 6rem;
+}
+
+.slider > input {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: none;
+  inline-size: 100%;
+  block-size: var(--_track);
+  background: none;
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  transform: rotate(0deg);
+}
+
+.slider > input:only-of-type {
+  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;
+  block-size: var(--_thumb);
+  inline-size: 0.25rem;
+  border-radius: 0.25rem;
+  background: var(--primary);
+  cursor: grab;
+  margin: 0;
+  z-index: 1;
+}
+
+.slider > input::-webkit-slider-thumb:active {
+  cursor: grabbing;
+}
+
+.slider > input::-moz-range-thumb {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: all;
+  block-size: 2.75rem;
+  inline-size: 0.25rem;
+  border-radius: 0.25rem;
+  background: var(--primary);
+  cursor: grab;
+  margin: 0;
+}
+
+.slider > input::-moz-range-thumb:active {
+  cursor: grabbing;
+}
+
+.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
+  transform: scaleX(0.6);
+}
+
+.slider > input:not(:disabled):is(:focus)::-moz-range-thumb {
+  transform: scaleX(0.6);
+}
+
+.slider > input:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.slider > input:disabled::-webkit-slider-thumb {
+  background: var(--outline);
+  cursor: not-allowed;
+}
+
+.slider > input:disabled::-moz-range-thumb {
+  background: var(--outline);
+  cursor: not-allowed;
+}
+
+.slider > input:disabled ~ span {
+  background: var(--outline);
+}
+
+.slider > span {
+  position: absolute;
+  block-size: var(--_track);
+  border-radius: 1rem 0 0 1rem;
+  background: var(--primary);
+  color: var(--on-primary);
+  z-index: 0;
+  inset: calc(50% - (var(--_track) / 2)) var(--_end) auto var(--_start);
+  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
+}
+
+.slider > input[type=range] + input[type=range] ~ span {
+  border-radius: 0;
+  clip-path: polygon(0.5rem 0, max(0.5rem, calc(100% - 0.5rem)) 0, max(0.5rem, calc(100% - 0.5rem)) 100%, 0.5rem 100%);
+}
+
+.field > .slider {
+  inline-size: 100%;
+}
+
+.slider::before {
+  content: "";
+  position: absolute;
+  inline-size: 100%;
+  block-size: var(--_track);
+  border-radius: 1rem;
+  background: var(--secondary-container);
+  clip-path: polygon(calc(var(--_start) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start) - 0.5rem) 100%, calc(var(--_start) - 0.5rem) 0, calc(100% - var(--_end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end) + 0.5rem) 100%, calc(100% - var(--_end) + 0.5rem) 0);
+}
+
+.slider:has(> [disabled])::before {
+  background: var(--outline-variant);
+}
+
+.slider:has([disabled]) {
+  opacity: 0.62;
+}
+
+.slider > span > i {
+  position: absolute;
+  block-size: auto;
+  inset: 0 auto 0 0.5rem;
+  color: currentColor;
+  z-index: 1;
+}
+
+.slider:not(.medium, .large, .extra) > span > i {
+  display: none;
+}
+
+.slider.vertical > i {
+  transform: rotate(90deg);
+}
+
+.slider > .tooltip {
+  visibility: hidden !important;
+  opacity: 0 !important;
+  inset: 0 auto auto calc(100% - var(--_end));
+  border-radius: 2rem;
+  transition: top var(--speed2) ease, opacity var(--speed2) ease;
+  transform: translate(-50%, -25%) !important;
+  padding: 0.75rem 1rem;
+}
+
+.slider > .tooltip.bottom {
+  inset: auto auto 0 calc(100% - var(--_end));
+  transition: bottom var(--speed2) ease, opacity var(--speed2) ease;
+  transform: translate(-50%, 25%) !important;
+}
+
+[dir=rtl] .slider > .tooltip {
+  transform: translate(-50%, -25%) scaleX(-1) !important;
+}
+
+[dir=rtl] .slider > .tooltip.bottom {
+  transform: translate(-50%, 25%) scaleX(-1) !important;
+}
+
+.slider > .tooltip + .tooltip {
+  inset: 0.25rem calc(100% - var(--_start)) auto auto;
+  transform: translate(50%, -25%) !important;
+}
+
+.slider > .tooltip + .tooltip.bottom {
+  inset: auto calc(100% - var(--_start)) -0.25rem auto;
+  transform: translate(50%, 25%) !important;
+}
+
+[dir=rtl] .slider > .tooltip + .tooltip {
+  transform: translate(50%, -25%) scaleX(-1) !important;
+}
+
+[dir=rtl] .slider > .tooltip + .tooltip.bottom {
+  transform: translate(50%, 25%) scaleX(-1) !important;
+}
+
+.slider > .tooltip::before {
+  content: var(--_value1);
+}
+
+.slider > .tooltip + .tooltip::before {
+  content: var(--_value2);
+}
+
+.slider > :focus ~ .tooltip {
+  inset-block: -1rem auto;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.slider > :focus ~ .tooltip.bottom {
+  inset-block: auto -1rem;
+}
+
+.slider.vertical > .tooltip {
+  inset-block: auto;
+  block-size: 2.5rem;
+  inline-size: 2.5rem;
+  margin-block: calc(-1 * var(--_thumb)) 0 !important;
+  transform: rotate(90deg) translate(-75%, 50%) !important;
+}
+
+.slider.vertical > .tooltip.bottom {
+  inset-block: auto;
+  margin-block: 0 calc(-1 * var(--_thumb)) !important;
+  transform: rotate(90deg) translate(75%, 50%) !important;
+}
+
+.slider.vertical > .tooltip + .tooltip {
+  transform: rotate(90deg) translate(-75%, -50%) !important;
+}
+
+.slider.vertical > .tooltip + .tooltip.bottom {
+  transform: rotate(90deg) translate(75%, -50%) !important;
+}
+
+:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
+  flex: auto;
+}
+
+.slider.max,
+.slider.max.vertical,
+.slider.max > input,
+.slider.max.vertical > input {
+  all: unset;
+  margin: 0 !important;
+  position: absolute;
+  color: var(--primary);
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  z-index: 2;
+  cursor: grab;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.slider.max::before {
+  display: none;
+}
+
+.slider.max.vertical > input {
+  writing-mode: vertical-lr;
+  transform: rotate(-180deg);
+}
+
+.slider.max > input::-webkit-slider-thumb {
+  opacity: 0;
+  inline-size: 1rem;
+  block-size: 100vh;
+  transform: none !important;
+}
+
+.slider.max > input::-moz-range-thumb {
+  opacity: 0;
+  inline-size: 1rem;
+  block-size: 100vh;
+  transform: none !important;
+}
+
+.slider.max > span {
+  block-size: auto !important;
+  inset: 0 var(--_end) 0 var(--_start);
+  clip-path: none;
+  background: currentcolor;
+  color: inherit;
+  border-radius: 0;
+}
+
+.slider.max.vertical > span {
+  inset: var(--_end) 0 var(--_start) 0;
+}
+
+.slider > input:focus-visible::-webkit-slider-thumb {
+  outline: 0.1875rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+.slider > input:focus-visible::-moz-range-thumb {
+  outline: 0.1875rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+.slider.max > input:focus-visible {
+  outline: 0.1875rem solid var(--primary);
+  outline-offset: -0.125rem;
+}
+
+@media (pointer: coarse) {
+  .slider > :hover ~ .tooltip {
+    inset-block: -1rem auto !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
+  .slider > :hover ~ .tooltip.bottom {
+    inset-block: auto -1rem !important;
+  }
+  
+  body:has(input[type=range]:focus) {
+    overflow: hidden;
+  }
 }