From fe66ca163cbb9d689cf296c4c2f7a63414c1cf45 Mon Sep 17 00:00:00 2001 From: "opencode-agent[bot]" Date: Fri, 30 Jan 2026 17:58:31 +0000 Subject: chore: generate --- packages/ui/src/components/scroll-fade.css | 182 +++++++++++------------------ 1 file changed, 71 insertions(+), 111 deletions(-) (limited to 'packages/ui/src/components/scroll-fade.css') 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); + } + } } -- cgit v1.2.3