From bbd0f3a25283b6f9567a04e79d7f6972950ab0a6 Mon Sep 17 00:00:00 2001 From: Kit Langton Date: Sat, 7 Mar 2026 06:25:22 -0500 Subject: STUPID SEXY TIMELINE (#16420) --- packages/ui/src/components/rolling-results.css | 92 ++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 packages/ui/src/components/rolling-results.css (limited to 'packages/ui/src/components/rolling-results.css') diff --git a/packages/ui/src/components/rolling-results.css b/packages/ui/src/components/rolling-results.css new file mode 100644 index 000000000..200b2a97e --- /dev/null +++ b/packages/ui/src/components/rolling-results.css @@ -0,0 +1,92 @@ +[data-component="rolling-results"] { + --rolling-results-row-height: 22px; + --rolling-results-fixed-height: var(--rolling-results-row-height); + --rolling-results-fixed-gap: 0px; + --rolling-results-row-gap: 0px; + + display: block; + width: 100%; + min-width: 0; + + [data-slot="rolling-results-viewport"] { + position: relative; + min-width: 0; + height: 0; + overflow: clip; + } + + &[data-overflowing="true"]:not([data-scrollable="true"]) [data-slot="rolling-results-window"] { + mask-image: linear-gradient( + to bottom, + transparent 0%, + black var(--rolling-results-fade), + black calc(100% - calc(var(--rolling-results-fade) * 0.5)), + transparent 100% + ); + -webkit-mask-image: linear-gradient( + to bottom, + transparent 0%, + black var(--rolling-results-fade), + black calc(100% - calc(var(--rolling-results-fade) * 0.5)), + transparent 100% + ); + } + + [data-slot="rolling-results-fixed"] { + min-width: 0; + height: var(--rolling-results-fixed-height); + min-height: var(--rolling-results-fixed-height); + display: flex; + align-items: center; + } + + [data-slot="rolling-results-window"] { + min-width: 0; + margin-top: var(--rolling-results-fixed-gap); + height: calc(100% - var(--rolling-results-fixed-height) - var(--rolling-results-fixed-gap)); + overflow: clip; + } + + &[data-scrollable="true"] [data-slot="rolling-results-window"] { + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + } + + &[data-scrollable="true"] [data-slot="rolling-results-track"] { + transform: none !important; + will-change: auto; + } + + [data-slot="rolling-results-body"] { + min-width: 0; + } + + [data-slot="rolling-results-track"] { + display: flex; + min-width: 0; + flex-direction: column; + gap: var(--rolling-results-row-gap); + will-change: transform; + } + + [data-slot="rolling-results-row"], + [data-slot="rolling-results-empty"] { + min-width: 0; + height: var(--rolling-results-row-height); + min-height: var(--rolling-results-row-height); + display: flex; + align-items: center; + } + + [data-slot="rolling-results-row"] { + color: var(--text-base); + } + + [data-slot="rolling-results-empty"] { + color: var(--text-weaker); + } +} -- cgit v1.2.3