@mkbabb/glass-ui 10.1.5 → 10.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
@property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider{cursor: grab;}.glass-slider[data-held],.glass-slider:active{cursor: grabbing;}.glass-slider[data-disabled]{cursor: not-allowed;}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: var(--slider-track-height-sm);--slider-thumb-size: min(var(--slider-thumb-size-sm),var(--slider-track-height-sm));}.glass-slider[data-size="md"]{--slider-track-height: var(--slider-track-height-md);--slider-thumb-size: min(var(--slider-thumb-size-md),var(--slider-track-height-md));}.glass-slider[data-size="lg"]{--slider-track-height: var(--slider-track-height-lg);--slider-thumb-size: min(var(--slider-thumb-size-lg),var(--slider-track-height-lg));}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.glass-slider,.glass-loupe{--slider-fill-ink: var(--glass-capsule-warm);}.dark .glass-slider,.dark .glass-loupe{--slider-fill-ink: color-mix(in oklab,var(--foreground) 22%,transparent);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--slider-fill-ink));}.slider-lane{position: absolute;inset: 0;}.glass-slider:not([data-variant="spectrum"]){--slider-lane-cut: var(--slider-thumb-size,1rem);--value-mark-inset: calc(var(--slider-lane-cut) / 2);}.glass-slider:not([data-variant="spectrum"]):not([data-orientation="vertical"]){& .slider-lane{inset-inline-end: var(--slider-lane-cut);}& .slider-range{margin-inline-end: calc(-1 * var(--slider-lane-cut));}&[data-inverted] .slider-lane{inset-inline: var(--slider-lane-cut) 0;}&[data-inverted] .slider-range{margin-inline: calc(-1 * var(--slider-lane-cut)) 0;}}.glass-slider[data-orientation="vertical"]:not([data-variant="spectrum"]){& .slider-lane{inset-block-start: var(--slider-lane-cut);}& .slider-range{margin-block-start: calc(-1 * var(--slider-lane-cut));}&[data-inverted] .slider-lane{inset-block: 0 var(--slider-lane-cut);}&[data-inverted] .slider-range{margin-block: 0 calc(-1 * var(--slider-lane-cut));}}.slider-thumb{display: block;width: var(--slider-thumb-size,1rem);height: var(--slider-thumb-size,1rem);border: none;border-radius: var(--radius-pill);background: var(--card);box-shadow: var(--shadow-sm);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]) .slider-thumb:focus-visible{outline: none;}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range,.glass-slider[data-disabled]:not([data-variant="spectrum"]) .slider-thumb{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider:not([data-variant="spectrum"]) .slider-thumb{forced-color-adjust: none;background: Canvas;border: 1px solid CanvasText;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--slider-fill-ink));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}
|
|
1
|
+
@property --glass-slider-track-background{syntax: "*";inherits: true;}.glass-slider{--slider-range-origin: left center;position: relative;display: flex;inline-size: 100%;align-items: center;touch-action: none;user-select: none;transition: color var(--duration-fast) var(--ease-standard);}.glass-slider{cursor: grab;}.glass-slider[data-held],.glass-slider:active{cursor: grabbing;}.glass-slider[data-disabled]{cursor: not-allowed;}.glass-slider[data-inverted],.glass-slider:dir(rtl){--slider-range-origin: right center;}.glass-slider:dir(rtl)[data-inverted]{--slider-range-origin: left center;}.glass-slider[data-size="sm"]{--slider-track-height: var(--slider-track-height-sm);--slider-thumb-size: min(var(--slider-thumb-size-sm),var(--slider-track-height-sm));}.glass-slider[data-size="md"]{--slider-track-height: var(--slider-track-height-md);--slider-thumb-size: min(var(--slider-thumb-size-md),var(--slider-track-height-md));}.glass-slider[data-size="lg"]{--slider-track-height: var(--slider-track-height-lg);--slider-thumb-size: min(var(--slider-thumb-size-lg),var(--slider-track-height-lg));}.glass-slider[data-variant="spectrum"]{--slider-track-height: calc(var(--slider-thumb-size,1rem) * 1.5);}@media (pointer: coarse){.glass-slider{--slider-target-floor: max( var(--slider-track-height,0.375rem),var(--slider-touch-target,1.5rem) );min-block-size: var(--slider-target-floor);min-inline-size: var(--slider-target-floor);}}.slider-track{width: 100%;flex-grow: 1;height: var(--slider-track-height,0.375rem);background: var(--glass-slider-track-background,var(--muted-medium));transition: background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);}.glass-slider,.glass-loupe{--slider-fill-ink: var(--glass-capsule-warm);}.dark .glass-slider,.dark .glass-loupe{--slider-fill-ink: color-mix(in oklab,var(--foreground) 22%,transparent);}.slider-range{position: absolute;height: 100%;--liquid-fill-tint: var(--slider-range-bg,var(--slider-fill-ink));}.slider-lane{position: absolute;inset: 0;}.glass-slider:not([data-variant="spectrum"]){--slider-lane-cut: var(--slider-thumb-size,1rem);--value-mark-inset: calc(var(--slider-lane-cut) / 2);}.glass-slider:not([data-variant="spectrum"]):not([data-orientation="vertical"]){& .slider-lane{inset-inline-end: var(--slider-lane-cut);}& .slider-range{margin-inline-end: calc(-1 * var(--slider-lane-cut));}&[data-inverted] .slider-lane{inset-inline: var(--slider-lane-cut) 0;}&[data-inverted] .slider-range{margin-inline: calc(-1 * var(--slider-lane-cut)) 0;}}.glass-slider[data-orientation="vertical"]:not([data-variant="spectrum"]){& .slider-lane{inset-block-start: var(--slider-lane-cut);}& .slider-range{margin-block-start: calc(-1 * var(--slider-lane-cut));}&[data-inverted] .slider-lane{inset-block: 0 var(--slider-lane-cut);}&[data-inverted] .slider-range{margin-block: 0 calc(-1 * var(--slider-lane-cut));}}.slider-thumb{display: block;width: var(--slider-thumb-size,1rem);height: var(--slider-thumb-size,1rem);border: none;border-radius: var(--radius-pill);background: var(--card);box-shadow: var(--shadow-sm);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not([data-variant="spectrum"]) .slider-thumb:focus-visible{outline: none;}.glass-slider:not([data-variant="spectrum"]):hover .slider-range{--liquid-fill-strength: 100%;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow);}.glass-slider[data-held] .slider-range,.glass-slider:active .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(1.02 + 0.16 * var(--smear)),calc(0.94 - 0.06 * var(--smear)) );transform-origin: var(--slider-range-origin);transition: transform var(--spring-press-duration) var(--spring-press);}.glass-slider:not(:active):not([data-held]) .slider-range{transition: transform var(--duration-normal) var(--ease-cartoon-punch),--glass-veil-rung var(--spring-dock-duration) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);}@media (prefers-reduced-motion: reduce){.glass-slider:active .slider-range,.glass-slider[data-held] .slider-range{--motion-weight: 0;transform: scale(1,0.97);}}.glass-slider[data-disabled] .slider-range,.glass-slider[data-disabled]:not([data-variant="spectrum"]) .slider-thumb{opacity: var(--opacity-disabled);}.glass-slider[data-invalid] .slider-track{box-shadow: inset 0 0 0 1px var(--destructive);}.glass-slider[data-invalid]:has(:focus-visible) .slider-track{box-shadow: var(--focus-ring-shadow),inset 0 0 0 1px var(--destructive);}.glass-slider[data-variant="spectrum"][data-held] .slider-thumb{box-shadow: 0 0 0 6px var(--surface-tint-15),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-track{background: var(--glass-slider-track-background,var(--secondary));}.glass-slider[data-variant="spectrum"] .slider-thumb{width: calc(var(--slider-thumb-size,1rem) * 0.75);height: var(--slider-track-height,0.375rem);opacity: 1;background: transparent;border: 2px solid var(--background);border-radius: calc(var(--slider-thumb-size,1rem) * 0.4);box-shadow: var(--shadow-sm);}@supports (corner-shape: superellipse(2)){.glass-slider[data-variant="spectrum"] .slider-thumb{corner-shape: var(--corner-shape-thumb);}}.glass-slider[data-variant="spectrum"]:hover .slider-thumb{box-shadow: 0 0 0 4px var(--surface-tint-8),var(--shadow-sm);}.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: none;box-shadow: var(--focus-ring-shadow),var(--shadow-sm);}.glass-slider[data-orientation="vertical"]{flex-direction: column;width: var(--slider-track-height,0.375rem);height: 12rem;}.glass-slider[data-orientation="vertical"] .slider-track{width: var(--slider-track-height,0.375rem);height: 100%;}.glass-slider[data-orientation="vertical"] .slider-range{width: 100%;height: auto;}.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{--smear: calc(var(--atom-drag-v,0) * var(--motion-weight,0.618));transform: scale( calc(0.94 - 0.06 * var(--smear)),calc(1.02 + 0.16 * var(--smear)) );transform-origin: center bottom;}.glass-slider[data-orientation="vertical"][data-inverted] .slider-range{transform-origin: center top;}.glass-slider[data-orientation="vertical"][data-variant="spectrum"] .slider-thumb{width: var(--slider-track-height,0.375rem);height: calc(var(--slider-thumb-size,1rem) * 0.75);}@media (prefers-reduced-motion: reduce){.glass-slider[data-orientation="vertical"]:active .slider-range,.glass-slider[data-orientation="vertical"][data-held] .slider-range{transform: scale(0.97,1);}}@media (forced-colors: active){.slider-track{background: Canvas;border: 1px solid CanvasText;}.slider-range{background: Highlight;}.glass-slider:not([data-variant="spectrum"]) .slider-thumb{forced-color-adjust: none;background: Canvas;border: 1px solid CanvasText;}.glass-slider[data-variant="spectrum"] .slider-thumb{border-color: CanvasText;forced-color-adjust: none;background: Highlight;}.glass-slider:not([data-variant="spectrum"]):has(:focus-visible) .slider-track,.glass-slider[data-variant="spectrum"] .slider-thumb:focus-visible{outline: var(--focus-ring-width) solid Highlight;outline-offset: 2px;}.glass-loupe{background: Canvas;border: 1px solid CanvasText;}}.glass-loupe{--loupe-k-max: 2.6;--loupe-k-min: 1.15;--loupe-k: calc( var(--loupe-k-max) - (var(--loupe-k-max) - var(--loupe-k-min)) * var(--flex-vel,0) );--loupe-vel: var(--flex-vel,0);--loupe-span: calc(var(--slider-track-height,1.25rem) * 6);position: fixed;z-index: calc(var(--z-overlay) - 1);inline-size: var(--loupe-span);block-size: calc(var(--slider-track-height,1.25rem) * var(--loupe-k-max));inset-block-start: var(--loupe-top,0);inset-inline-start: var(--loupe-left,0);translate: -50% -100%;scale: 0.13;transform-origin: 50% 100%;transition: scale var(--spring-present-duration) var(--spring-present),opacity var(--spring-present-duration) var(--ease-standard);opacity: 0;overflow: hidden;border-radius: var(--radius-pill);pointer-events: none;box-shadow: var(--glass-material-rim),var(--glass-under-shadow-quiet);}.glass-loupe[data-engaged]{scale: 1;opacity: 1;}.glass-loupe:not([data-engaged]){transition: scale var(--spring-present-exit-duration) var(--ease-standard),opacity var(--spring-present-exit-duration) var(--ease-standard);}.glass-loupe-clone{--s: 3;position: absolute;inset-block-start: 50%;inset-inline-start: 0;inline-size: calc(var(--loupe-track-w,0px) * var(--s));block-size: calc(var(--slider-track-height,1.25rem) * var(--s));border-radius: calc(var(--radius-pill) * var(--s));overflow: hidden;background: var(--glass-slider-track-background,var(--muted-medium));transform: translate( calc(var(--loupe-span) / 2 - var(--loupe-k) * var(--loupe-x,0px)),-50% ) scale(calc(var(--loupe-k) / var(--s)));transform-origin: 0 50%;filter: blur(calc(var(--loupe-vel,0) * 0.75px));transition: filter var(--duration-normal) var(--ease-standard);}.glass-loupe-fill{position: absolute;inset-block: 0;inset-inline-start: 0;inline-size: var(--loupe-fill-w,0px);background: var(--slider-range-bg,var(--slider-fill-ink));}.glass-loupe-mark{position: absolute;inset-block: 0;inset-inline-start: 50%;inline-size: 2px;translate: -50% 0;background: var(--foreground);opacity: 0.24;}@media (prefers-reduced-motion: reduce){.glass-loupe{transition-duration: 0.01ms;}.glass-loupe-clone{filter: none;}}
|