63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
|
|
import plugin from 'tailwindcss/plugin';
|
|
|
|
export default plugin(({addComponents, theme}) => {
|
|
addComponents({
|
|
'.scrollable, .scrollable-y, .scrollable-x, .scrollable-hover, .scrollable-y-hover, .scrollable-x-hover, .scrollable-auto, .scrollable-y-auto, .scrollable-x-auto': {
|
|
'scrollbar-width': 'thin',
|
|
'scrollbar-color': 'transparent transparent',
|
|
'position': 'relative',
|
|
'&::-webkit-scrollbar': {
|
|
'width': '0.35rem',
|
|
'height': '0.35rem',
|
|
},
|
|
'&::-webkit-scrollbar-track': {
|
|
'background-color': 'transparent'
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
'border-radius': '1.25rem',
|
|
},
|
|
'&::-webkit-scrollbar-corner': {
|
|
'background-color': 'transparent'
|
|
}
|
|
},
|
|
'.scrollable, .scrollable-hover': {
|
|
'overflow': 'scroll',
|
|
},
|
|
'.scrollable-y, .scrollable-y-hover': {
|
|
'overflow-y': 'scroll',
|
|
},
|
|
'.scrollable-x, .scrollable-x-hover': {
|
|
'overflow-x': 'scroll',
|
|
},
|
|
'.scrollable-auto': {
|
|
'overflow': 'auto',
|
|
},
|
|
'.scrollable-y-auto': {
|
|
'overflow-y': 'auto',
|
|
},
|
|
'.scrollable-x-auto': {
|
|
'overflow-x': 'auto',
|
|
},
|
|
'.scrollable, .scrollable-y, .scrollable-x, .scrollable-auto, .scrollable-y-auto, .scrollable-x-auto, .scrollable-hover:hover, .scrollable-y-hover:hover, .scrollable-x-hover:hover': {
|
|
'scrollbar-color': 'var(--tw-scrollbar-thumb-color, var(--tw-gray-200)) transparent',
|
|
'&::-webkit-scrollbar-thumb': {
|
|
'background-color': 'var(--tw-scrollbar-thumb-color, var(--tw-gray-200))',
|
|
},
|
|
'&::-webkit-scrollbar-corner': {
|
|
'background-color': 'transparent'
|
|
}
|
|
},
|
|
[`@media (max-width: ${theme('screens.lg')})`]: {
|
|
'.scrollable, .scrollable-hover': {
|
|
'overflow': 'auto',
|
|
},
|
|
'.scrollable-y, .scrollable-y-hover': {
|
|
'overflow-y': 'auto',
|
|
},
|
|
'.scrollable-x, .scrollable-x-hover': {
|
|
'overflow-x': 'auto',
|
|
},
|
|
},
|
|
});
|
|
}); |