Skip to content

Commit eadc5fc

Browse files
committed
fix: scrollable
1 parent 928342a commit eadc5fc

File tree

3 files changed

+29
-48
lines changed

3 files changed

+29
-48
lines changed

packages/app-portal/src/systems/Core/components/Layout.tsx

+4-11
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet';
33
import { META_DESC, META_OGIMG } from '~/constants';
44
import { OverlayDialog } from '~/systems/Overlay';
55

6-
import { coreStyles } from '../styles';
6+
import { scrollableTwClasses } from '../styles';
77

88
import { Box, Flex, cx } from '@fuels/ui';
99
import { tv } from 'tailwind-variants';
@@ -57,9 +57,7 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
5757
<Header />
5858
<OverlayDialog />
5959
<Box className={classes.scrollView()}>
60-
<Box>{children}</Box>
61-
{/* TODO: add scrollable content class */}
62-
{/* <Box className={coreStyles.scrollableContent()}>{children}</Box> */}
60+
<Box className={classes.scrollViewContent()}>{children}</Box>
6361
</Box>
6462
</Flex>
6563
</>
@@ -71,13 +69,8 @@ Layout.Content = Content;
7169
const styles = tv({
7270
slots: {
7371
root: 'w-screen h-screen overflow-hidden absolute',
74-
// TODO: add scrollable in scrollView
75-
scrollView: 'flex-1',
72+
scrollView: ['flex-1', scrollableTwClasses.scrollableClasses],
73+
scrollViewContent: scrollableTwClasses.scrollableContentClasses,
7674
content: 'p-4 pt-16 max-w-[955px] mx-auto',
77-
78-
// scrollView: cssObj({
79-
// flex: 1,
80-
// ...coreStyles.scrollable(),
81-
// }),
8275
},
8376
});
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,7 @@
1-
import { cssObj } from '@fuel-ui/css';
1+
import './scrollbar.css';
22

3-
export const SCROLL_WIDTH = '14px';
4-
5-
export const scrollableContent = cssObj({
6-
width: `calc(100vw - ${SCROLL_WIDTH})`,
7-
maxWidth: `calc(100vw - ${SCROLL_WIDTH})`,
8-
paddingLeft: SCROLL_WIDTH,
9-
boxSizing: 'border-box',
10-
});
11-
12-
export const scrollable = (regularColor = '$gray8', hoverColor = '$gray10') =>
13-
cssObj({
14-
overflowY: 'overlay',
15-
scrollBehavior: 'smooth',
16-
17-
'&::-webkit-scrollbar': {
18-
width: SCROLL_WIDTH,
19-
backgroundColor: 'transparent',
20-
},
21-
'&::-webkit-scrollbar-track': {
22-
backgroundColor: 'transparent',
23-
},
24-
'&::-webkit-scrollbar-thumb': {
25-
backgroundColor: regularColor,
26-
opacity: 0.5,
27-
border: '4px solid transparent',
28-
borderRadius: '12px',
29-
backgroundClip: 'content-box',
30-
},
31-
'&::-webkit-scrollbar-thumb:hover': {
32-
backgroundColor: hoverColor,
33-
},
34-
});
35-
36-
export const coreStyles = {
37-
scrollableContent,
38-
scrollable,
3+
export const scrollableTwClasses = {
4+
scrollableContentClasses:
5+
'w-[calc(100vw_-_10px)] max-w-[calc(100vw_-_10px)] pl-[10px] box-border',
6+
scrollableClasses: 'overflow-y-scroll scroll-smooth custom-scrollbar',
397
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
.custom-scrollbar {
7+
&::-webkit-scrollbar {
8+
@apply w-[10px] bg-transparent;
9+
}
10+
&::-webkit-scrollbar-track {
11+
@apply bg-transparent;
12+
}
13+
&::-webkit-scrollbar-thumb {
14+
@apply bg-gray-8 opacity-50 border-4 border-transparent rounded-[12px] bg-clip-content;
15+
}
16+
&::-webkit-scrollbar-thumb:hover {
17+
@apply bg-gray-10;
18+
}
19+
}
20+
}

0 commit comments

Comments
 (0)