archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Rename transition-duration utilities to duration-{ms}

Browse Source
This commit is contained in:
Adam Wathan 2020-01-08 10:09:00 -05:00
parent 23ba99df04
commit d5199e4075
4 changed files with 119 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
__tests__/fixtures/tailwind-output-important.css
View File

@ -10334,34 +10334,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.transition-fastest {
.duration-75 {
transition-duration: 75ms !important;
}
.transition-faster {
.duration-100 {
transition-duration: 100ms !important;
}
.transition-fast {
.duration-150 {
transition-duration: 150ms !important;
}
.transition-medium {
.duration-200 {
transition-duration: 200ms !important;
}
.transition-slow {
.duration-300 {
transition-duration: 300ms !important;
}
.transition-slower {
.duration-500 {
transition-duration: 500ms !important;
}
.transition-slowest {
.duration-700 {
transition-duration: 700ms !important;
}
.duration-1000 {
transition-duration: 1000ms !important;
}
.example {
font-weight: 700;
color: #f56565;
@ -20097,34 +20101,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.sm\:transition-fastest {
.sm\:duration-75 {
transition-duration: 75ms !important;
}
.sm\:transition-faster {
.sm\:duration-100 {
transition-duration: 100ms !important;
}
.sm\:transition-fast {
.sm\:duration-150 {
transition-duration: 150ms !important;
}
.sm\:transition-medium {
.sm\:duration-200 {
transition-duration: 200ms !important;
}
.sm\:transition-slow {
.sm\:duration-300 {
transition-duration: 300ms !important;
}
.sm\:transition-slower {
.sm\:duration-500 {
transition-duration: 500ms !important;
}
.sm\:transition-slowest {
.sm\:duration-700 {
transition-duration: 700ms !important;
}
.sm\:duration-1000 {
transition-duration: 1000ms !important;
}
.sm\:example {
font-weight: 700;
color: #f56565;
@ -29861,34 +29869,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.md\:transition-fastest {
.md\:duration-75 {
transition-duration: 75ms !important;
}
.md\:transition-faster {
.md\:duration-100 {
transition-duration: 100ms !important;
}
.md\:transition-fast {
.md\:duration-150 {
transition-duration: 150ms !important;
}
.md\:transition-medium {
.md\:duration-200 {
transition-duration: 200ms !important;
}
.md\:transition-slow {
.md\:duration-300 {
transition-duration: 300ms !important;
}
.md\:transition-slower {
.md\:duration-500 {
transition-duration: 500ms !important;
}
.md\:transition-slowest {
.md\:duration-700 {
transition-duration: 700ms !important;
}
.md\:duration-1000 {
transition-duration: 1000ms !important;
}
.md\:example {
font-weight: 700;
color: #f56565;
@ -39625,34 +39637,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.lg\:transition-fastest {
.lg\:duration-75 {
transition-duration: 75ms !important;
}
.lg\:transition-faster {
.lg\:duration-100 {
transition-duration: 100ms !important;
}
.lg\:transition-fast {
.lg\:duration-150 {
transition-duration: 150ms !important;
}
.lg\:transition-medium {
.lg\:duration-200 {
transition-duration: 200ms !important;
}
.lg\:transition-slow {
.lg\:duration-300 {
transition-duration: 300ms !important;
}
.lg\:transition-slower {
.lg\:duration-500 {
transition-duration: 500ms !important;
}
.lg\:transition-slowest {
.lg\:duration-700 {
transition-duration: 700ms !important;
}
.lg\:duration-1000 {
transition-duration: 1000ms !important;
}
.lg\:example {
font-weight: 700;
color: #f56565;
@ -49389,34 +49405,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.xl\:transition-fastest {
.xl\:duration-75 {
transition-duration: 75ms !important;
}
.xl\:transition-faster {
.xl\:duration-100 {
transition-duration: 100ms !important;
}
.xl\:transition-fast {
.xl\:duration-150 {
transition-duration: 150ms !important;
}
.xl\:transition-medium {
.xl\:duration-200 {
transition-duration: 200ms !important;
}
.xl\:transition-slow {
.xl\:duration-300 {
transition-duration: 300ms !important;
}
.xl\:transition-slower {
.xl\:duration-500 {
transition-duration: 500ms !important;
}
.xl\:transition-slowest {
.xl\:duration-700 {
transition-duration: 700ms !important;
}
.xl\:duration-1000 {
transition-duration: 1000ms !important;
}
.xl\:example {
font-weight: 700;
color: #f56565;

90
__tests__/fixtures/tailwind-output.css
View File

@ -10334,34 +10334,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-fastest {
.duration-75 {
transition-duration: 75ms;
}
.transition-faster {
.duration-100 {
transition-duration: 100ms;
}
.transition-fast {
.duration-150 {
transition-duration: 150ms;
}
.transition-medium {
.duration-200 {
transition-duration: 200ms;
}
.transition-slow {
.duration-300 {
transition-duration: 300ms;
}
.transition-slower {
.duration-500 {
transition-duration: 500ms;
}
.transition-slowest {
.duration-700 {
transition-duration: 700ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.example {
font-weight: 700;
color: #f56565;
@ -20097,34 +20101,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.sm\:transition-fastest {
.sm\:duration-75 {
transition-duration: 75ms;
}
.sm\:transition-faster {
.sm\:duration-100 {
transition-duration: 100ms;
}
.sm\:transition-fast {
.sm\:duration-150 {
transition-duration: 150ms;
}
.sm\:transition-medium {
.sm\:duration-200 {
transition-duration: 200ms;
}
.sm\:transition-slow {
.sm\:duration-300 {
transition-duration: 300ms;
}
.sm\:transition-slower {
.sm\:duration-500 {
transition-duration: 500ms;
}
.sm\:transition-slowest {
.sm\:duration-700 {
transition-duration: 700ms;
}
.sm\:duration-1000 {
transition-duration: 1000ms;
}
.sm\:example {
font-weight: 700;
color: #f56565;
@ -29861,34 +29869,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.md\:transition-fastest {
.md\:duration-75 {
transition-duration: 75ms;
}
.md\:transition-faster {
.md\:duration-100 {
transition-duration: 100ms;
}
.md\:transition-fast {
.md\:duration-150 {
transition-duration: 150ms;
}
.md\:transition-medium {
.md\:duration-200 {
transition-duration: 200ms;
}
.md\:transition-slow {
.md\:duration-300 {
transition-duration: 300ms;
}
.md\:transition-slower {
.md\:duration-500 {
transition-duration: 500ms;
}
.md\:transition-slowest {
.md\:duration-700 {
transition-duration: 700ms;
}
.md\:duration-1000 {
transition-duration: 1000ms;
}
.md\:example {
font-weight: 700;
color: #f56565;
@ -39625,34 +39637,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.lg\:transition-fastest {
.lg\:duration-75 {
transition-duration: 75ms;
}
.lg\:transition-faster {
.lg\:duration-100 {
transition-duration: 100ms;
}
.lg\:transition-fast {
.lg\:duration-150 {
transition-duration: 150ms;
}
.lg\:transition-medium {
.lg\:duration-200 {
transition-duration: 200ms;
}
.lg\:transition-slow {
.lg\:duration-300 {
transition-duration: 300ms;
}
.lg\:transition-slower {
.lg\:duration-500 {
transition-duration: 500ms;
}
.lg\:transition-slowest {
.lg\:duration-700 {
transition-duration: 700ms;
}
.lg\:duration-1000 {
transition-duration: 1000ms;
}
.lg\:example {
font-weight: 700;
color: #f56565;
@ -49389,34 +49405,38 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.xl\:transition-fastest {
.xl\:duration-75 {
transition-duration: 75ms;
}
.xl\:transition-faster {
.xl\:duration-100 {
transition-duration: 100ms;
}
.xl\:transition-fast {
.xl\:duration-150 {
transition-duration: 150ms;
}
.xl\:transition-medium {
.xl\:duration-200 {
transition-duration: 200ms;
}
.xl\:transition-slow {
.xl\:duration-300 {
transition-duration: 300ms;
}
.xl\:transition-slower {
.xl\:duration-500 {
transition-duration: 500ms;
}
.xl\:transition-slowest {
.xl\:duration-700 {
transition-duration: 700ms;
}
.xl\:duration-1000 {
transition-duration: 1000ms;
}
.xl\:example {
font-weight: 700;
color: #f56565;

2
src/plugins/transitionDuration.js
View File

@ -1,5 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('transitionDuration', [['transition', ['transitionDuration']]])
return createUtilityPlugin('transitionDuration', [['duration', ['transitionDuration']]])
}

15
stubs/defaultConfig.stub.js
View File

@ -540,13 +540,14 @@ module.exports = {
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
transitionDuration: {
fastest: '75ms',
faster: '100ms',
fast: '150ms',
medium: '200ms',
slow: '300ms',
slower: '500ms',
slowest: '700ms',
'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',
},
},
variants: {