diff --git a/components/lib/inlinemessage/InlineMessage.spec.js b/components/lib/inlinemessage/InlineMessage.spec.js index 568ef3eb4..fff8d0422 100644 --- a/components/lib/inlinemessage/InlineMessage.spec.js +++ b/components/lib/inlinemessage/InlineMessage.spec.js @@ -12,8 +12,8 @@ describe('InlineMessage.vue', () => { } }); - expect(wrapper.find('.p-inline-message.p-component').exists()).toBe(true); - expect(wrapper.find('.p-inline-message.p-component').text()).toBe('Username is required'); - expect(wrapper.find('.p-inline-message-error').exists()).toBe(true); + expect(wrapper.find('.p-inlinemessage.p-component').exists()).toBe(true); + expect(wrapper.find('.p-inlinemessage.p-component').text()).toBe('Username is required'); + expect(wrapper.find('.p-inlinemessage-error').exists()).toBe(true); }); }); diff --git a/components/lib/inlinemessage/style/InlineMessageStyle.d.ts b/components/lib/inlinemessage/style/InlineMessageStyle.d.ts index 4c1523e7a..9a37cf6b9 100644 --- a/components/lib/inlinemessage/style/InlineMessageStyle.d.ts +++ b/components/lib/inlinemessage/style/InlineMessageStyle.d.ts @@ -10,9 +10,9 @@ import { BaseStyle } from '../../base/style'; export enum InlineMessageClasses { - root = 'p-inline-message', - icon = 'p-inline-message-icon', - text = 'p-inline-message-text' + root = 'p-inlinemessage', + icon = 'p-inlinemessage-icon', + text = 'p-inlinemessage-text' } export interface InlineMessageStyle extends BaseStyle {} diff --git a/components/lib/inlinemessage/style/InlineMessageStyle.js b/components/lib/inlinemessage/style/InlineMessageStyle.js index 20b77f748..36cceaf90 100644 --- a/components/lib/inlinemessage/style/InlineMessageStyle.js +++ b/components/lib/inlinemessage/style/InlineMessageStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const theme = ({ dt }) => ` -.p-inline-message { +.p-inlinemessage { display: inline-flex; align-items: center; justify-content: center; @@ -10,97 +10,97 @@ const theme = ({ dt }) => ` gap: ${dt('inlinemessage.gap')}; } -.p-inline-message-text { +.p-inlinemessage-text { font-weight: ${dt('inlinemessage.text.font.weight')}; } -.p-inline-message-icon { +.p-inlinemessage-icon { flex-shrink: 0; font-size: ${dt('inlinemessage.icon.size')}; width: ${dt('inlinemessage.icon.size')}; height: ${dt('inlinemessage.icon.size')}; } -.p-inline-message-icon-only .p-inline-message-text { +.p-inlinemessage-icon-only .p-inlinemessage-text { visibility: hidden; width: 0; } -.p-fluid .p-inline-message { +.p-fluid .p-inlinemessage { display: flex; } -.p-inline-message-info { +.p-inlinemessage-info { background: ${dt('inlinemessage.info.background')}; border: 1px solid ${dt('inlinemessage.info.border.color')}; color: ${dt('inlinemessage.info.color')}; box-shadow: ${dt('inlinemessage.info.shadow')}; } -.p-inline-message-info .p-inline-message-icon { +.p-inlinemessage-info .p-inlinemessage-icon { color: ${dt('inlinemessage.info.color')}; } -.p-inline-message-success { +.p-inlinemessage-success { background: ${dt('inlinemessage.success.background')}; border: 1px solid ${dt('inlinemessage.success.border.color')}; color: ${dt('inlinemessage.success.color')}; box-shadow: ${dt('inlinemessage.success.shadow')}; } -.p-inline-message-success .p-inline-message-icon { +.p-inlinemessage-success .p-inlinemessage-icon { color: ${dt('inlinemessage.success.color')}; } -.p-inline-message-warn { +.p-inlinemessage-warn { background: ${dt('inlinemessage.warn.background')}; border: 1px solid ${dt('inlinemessage.warn.border.color')}; color: ${dt('inlinemessage.warn.color')}; box-shadow: ${dt('inlinemessage.warn.shadow')}; } -.p-inline-message-warn .p-inline-message-icon { +.p-inlinemessage-warn .p-inlinemessage-icon { color: ${dt('inlinemessage.warn.color')}; } -.p-inline-message-error { +.p-inlinemessage-error { background: ${dt('inlinemessage.error.background')}; border: 1px solid ${dt('inlinemessage.error.border.color')}; color: ${dt('inlinemessage.error.color')}; box-shadow: ${dt('inlinemessage.error.shadow')}; } -.p-inline-message-error .p-inline-message-icon { +.p-inlinemessage-error .p-inlinemessage-icon { color: ${dt('inlinemessage.error.color')}; } -.p-inline-message-secondary { +.p-inlinemessage-secondary { background: ${dt('inlinemessage.secondary.background')}; border: 1px solid ${dt('inlinemessage.secondary.border.color')}; color: ${dt('inlinemessage.secondary.color')}; box-shadow: ${dt('inlinemessage.secondary.shadow')}; } -.p-inline-message-secondary .p-inline-message-icon { +.p-inlinemessage-secondary .p-inlinemessage-icon { color: ${dt('inlinemessage.secondary.color')}; } -.p-inline-message-contrast { +.p-inlinemessage-contrast { background: ${dt('inlinemessage.contrast.background')}; border: 1px solid ${dt('inlinemessage.contrast.border.color')}; color: ${dt('inlinemessage.contrast.color')}; box-shadow: ${dt('inlinemessage.contrast.shadow')}; } -.p-inline-message-contrast .p-inline-message-icon { +.p-inlinemessage-contrast .p-inlinemessage-icon { color: ${dt('inlinemessage.contrast.color')}; } `; const classes = { - root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }], - icon: ({ props }) => ['p-inline-message-icon', props.icon], - text: 'p-inline-message-text' + root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }], + icon: ({ props }) => ['p-inlinemessage-icon', props.icon], + text: 'p-inlinemessage-text' }; export default BaseStyle.extend({ diff --git a/components/lib/splitter/Splitter.spec.js b/components/lib/splitter/Splitter.spec.js index d9cd48611..21614c5cf 100644 --- a/components/lib/splitter/Splitter.spec.js +++ b/components/lib/splitter/Splitter.spec.js @@ -28,13 +28,13 @@ describe('Splitter.vue', () => { it('should exist', () => { expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true); expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal'); - expect(wrapper.findAll('.p-splitter-panel').length).toBe(2); + expect(wrapper.findAll('.p-splitterpanel').length).toBe(2); expect(wrapper.find('.p-splitter-gutter-handle').exists()).toBe(true); }); it('should mousedown', async () => { const gutter = wrapper.find('.p-splitter-gutter-handle').element; - const siblings = wrapper.findAll('.p-splitter-panel'); + const siblings = wrapper.findAll('.p-splitterpanel'); await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0); diff --git a/components/lib/splitter/style/SplitterStyle.js b/components/lib/splitter/style/SplitterStyle.js index 90c041eab..235ab14b7 100644 --- a/components/lib/splitter/style/SplitterStyle.js +++ b/components/lib/splitter/style/SplitterStyle.js @@ -65,16 +65,16 @@ const theme = ({ dt }) => ` cursor: row-resize; } -.p-splitter-panel { +.p-splitterpanel { flex-grow: 1; overflow: hidden; } -.p-splitter-panel-nested { +.p-splitterpanel-nested { display: flex; } -.p-splitter-panel .p-splitter { +.p-splitterpanel .p-splitter { flex-grow: 1; border: 0 none; } diff --git a/components/lib/splitterpanel/SplitterPanel.spec.js b/components/lib/splitterpanel/SplitterPanel.spec.js index f756b73e5..8c3610353 100644 --- a/components/lib/splitterpanel/SplitterPanel.spec.js +++ b/components/lib/splitterpanel/SplitterPanel.spec.js @@ -16,8 +16,8 @@ describe('SplitterPanel.vue', () => { }); it('should exist', () => { - expect(wrapper.find('.p-splitter-panel').exists()).toBe(true); - expect(wrapper.attributes().class).toBe('p-splitter-panel flex align-items-center justify-content-center'); - expect(wrapper.find('.p-splitter-panel').text()).toBe('Panel 1'); + expect(wrapper.find('.p-splitterpanel').exists()).toBe(true); + expect(wrapper.attributes().class).toBe('p-splitterpanel flex align-items-center justify-content-center'); + expect(wrapper.find('.p-splitterpanel').text()).toBe('Panel 1'); }); }); diff --git a/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts b/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts index 6b37f7469..ea868b72b 100644 --- a/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts +++ b/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts @@ -10,7 +10,7 @@ import { BaseStyle } from '../../base/style'; export enum SplitterPanelClasses { - root = 'p-splitter-panel' + root = 'p-splitterpanel' } export interface SplitterPanelStyle extends BaseStyle {} diff --git a/components/lib/splitterpanel/style/SplitterPanelStyle.js b/components/lib/splitterpanel/style/SplitterPanelStyle.js index 99c929052..35093b894 100644 --- a/components/lib/splitterpanel/style/SplitterPanelStyle.js +++ b/components/lib/splitterpanel/style/SplitterPanelStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }] + root: ({ instance }) => ['p-splitterpanel', { 'p-splitterpanel-nested': instance.isNested }] }; export default BaseStyle.extend({ diff --git a/components/lib/tabs/style/TabsStyle.d.ts b/components/lib/tabs/style/TabsStyle.d.ts index 6d061bd31..c17c55f62 100644 --- a/components/lib/tabs/style/TabsStyle.d.ts +++ b/components/lib/tabs/style/TabsStyle.d.ts @@ -4,7 +4,7 @@ * * [Live Demo](https://www.primevue.org/tabs/) * - * @module tabs + * @module tabsstyle * */ import { BaseStyle } from '../../base/style'; diff --git a/tailwindcss-primeui/index.js b/tailwindcss-primeui/index.js new file mode 100644 index 000000000..ed36057cd --- /dev/null +++ b/tailwindcss-primeui/index.js @@ -0,0 +1,17 @@ +const plugin = require('tailwindcss/plugin'); + +module.exports = plugin( + (api) => { + require('./utils/backface')(api); + require('./utils/delay')(api); + require('./utils/direction')(api); + require('./utils/duration')(api); + require('./utils/fillMode')(api); + require('./utils/iterationCount')(api); + require('./utils/playState')(api); + require('./utils/timingFunction')(api); + }, + { + theme: require('./theme') + } +); diff --git a/tailwindcss-primeui/theme.js b/tailwindcss-primeui/theme.js new file mode 100644 index 000000000..93409ec03 --- /dev/null +++ b/tailwindcss-primeui/theme.js @@ -0,0 +1,312 @@ +const { transform } = require('typescript'); + +module.exports = { + extend: { + colors: { + primary: 'var(--p-primary-color)', + 'primary-contrast': 'var(--p-primary-contrast-color)', + 'primary-50': 'var(--p-primary-50)', + 'primary-100': 'var(--p-primary-100)', + 'primary-200': 'var(--p-primary-200)', + 'primary-300': 'var(--p-primary-300)', + 'primary-400': 'var(--p-primary-400)', + 'primary-500': 'var(--p-primary-500)', + 'primary-600': 'var(--p-primary-600)', + 'primary-700': 'var(--p-primary-700)', + 'primary-800': 'var(--p-primary-800)', + 'primary-900': 'var(--p-primary-900)', + 'primary-950': 'var(--p-primary-950)', + 'surface-0': 'var(--p-surface-0)', + 'surface-50': 'var(--p-surface-50)', + 'surface-100': 'var(--p-surface-100)', + 'surface-200': 'var(--p-surface-200)', + 'surface-300': 'var(--p-surface-300)', + 'surface-400': 'var(--p-surface-400)', + 'surface-500': 'var(--p-surface-500)', + 'surface-600': 'var(--p-surface-600)', + 'surface-700': 'var(--p-surface-700)', + 'surface-800': 'var(--p-surface-800)', + 'surface-900': 'var(--p-surface-900)', + 'surface-950': 'var(--p-surface-950)' + }, + keyframes: { + fadein: { + '0%': { + opacity: '0' + }, + '100%': { + opacity: '1' + } + }, + fadeout: { + '0%': { + opacity: '1' + }, + '100%': { + opacity: '0' + } + }, + scalein: { + '0%': { + opacity: '0', + transform: 'scaleY(0.8)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'scaleY(1)' + } + }, + slidedown: { + '0%': { + maxHeight: '0' + }, + '100%': { + maxHeight: 'auto' + } + }, + slideup: { + '0%': { + maxHeight: '1000px' + }, + '100%': { + maxHeight: '0' + } + }, + fadeinleft: { + '0%': { + opacity: '0', + transform: 'translateX(-100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateX(0%)' + } + }, + fadeoutleft: { + '0%': { + opacity: '1', + transform: 'translateX(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateX(-100%)' + } + }, + fadeinright: { + '0%': { + opacity: '0', + transform: 'translateX(100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateX(0%)' + } + }, + fadeoutright: { + '0%': { + opacity: '1', + transform: 'translateX(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateX(100%)' + } + }, + fadeinup: { + '0%': { + opacity: '0', + transform: 'translateY(-100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateY(0%)' + } + }, + fadeoutup: { + '0%': { + opacity: '1', + transform: 'translateY(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateY(-100%)' + } + }, + fadeindown: { + '0%': { + opacity: '0', + transform: 'translateY(100%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '1', + transform: 'translateY(0%)' + } + }, + fadeoutdown: { + '0%': { + opacity: '1', + transform: 'translateY(0%)', + transition: 'transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1)' + }, + '100%': { + opacity: '0', + transform: 'translateY(100%)' + } + }, + width: { + '0%': { + width: '0' + }, + '100%': { + width: '100%' + } + }, + flip: { + from: { + transform: 'perspective(2000px) rotateX(-100deg)' + }, + to: { + transform: 'perspective(2000px) rotateX(0)' + } + }, + flipleft: { + from: { + transform: 'perspective(2000px) rotateY(-100deg)', + opacity: '0' + }, + to: { + transform: 'perspective(2000px) rotateY(0)', + opacity: '1' + } + }, + flipright: { + from: { + transform: 'perspective(2000px) rotateY(100deg)', + opacity: '0' + }, + to: { + transform: 'perspective(2000px) rotateY(0)', + opacity: '1' + } + }, + flipup: { + from: { + transform: 'perspective(2000px) rotateX(-100deg)', + opacity: '0' + }, + to: { + transform: 'perspective(2000px) rotateX(0)', + opacity: '1' + } + }, + zoomin: { + from: { + transform: 'scale3d(0.3, 0.3, 0.3)', + opacity: '0' + }, + 50: { + opacity: '1' + } + }, + zoomindown: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)', + opacity: '1' + } + }, + zoominleft: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)', + opacity: '1' + } + }, + zoominright: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)', + opacity: '1' + } + }, + zoominup: { + from: { + transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)', + opacity: '0' + }, + 60: { + transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)', + opacity: '1' + } + } + }, + animation: { + fadein: 'fadein 0.15s linear', + fadeout: 'fadeout 0.15s linear', + slidedown: 'slidedown 0.45s ease-in-out', + slideup: 'slideup 0.45s cubic-bezier(0, 1, 0, 1)', + scalein: 'scalein 0.15s linear', + fadeinleft: 'fadeinleft 0.15s linear', + fadeoutleft: 'fadeoutleft 0.15s linear', + fadeinright: 'fadeinright 0.15s linear', + fadeoutright: 'fadeoutright 0.15s linear', + fadeinup: 'fadeinup 0.15s linear', + fadeoutup: 'fadeoutup 0.15s linear', + fadeindown: 'fadeindown 0.15s linear', + fadeoutdown: 'fadeoutdown 0.15s linear', + width: 'width 0.45s linear', + flip: 'flip 0.15s linear', + flipup: 'flipup 0.15s linear', + flipleft: 'flipleft 0.15s linear', + flipright: 'flipright 0.15s linear', + zoomin: 'zoomin 0.15s linear', + zoomindown: 'zoomindown 0.15s linear', + zoominleft: 'zoominleft 0.15s linear', + zoominright: 'zoominright 0.15s linear', + zoominup: 'zoominup 0.15s linear' + }, + animationDelay: { + 0: '0s', + 75: '75ms', + 100: '100ms', + 150: '150ms', + 200: '200ms', + 300: '300ms', + 400: '400ms', + 500: '500ms', + 700: '700ms', + 1000: '1000ms' + }, + animationDuration: { + 0: '0s', + 75: '75ms', + 100: '100ms', + 150: '150ms', + 200: '200ms', + 300: '300ms', + 400: '400ms', + 500: '500ms', + 700: '700ms', + 1000: '1000ms', + 2000: '2000ms', + 3000: '3000ms' + } + } +}; diff --git a/tailwindcss-primeui/utils/backface.js b/tailwindcss-primeui/utils/backface.js new file mode 100644 index 000000000..5d3c7e57f --- /dev/null +++ b/tailwindcss-primeui/utils/backface.js @@ -0,0 +1,9 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.backface-visible': { + 'backface-visibility': 'visible' + }, + '.backface-hidden': { + 'backface-visibility': 'hidden' + } + }); diff --git a/tailwindcss-primeui/utils/delay.js b/tailwindcss-primeui/utils/delay.js new file mode 100644 index 000000000..79cc6344f --- /dev/null +++ b/tailwindcss-primeui/utils/delay.js @@ -0,0 +1,11 @@ +module.exports = ({ matchUtilities, theme }) => + matchUtilities( + { + 'animate-delay': (value) => ({ + 'animation-delay': value + }) + }, + { + values: theme('animationDelay') + } + ); diff --git a/tailwindcss-primeui/utils/direction.js b/tailwindcss-primeui/utils/direction.js new file mode 100644 index 000000000..5aaeff512 --- /dev/null +++ b/tailwindcss-primeui/utils/direction.js @@ -0,0 +1,15 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-normal': { + 'animation-direction': 'normal' + }, + '.animate-reverse': { + 'animation-direction': 'reverse' + }, + '.animate-alternate': { + 'animation-direction': 'alternate' + }, + '.animate-alternate-reverse': { + 'animation-direction': 'alternate-reverse' + } + }); diff --git a/tailwindcss-primeui/utils/duration.js b/tailwindcss-primeui/utils/duration.js new file mode 100644 index 000000000..c3a152ade --- /dev/null +++ b/tailwindcss-primeui/utils/duration.js @@ -0,0 +1,11 @@ +module.exports = ({ matchUtilities, theme }) => + matchUtilities( + { + 'animate-duration': (value) => ({ + 'animation-duration': value + }) + }, + { + values: theme('animationDuration') + } + ); diff --git a/tailwindcss-primeui/utils/filleMode.js b/tailwindcss-primeui/utils/filleMode.js new file mode 100644 index 000000000..11a66516f --- /dev/null +++ b/tailwindcss-primeui/utils/filleMode.js @@ -0,0 +1,15 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-fill-none': { + 'animation-fill-mode': 'none' + }, + '.animate-fill-forwards': { + 'animation-fill-mode': 'forwards' + }, + '.animate-fill-backwards': { + 'animation-fill-mode': 'backwards' + }, + '.animate-fill-both': { + 'animation-fill-mode': 'both' + } + }); diff --git a/tailwindcss-primeui/utils/iterationCount.js b/tailwindcss-primeui/utils/iterationCount.js new file mode 100644 index 000000000..dadb2eb9a --- /dev/null +++ b/tailwindcss-primeui/utils/iterationCount.js @@ -0,0 +1,12 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-infinite': { + 'animation-iteration-count': 'infinite' + }, + '.animate-once': { + 'animation-iteration-count': '1' + }, + '.animate-twice': { + 'animation-iteration-count': '2' + } + }); diff --git a/tailwindcss-primeui/utils/playState.js b/tailwindcss-primeui/utils/playState.js new file mode 100644 index 000000000..721687d7e --- /dev/null +++ b/tailwindcss-primeui/utils/playState.js @@ -0,0 +1,9 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-running': { + 'animation-play-state': 'running' + }, + '.animate-paused': { + 'animation-play-state': 'paused' + } + }); diff --git a/tailwindcss-primeui/utils/timingFunction.js b/tailwindcss-primeui/utils/timingFunction.js new file mode 100644 index 000000000..b3f3cc429 --- /dev/null +++ b/tailwindcss-primeui/utils/timingFunction.js @@ -0,0 +1,15 @@ +module.exports = ({ addUtilities }) => + addUtilities({ + '.animate-ease-linear': { + 'animation-timing-function': 'linear' + }, + '.animate-ease-in': { + 'animation-timing-function': 'cubic-bezier(0.4, 0, 1, 1)' + }, + '.animate-ease-out': { + 'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)' + }, + '.animate-ease-in-out': { + 'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)' + } + });