matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add no-reduce-motion as tailwind variant

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-05-05 14:22:10 +02:00
parent bacd220771
commit 5a8a13a136
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/sidebar-menu.tsx
View File

@ -143,7 +143,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
}
>
<div
className={clsx('fixed inset-0 bg-gray-500 transition-opacity black:bg-gray-900 dark:bg-gray-700', {
className={clsx('fixed inset-0 bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
'opacity-0': !sidebarVisible,
'opacity-90': sidebarVisible,
})}
@ -155,7 +155,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
<div
className={
clsx({
'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs transition-transform ease-in-out': true,
'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs no-reduce-motion:transition-transform ease-in-out': true,
'!translate-x-0': sidebarVisible,
})
}

2
tailwind.config.ts
View File

@ -7,6 +7,7 @@ import plugin from 'tailwindcss/plugin';
import { parseColorMatrix } from './tailwind/colors';
const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
const reducedMotionPlugin = plugin(({ addVariant }) => addVariant('no-reduce-motion', '.no-reduce-motion &'));
const config: Config = {
content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
@ -109,6 +110,7 @@ const config: Config = {
formsPlugin,
typographyPlugin,
blackVariantPlugin,
reducedMotionPlugin,
],
};