Merge branch 'v4' of https://github.com/primefaces/primevue into v4
commit
0f826239d5
|
@ -12,8 +12,8 @@ describe('InlineMessage.vue', () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(wrapper.find('.p-inline-message.p-component').exists()).toBe(true);
|
expect(wrapper.find('.p-inlinemessage.p-component').exists()).toBe(true);
|
||||||
expect(wrapper.find('.p-inline-message.p-component').text()).toBe('Username is required');
|
expect(wrapper.find('.p-inlinemessage.p-component').text()).toBe('Username is required');
|
||||||
expect(wrapper.find('.p-inline-message-error').exists()).toBe(true);
|
expect(wrapper.find('.p-inlinemessage-error').exists()).toBe(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
import { BaseStyle } from '../../base/style';
|
import { BaseStyle } from '../../base/style';
|
||||||
|
|
||||||
export enum InlineMessageClasses {
|
export enum InlineMessageClasses {
|
||||||
root = 'p-inline-message',
|
root = 'p-inlinemessage',
|
||||||
icon = 'p-inline-message-icon',
|
icon = 'p-inlinemessage-icon',
|
||||||
text = 'p-inline-message-text'
|
text = 'p-inlinemessage-text'
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface InlineMessageStyle extends BaseStyle {}
|
export interface InlineMessageStyle extends BaseStyle {}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const theme = ({ dt }) => `
|
const theme = ({ dt }) => `
|
||||||
.p-inline-message {
|
.p-inlinemessage {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -10,97 +10,97 @@ const theme = ({ dt }) => `
|
||||||
gap: ${dt('inlinemessage.gap')};
|
gap: ${dt('inlinemessage.gap')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-text {
|
.p-inlinemessage-text {
|
||||||
font-weight: ${dt('inlinemessage.text.font.weight')};
|
font-weight: ${dt('inlinemessage.text.font.weight')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-icon {
|
.p-inlinemessage-icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: ${dt('inlinemessage.icon.size')};
|
font-size: ${dt('inlinemessage.icon.size')};
|
||||||
width: ${dt('inlinemessage.icon.size')};
|
width: ${dt('inlinemessage.icon.size')};
|
||||||
height: ${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;
|
visibility: hidden;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-fluid .p-inline-message {
|
.p-fluid .p-inlinemessage {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-info {
|
.p-inlinemessage-info {
|
||||||
background: ${dt('inlinemessage.info.background')};
|
background: ${dt('inlinemessage.info.background')};
|
||||||
border: 1px solid ${dt('inlinemessage.info.border.color')};
|
border: 1px solid ${dt('inlinemessage.info.border.color')};
|
||||||
color: ${dt('inlinemessage.info.color')};
|
color: ${dt('inlinemessage.info.color')};
|
||||||
box-shadow: ${dt('inlinemessage.info.shadow')};
|
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')};
|
color: ${dt('inlinemessage.info.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-success {
|
.p-inlinemessage-success {
|
||||||
background: ${dt('inlinemessage.success.background')};
|
background: ${dt('inlinemessage.success.background')};
|
||||||
border: 1px solid ${dt('inlinemessage.success.border.color')};
|
border: 1px solid ${dt('inlinemessage.success.border.color')};
|
||||||
color: ${dt('inlinemessage.success.color')};
|
color: ${dt('inlinemessage.success.color')};
|
||||||
box-shadow: ${dt('inlinemessage.success.shadow')};
|
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')};
|
color: ${dt('inlinemessage.success.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-warn {
|
.p-inlinemessage-warn {
|
||||||
background: ${dt('inlinemessage.warn.background')};
|
background: ${dt('inlinemessage.warn.background')};
|
||||||
border: 1px solid ${dt('inlinemessage.warn.border.color')};
|
border: 1px solid ${dt('inlinemessage.warn.border.color')};
|
||||||
color: ${dt('inlinemessage.warn.color')};
|
color: ${dt('inlinemessage.warn.color')};
|
||||||
box-shadow: ${dt('inlinemessage.warn.shadow')};
|
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')};
|
color: ${dt('inlinemessage.warn.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-error {
|
.p-inlinemessage-error {
|
||||||
background: ${dt('inlinemessage.error.background')};
|
background: ${dt('inlinemessage.error.background')};
|
||||||
border: 1px solid ${dt('inlinemessage.error.border.color')};
|
border: 1px solid ${dt('inlinemessage.error.border.color')};
|
||||||
color: ${dt('inlinemessage.error.color')};
|
color: ${dt('inlinemessage.error.color')};
|
||||||
box-shadow: ${dt('inlinemessage.error.shadow')};
|
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')};
|
color: ${dt('inlinemessage.error.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-secondary {
|
.p-inlinemessage-secondary {
|
||||||
background: ${dt('inlinemessage.secondary.background')};
|
background: ${dt('inlinemessage.secondary.background')};
|
||||||
border: 1px solid ${dt('inlinemessage.secondary.border.color')};
|
border: 1px solid ${dt('inlinemessage.secondary.border.color')};
|
||||||
color: ${dt('inlinemessage.secondary.color')};
|
color: ${dt('inlinemessage.secondary.color')};
|
||||||
box-shadow: ${dt('inlinemessage.secondary.shadow')};
|
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')};
|
color: ${dt('inlinemessage.secondary.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inline-message-contrast {
|
.p-inlinemessage-contrast {
|
||||||
background: ${dt('inlinemessage.contrast.background')};
|
background: ${dt('inlinemessage.contrast.background')};
|
||||||
border: 1px solid ${dt('inlinemessage.contrast.border.color')};
|
border: 1px solid ${dt('inlinemessage.contrast.border.color')};
|
||||||
color: ${dt('inlinemessage.contrast.color')};
|
color: ${dt('inlinemessage.contrast.color')};
|
||||||
box-shadow: ${dt('inlinemessage.contrast.shadow')};
|
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')};
|
color: ${dt('inlinemessage.contrast.color')};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const classes = {
|
const classes = {
|
||||||
root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
|
root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }],
|
||||||
icon: ({ props }) => ['p-inline-message-icon', props.icon],
|
icon: ({ props }) => ['p-inlinemessage-icon', props.icon],
|
||||||
text: 'p-inline-message-text'
|
text: 'p-inlinemessage-text'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
|
|
|
@ -28,13 +28,13 @@ describe('Splitter.vue', () => {
|
||||||
it('should exist', () => {
|
it('should exist', () => {
|
||||||
expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true);
|
expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true);
|
||||||
expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal');
|
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);
|
expect(wrapper.find('.p-splitter-gutter-handle').exists()).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should mousedown', async () => {
|
it('should mousedown', async () => {
|
||||||
const gutter = wrapper.find('.p-splitter-gutter-handle').element;
|
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);
|
await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);
|
||||||
|
|
||||||
|
|
|
@ -65,16 +65,16 @@ const theme = ({ dt }) => `
|
||||||
cursor: row-resize;
|
cursor: row-resize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-splitter-panel {
|
.p-splitterpanel {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-splitter-panel-nested {
|
.p-splitterpanel-nested {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-splitter-panel .p-splitter {
|
.p-splitterpanel .p-splitter {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,8 +16,8 @@ describe('SplitterPanel.vue', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should exist', () => {
|
it('should exist', () => {
|
||||||
expect(wrapper.find('.p-splitter-panel').exists()).toBe(true);
|
expect(wrapper.find('.p-splitterpanel').exists()).toBe(true);
|
||||||
expect(wrapper.attributes().class).toBe('p-splitter-panel flex align-items-center justify-content-center');
|
expect(wrapper.attributes().class).toBe('p-splitterpanel flex align-items-center justify-content-center');
|
||||||
expect(wrapper.find('.p-splitter-panel').text()).toBe('Panel 1');
|
expect(wrapper.find('.p-splitterpanel').text()).toBe('Panel 1');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
import { BaseStyle } from '../../base/style';
|
import { BaseStyle } from '../../base/style';
|
||||||
|
|
||||||
export enum SplitterPanelClasses {
|
export enum SplitterPanelClasses {
|
||||||
root = 'p-splitter-panel'
|
root = 'p-splitterpanel'
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SplitterPanelStyle extends BaseStyle {}
|
export interface SplitterPanelStyle extends BaseStyle {}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import BaseStyle from 'primevue/base/style';
|
import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const classes = {
|
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({
|
export default BaseStyle.extend({
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* [Live Demo](https://www.primevue.org/tabs/)
|
* [Live Demo](https://www.primevue.org/tabs/)
|
||||||
*
|
*
|
||||||
* @module tabs
|
* @module tabsstyle
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import { BaseStyle } from '../../base/style';
|
import { BaseStyle } from '../../base/style';
|
||||||
|
|
|
@ -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')
|
||||||
|
}
|
||||||
|
);
|
|
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
|
@ -0,0 +1,9 @@
|
||||||
|
module.exports = ({ addUtilities }) =>
|
||||||
|
addUtilities({
|
||||||
|
'.backface-visible': {
|
||||||
|
'backface-visibility': 'visible'
|
||||||
|
},
|
||||||
|
'.backface-hidden': {
|
||||||
|
'backface-visibility': 'hidden'
|
||||||
|
}
|
||||||
|
});
|
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = ({ matchUtilities, theme }) =>
|
||||||
|
matchUtilities(
|
||||||
|
{
|
||||||
|
'animate-delay': (value) => ({
|
||||||
|
'animation-delay': value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
values: theme('animationDelay')
|
||||||
|
}
|
||||||
|
);
|
|
@ -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'
|
||||||
|
}
|
||||||
|
});
|
|
@ -0,0 +1,11 @@
|
||||||
|
module.exports = ({ matchUtilities, theme }) =>
|
||||||
|
matchUtilities(
|
||||||
|
{
|
||||||
|
'animate-duration': (value) => ({
|
||||||
|
'animation-duration': value
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
values: theme('animationDuration')
|
||||||
|
}
|
||||||
|
);
|
|
@ -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'
|
||||||
|
}
|
||||||
|
});
|
|
@ -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'
|
||||||
|
}
|
||||||
|
});
|
|
@ -0,0 +1,9 @@
|
||||||
|
module.exports = ({ addUtilities }) =>
|
||||||
|
addUtilities({
|
||||||
|
'.animate-running': {
|
||||||
|
'animation-play-state': 'running'
|
||||||
|
},
|
||||||
|
'.animate-paused': {
|
||||||
|
'animation-play-state': 'paused'
|
||||||
|
}
|
||||||
|
});
|
|
@ -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)'
|
||||||
|
}
|
||||||
|
});
|
Loading…
Reference in New Issue