diff options
| author | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
|---|---|---|
| committer | opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com> | 2026-01-30 17:58:31 +0000 |
| commit | fe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch) | |
| tree | e330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/scroll-fade.css | |
| parent | 20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff) | |
| download | opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.tar.gz opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.zip | |
chore: generate
Diffstat (limited to 'packages/ui/src/components/scroll-fade.css')
| -rw-r--r-- | packages/ui/src/components/scroll-fade.css | 182 |
1 files changed, 71 insertions, 111 deletions
diff --git a/packages/ui/src/components/scroll-fade.css b/packages/ui/src/components/scroll-fade.css index 1e6b30d27..ede5fabec 100644 --- a/packages/ui/src/components/scroll-fade.css +++ b/packages/ui/src/components/scroll-fade.css @@ -1,122 +1,82 @@ [data-component="scroll-fade"] { - overflow: auto; - overscroll-behavior: contain; - scrollbar-width: none; - box-sizing: border-box; - color: inherit; - font: inherit; - -ms-overflow-style: none; + overflow: auto; + overscroll-behavior: contain; + scrollbar-width: none; + box-sizing: border-box; + color: inherit; + font: inherit; + -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { + display: none; + } - &[data-direction="horizontal"] { - overflow-x: auto; - overflow-y: hidden; + &[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 - ); - } + /* 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 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 - ); - } - } + /* 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-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 - ); - } + &[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 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 - ); - } - } + /* 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); + } + } } |