@lobehub/ui 5.15.6 → 5.15.7
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
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n content: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.375rem;\n color: ${cssVar.colorText};\n `,\n\n corner: css`\n background: ${cssVar.colorFillSecondary};\n `,\n\n root: css`\n position: relative;\n box-sizing: border-box;\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n content: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.375rem;\n color: ${cssVar.colorText};\n `,\n\n corner: css`\n background: ${cssVar.colorFillSecondary};\n `,\n\n root: css`\n position: relative;\n box-sizing: border-box;\n `,\n\n scrollbar: css`\n pointer-events: none;\n\n margin: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n\n opacity: 0;\n background: transparent;\n\n transition: opacity 150ms;\n\n &::before {\n content: '';\n position: absolute;\n }\n\n &[data-scrolling] {\n transition-duration: 0ms;\n }\n\n &[data-hovering],\n &[data-scrolling] {\n pointer-events: auto;\n opacity: 1;\n }\n\n &[data-orientation='vertical'] {\n width: 4px;\n\n &::before {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 100%;\n }\n }\n\n &[data-orientation='horizontal'] {\n height: 4px;\n\n &::before {\n inset-block-end: -8px;\n inset-inline: 0;\n width: 100%;\n height: 20px;\n }\n }\n `,\n\n thumb: css`\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background: ${cssVar.colorTextQuaternary};\n `,\n\n viewport: css`\n position: relative;\n height: 100%;\n outline: none;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimary};\n outline-offset: 2px;\n }\n `,\n\n viewportFade: css`\n --scroll-area-overflow-y-start: inherit;\n --scroll-area-overflow-y-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-top: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-start, 0px)\n );\n --lobe-scroll-area-fade-bottom: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-end, 0px)\n );\n\n /* Fade the CONTENT via mask, so it works on background images too. */\n mask-image: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-top),\n #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n transparent 100%\n );\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n /* Scroll-driven animation: use scroll position to drive the mask. */\n @supports (animation-timeline: scroll()) {\n /*\n * Important: drive fade by *distance to edges* (first/last 40px),\n * so reaching top/bottom doesn't cause a sudden snap.\n */\n @keyframes lobe-scroll-area-fade-top-in {\n from {\n --lobe-scroll-area-fade-top: 0;\n }\n\n to {\n --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-bottom-out {\n from {\n --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-bottom: 0;\n }\n }\n\n animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n animation-duration: 1ms, 1ms;\n animation-timing-function: linear, linear;\n animation-fill-mode: both, both;\n animation-timeline: scroll(self y), scroll(self y);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n\n viewportFadeHorizontal: css`\n --scroll-area-overflow-x-start: inherit;\n --scroll-area-overflow-x-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-left: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-start, 0px)\n );\n --lobe-scroll-area-fade-right: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-end, 0px)\n );\n\n /* Fade the CONTENT via mask, so it works on background images too. */\n mask-image: linear-gradient(\n to right,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-left),\n #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n transparent 100%\n );\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n /* Scroll-driven animation: use scroll position to drive the mask. */\n @supports (animation-timeline: scroll()) {\n /*\n * Important: drive fade by *distance to edges* (first/last 40px),\n * so reaching start/end doesn't cause a sudden snap.\n */\n @keyframes lobe-scroll-area-fade-left-in {\n from {\n --lobe-scroll-area-fade-left: 0;\n }\n\n to {\n --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-right-out {\n from {\n --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-right: 0;\n }\n }\n\n animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n animation-duration: 1ms, 1ms;\n animation-timing-function: linear, linear;\n animation-fill-mode: both, both;\n animation-timeline: scroll(self x), scroll(self x);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n\n viewportFadeBoth: css`\n --scroll-area-overflow-x-start: inherit;\n --scroll-area-overflow-x-end: inherit;\n --scroll-area-overflow-y-start: inherit;\n --scroll-area-overflow-y-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-top: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-start, 0px)\n );\n --lobe-scroll-area-fade-bottom: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-end, 0px)\n );\n --lobe-scroll-area-fade-left: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-start, 0px)\n );\n --lobe-scroll-area-fade-right: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-end, 0px)\n );\n\n mask-composite: intersect;\n\n /*\n * Combine vertical + horizontal fades by intersecting two gradient masks\n * so the four corners stay transparent only when both axes overflow.\n */\n mask-image:\n linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-top),\n #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n transparent 100%\n ),\n linear-gradient(\n to right,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-left),\n #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n transparent 100%\n );\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 100%,\n 100% 100%;\n\n @supports (animation-timeline: scroll()) {\n @keyframes lobe-scroll-area-fade-top-in-both {\n from {\n --lobe-scroll-area-fade-top: 0;\n }\n\n to {\n --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-bottom-out-both {\n from {\n --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-bottom: 0;\n }\n }\n\n @keyframes lobe-scroll-area-fade-left-in-both {\n from {\n --lobe-scroll-area-fade-left: 0;\n }\n\n to {\n --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-right-out-both {\n from {\n --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-right: 0;\n }\n }\n\n animation-name:\n lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n animation-duration: 1ms, 1ms, 1ms, 1ms;\n animation-timing-function: linear, linear, linear, linear;\n animation-fill-mode: both, both, both, both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;2BAMY,OAAO,aAAa;;;;CAK7C,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGtB,EAAE"}
|