diff options
| author | Aaron Iker <[email protected]> | 2026-01-30 18:57:49 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-01-30 17:57:49 +0000 |
| commit | 20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (patch) | |
| tree | 50b8aa69da65642789c3fa92f65034a9dd1361df /packages/ui/src/components/scroll-fade.css | |
| parent | 1bbe84ed8d0eceb96af06b971690ebd0b0213580 (diff) | |
| download | opencode-20619a6a26ec0cfc2707b7ed13387715e9f9cdaa.tar.gz opencode-20619a6a26ec0cfc2707b7ed13387715e9f9cdaa.zip | |
feat: Transitions, spacing, scroll fade, prompt area update (#11168)
Co-authored-by: Github Action <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: aaroniker <[email protected]>
Diffstat (limited to 'packages/ui/src/components/scroll-fade.css')
| -rw-r--r-- | packages/ui/src/components/scroll-fade.css | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/packages/ui/src/components/scroll-fade.css b/packages/ui/src/components/scroll-fade.css new file mode 100644 index 000000000..1e6b30d27 --- /dev/null +++ b/packages/ui/src/components/scroll-fade.css @@ -0,0 +1,122 @@ +[data-component="scroll-fade"] { + overflow: auto; + overscroll-behavior: contain; + scrollbar-width: none; + box-sizing: border-box; + color: inherit; + font: inherit; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } + + &[data-direction="horizontal"] { + overflow-x: auto; + overflow-y: hidden; + + /* Both fades */ + &[data-fade-start][data-fade-end] { + mask-image: linear-gradient( + to right, + transparent, + black var(--scroll-fade-start), + black calc(100% - var(--scroll-fade-end)), + transparent + ); + -webkit-mask-image: linear-gradient( + to right, + transparent, + black var(--scroll-fade-start), + black calc(100% - var(--scroll-fade-end)), + transparent + ); + } + + /* Only start fade */ + &[data-fade-start]:not([data-fade-end]) { + mask-image: linear-gradient( + to right, + transparent, + black var(--scroll-fade-start), + black 100% + ); + -webkit-mask-image: linear-gradient( + to right, + transparent, + black var(--scroll-fade-start), + black 100% + ); + } + + /* Only end fade */ + &:not([data-fade-start])[data-fade-end] { + mask-image: linear-gradient( + to right, + black 0%, + black calc(100% - var(--scroll-fade-end)), + transparent + ); + -webkit-mask-image: linear-gradient( + to right, + black 0%, + black calc(100% - var(--scroll-fade-end)), + transparent + ); + } + } + + &[data-direction="vertical"] { + overflow-y: auto; + overflow-x: hidden; + + &[data-fade-start][data-fade-end] { + mask-image: linear-gradient( + to bottom, + transparent, + black var(--scroll-fade-start), + black calc(100% - var(--scroll-fade-end)), + transparent + ); + -webkit-mask-image: linear-gradient( + to bottom, + transparent, + black var(--scroll-fade-start), + black calc(100% - var(--scroll-fade-end)), + transparent + ); + } + + /* Only start fade */ + &[data-fade-start]:not([data-fade-end]) { + mask-image: linear-gradient( + to bottom, + transparent, + black var(--scroll-fade-start), + black 100% + ); + -webkit-mask-image: linear-gradient( + to bottom, + transparent, + black var(--scroll-fade-start), + black 100% + ); + } + + /* Only end fade */ + &:not([data-fade-start])[data-fade-end] { + mask-image: linear-gradient( + to bottom, + black 0%, + black calc(100% - var(--scroll-fade-end)), + transparent + ); + -webkit-mask-image: linear-gradient( + to bottom, + black 0%, + black calc(100% - var(--scroll-fade-end)), + transparent + ); + } + } +} |