mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #1584 from tailwindcss/stack-divide-utilities
Add `space` and `divide` utilities
This commit is contained in:
Adam Wathan
GitHub
commit
8b2473fade
@ -606,6 +606,574 @@ video {
|
||||
}
|
||||
}
|
||||
|
||||
.space-y-0 > :not(template) ~ :not(template) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.space-x-0 > :not(template) ~ :not(template) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.space-y-1 > :not(template) ~ :not(template) {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
.space-x-1 > :not(template) ~ :not(template) {
|
||||
margin-left: 0.25rem !important;
|
||||
}
|
||||
|
||||
.space-y-2 > :not(template) ~ :not(template) {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.space-x-2 > :not(template) ~ :not(template) {
|
||||
margin-left: 0.5rem !important;
|
||||
}
|
||||
|
||||
.space-y-3 > :not(template) ~ :not(template) {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
|
||||
.space-x-3 > :not(template) ~ :not(template) {
|
||||
margin-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.space-y-4 > :not(template) ~ :not(template) {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.space-x-4 > :not(template) ~ :not(template) {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
|
||||
.space-y-5 > :not(template) ~ :not(template) {
|
||||
margin-top: 1.25rem !important;
|
||||
}
|
||||
|
||||
.space-x-5 > :not(template) ~ :not(template) {
|
||||
margin-left: 1.25rem !important;
|
||||
}
|
||||
|
||||
.space-y-6 > :not(template) ~ :not(template) {
|
||||
margin-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
.space-x-6 > :not(template) ~ :not(template) {
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
|
||||
.space-y-8 > :not(template) ~ :not(template) {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
.space-x-8 > :not(template) ~ :not(template) {
|
||||
margin-left: 2rem !important;
|
||||
}
|
||||
|
||||
.space-y-10 > :not(template) ~ :not(template) {
|
||||
margin-top: 2.5rem !important;
|
||||
}
|
||||
|
||||
.space-x-10 > :not(template) ~ :not(template) {
|
||||
margin-left: 2.5rem !important;
|
||||
}
|
||||
|
||||
.space-y-12 > :not(template) ~ :not(template) {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
|
||||
.space-x-12 > :not(template) ~ :not(template) {
|
||||
margin-left: 3rem !important;
|
||||
}
|
||||
|
||||
.space-y-16 > :not(template) ~ :not(template) {
|
||||
margin-top: 4rem !important;
|
||||
}
|
||||
|
||||
.space-x-16 > :not(template) ~ :not(template) {
|
||||
margin-left: 4rem !important;
|
||||
}
|
||||
|
||||
.space-y-20 > :not(template) ~ :not(template) {
|
||||
margin-top: 5rem !important;
|
||||
}
|
||||
|
||||
.space-x-20 > :not(template) ~ :not(template) {
|
||||
margin-left: 5rem !important;
|
||||
}
|
||||
|
||||
.space-y-24 > :not(template) ~ :not(template) {
|
||||
margin-top: 6rem !important;
|
||||
}
|
||||
|
||||
.space-x-24 > :not(template) ~ :not(template) {
|
||||
margin-left: 6rem !important;
|
||||
}
|
||||
|
||||
.space-y-32 > :not(template) ~ :not(template) {
|
||||
margin-top: 8rem !important;
|
||||
}
|
||||
|
||||
.space-x-32 > :not(template) ~ :not(template) {
|
||||
margin-left: 8rem !important;
|
||||
}
|
||||
|
||||
.space-y-40 > :not(template) ~ :not(template) {
|
||||
margin-top: 10rem !important;
|
||||
}
|
||||
|
||||
.space-x-40 > :not(template) ~ :not(template) {
|
||||
margin-left: 10rem !important;
|
||||
}
|
||||
|
||||
.space-y-48 > :not(template) ~ :not(template) {
|
||||
margin-top: 12rem !important;
|
||||
}
|
||||
|
||||
.space-x-48 > :not(template) ~ :not(template) {
|
||||
margin-left: 12rem !important;
|
||||
}
|
||||
|
||||
.space-y-56 > :not(template) ~ :not(template) {
|
||||
margin-top: 14rem !important;
|
||||
}
|
||||
|
||||
.space-x-56 > :not(template) ~ :not(template) {
|
||||
margin-left: 14rem !important;
|
||||
}
|
||||
|
||||
.space-y-64 > :not(template) ~ :not(template) {
|
||||
margin-top: 16rem !important;
|
||||
}
|
||||
|
||||
.space-x-64 > :not(template) ~ :not(template) {
|
||||
margin-left: 16rem !important;
|
||||
}
|
||||
|
||||
.space-y-px > :not(template) ~ :not(template) {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
.space-x-px > :not(template) ~ :not(template) {
|
||||
margin-left: 1px !important;
|
||||
}
|
||||
|
||||
.divide-y-0 > :not(template) ~ :not(template) {
|
||||
border-top-width: 0 !important;
|
||||
}
|
||||
|
||||
.divide-x-0 > :not(template) ~ :not(template) {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
|
||||
.divide-y-2 > :not(template) ~ :not(template) {
|
||||
border-top-width: 2px !important;
|
||||
}
|
||||
|
||||
.divide-x-2 > :not(template) ~ :not(template) {
|
||||
border-left-width: 2px !important;
|
||||
}
|
||||
|
||||
.divide-y-4 > :not(template) ~ :not(template) {
|
||||
border-top-width: 4px !important;
|
||||
}
|
||||
|
||||
.divide-x-4 > :not(template) ~ :not(template) {
|
||||
border-left-width: 4px !important;
|
||||
}
|
||||
|
||||
.divide-y-8 > :not(template) ~ :not(template) {
|
||||
border-top-width: 8px !important;
|
||||
}
|
||||
|
||||
.divide-x-8 > :not(template) ~ :not(template) {
|
||||
border-left-width: 8px !important;
|
||||
}
|
||||
|
||||
.divide-y > :not(template) ~ :not(template) {
|
||||
border-top-width: 1px !important;
|
||||
}
|
||||
|
||||
.divide-x > :not(template) ~ :not(template) {
|
||||
border-left-width: 1px !important;
|
||||
}
|
||||
|
||||
.divide-transparent > :not(template) ~ :not(template) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.divide-current > :not(template) ~ :not(template) {
|
||||
border-color: currentColor !important;
|
||||
}
|
||||
|
||||
.divide-black > :not(template) ~ :not(template) {
|
||||
border-color: #000 !important;
|
||||
}
|
||||
|
||||
.divide-white > :not(template) ~ :not(template) {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
.divide-gray-100 > :not(template) ~ :not(template) {
|
||||
border-color: #f7fafc !important;
|
||||
}
|
||||
|
||||
.divide-gray-200 > :not(template) ~ :not(template) {
|
||||
border-color: #edf2f7 !important;
|
||||
}
|
||||
|
||||
.divide-gray-300 > :not(template) ~ :not(template) {
|
||||
border-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.divide-gray-400 > :not(template) ~ :not(template) {
|
||||
border-color: #cbd5e0 !important;
|
||||
}
|
||||
|
||||
.divide-gray-500 > :not(template) ~ :not(template) {
|
||||
border-color: #a0aec0 !important;
|
||||
}
|
||||
|
||||
.divide-gray-600 > :not(template) ~ :not(template) {
|
||||
border-color: #718096 !important;
|
||||
}
|
||||
|
||||
.divide-gray-700 > :not(template) ~ :not(template) {
|
||||
border-color: #4a5568 !important;
|
||||
}
|
||||
|
||||
.divide-gray-800 > :not(template) ~ :not(template) {
|
||||
border-color: #2d3748 !important;
|
||||
}
|
||||
|
||||
.divide-gray-900 > :not(template) ~ :not(template) {
|
||||
border-color: #1a202c !important;
|
||||
}
|
||||
|
||||
.divide-red-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fff5f5 !important;
|
||||
}
|
||||
|
||||
.divide-red-200 > :not(template) ~ :not(template) {
|
||||
border-color: #fed7d7 !important;
|
||||
}
|
||||
|
||||
.divide-red-300 > :not(template) ~ :not(template) {
|
||||
border-color: #feb2b2 !important;
|
||||
}
|
||||
|
||||
.divide-red-400 > :not(template) ~ :not(template) {
|
||||
border-color: #fc8181 !important;
|
||||
}
|
||||
|
||||
.divide-red-500 > :not(template) ~ :not(template) {
|
||||
border-color: #f56565 !important;
|
||||
}
|
||||
|
||||
.divide-red-600 > :not(template) ~ :not(template) {
|
||||
border-color: #e53e3e !important;
|
||||
}
|
||||
|
||||
.divide-red-700 > :not(template) ~ :not(template) {
|
||||
border-color: #c53030 !important;
|
||||
}
|
||||
|
||||
.divide-red-800 > :not(template) ~ :not(template) {
|
||||
border-color: #9b2c2c !important;
|
||||
}
|
||||
|
||||
.divide-red-900 > :not(template) ~ :not(template) {
|
||||
border-color: #742a2a !important;
|
||||
}
|
||||
|
||||
.divide-orange-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fffaf0 !important;
|
||||
}
|
||||
|
||||
.divide-orange-200 > :not(template) ~ :not(template) {
|
||||
border-color: #feebc8 !important;
|
||||
}
|
||||
|
||||
.divide-orange-300 > :not(template) ~ :not(template) {
|
||||
border-color: #fbd38d !important;
|
||||
}
|
||||
|
||||
.divide-orange-400 > :not(template) ~ :not(template) {
|
||||
border-color: #f6ad55 !important;
|
||||
}
|
||||
|
||||
.divide-orange-500 > :not(template) ~ :not(template) {
|
||||
border-color: #ed8936 !important;
|
||||
}
|
||||
|
||||
.divide-orange-600 > :not(template) ~ :not(template) {
|
||||
border-color: #dd6b20 !important;
|
||||
}
|
||||
|
||||
.divide-orange-700 > :not(template) ~ :not(template) {
|
||||
border-color: #c05621 !important;
|
||||
}
|
||||
|
||||
.divide-orange-800 > :not(template) ~ :not(template) {
|
||||
border-color: #9c4221 !important;
|
||||
}
|
||||
|
||||
.divide-orange-900 > :not(template) ~ :not(template) {
|
||||
border-color: #7b341e !important;
|
||||
}
|
||||
|
||||
.divide-yellow-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fffff0 !important;
|
||||
}
|
||||
|
||||
.divide-yellow-200 > :not(template) ~ :not(template) {
|
||||
border-color: #fefcbf !important;
|
||||
}
|
||||
|
||||
.divide-yellow-300 > :not(template) ~ :not(template) {
|
||||
border-color: #faf089 !important;
|
||||
}
|
||||
|
||||
.divide-yellow-400 > :not(template) ~ :not(template) {
|
||||
border-color: #f6e05e !important;
|
||||
}
|
||||
|
||||
.divide-yellow-500 > :not(template) ~ :not(template) {
|
||||
border-color: #ecc94b !important;
|
||||
}
|
||||
|
||||
.divide-yellow-600 > :not(template) ~ :not(template) {
|
||||
border-color: #d69e2e !important;
|
||||
}
|
||||
|
||||
.divide-yellow-700 > :not(template) ~ :not(template) {
|
||||
border-color: #b7791f !important;
|
||||
}
|
||||
|
||||
.divide-yellow-800 > :not(template) ~ :not(template) {
|
||||
border-color: #975a16 !important;
|
||||
}
|
||||
|
||||
.divide-yellow-900 > :not(template) ~ :not(template) {
|
||||
border-color: #744210 !important;
|
||||
}
|
||||
|
||||
.divide-green-100 > :not(template) ~ :not(template) {
|
||||
border-color: #f0fff4 !important;
|
||||
}
|
||||
|
||||
.divide-green-200 > :not(template) ~ :not(template) {
|
||||
border-color: #c6f6d5 !important;
|
||||
}
|
||||
|
||||
.divide-green-300 > :not(template) ~ :not(template) {
|
||||
border-color: #9ae6b4 !important;
|
||||
}
|
||||
|
||||
.divide-green-400 > :not(template) ~ :not(template) {
|
||||
border-color: #68d391 !important;
|
||||
}
|
||||
|
||||
.divide-green-500 > :not(template) ~ :not(template) {
|
||||
border-color: #48bb78 !important;
|
||||
}
|
||||
|
||||
.divide-green-600 > :not(template) ~ :not(template) {
|
||||
border-color: #38a169 !important;
|
||||
}
|
||||
|
||||
.divide-green-700 > :not(template) ~ :not(template) {
|
||||
border-color: #2f855a !important;
|
||||
}
|
||||
|
||||
.divide-green-800 > :not(template) ~ :not(template) {
|
||||
border-color: #276749 !important;
|
||||
}
|
||||
|
||||
.divide-green-900 > :not(template) ~ :not(template) {
|
||||
border-color: #22543d !important;
|
||||
}
|
||||
|
||||
.divide-teal-100 > :not(template) ~ :not(template) {
|
||||
border-color: #e6fffa !important;
|
||||
}
|
||||
|
||||
.divide-teal-200 > :not(template) ~ :not(template) {
|
||||
border-color: #b2f5ea !important;
|
||||
}
|
||||
|
||||
.divide-teal-300 > :not(template) ~ :not(template) {
|
||||
border-color: #81e6d9 !important;
|
||||
}
|
||||
|
||||
.divide-teal-400 > :not(template) ~ :not(template) {
|
||||
border-color: #4fd1c5 !important;
|
||||
}
|
||||
|
||||
.divide-teal-500 > :not(template) ~ :not(template) {
|
||||
border-color: #38b2ac !important;
|
||||
}
|
||||
|
||||
.divide-teal-600 > :not(template) ~ :not(template) {
|
||||
border-color: #319795 !important;
|
||||
}
|
||||
|
||||
.divide-teal-700 > :not(template) ~ :not(template) {
|
||||
border-color: #2c7a7b !important;
|
||||
}
|
||||
|
||||
.divide-teal-800 > :not(template) ~ :not(template) {
|
||||
border-color: #285e61 !important;
|
||||
}
|
||||
|
||||
.divide-teal-900 > :not(template) ~ :not(template) {
|
||||
border-color: #234e52 !important;
|
||||
}
|
||||
|
||||
.divide-blue-100 > :not(template) ~ :not(template) {
|
||||
border-color: #ebf8ff !important;
|
||||
}
|
||||
|
||||
.divide-blue-200 > :not(template) ~ :not(template) {
|
||||
border-color: #bee3f8 !important;
|
||||
}
|
||||
|
||||
.divide-blue-300 > :not(template) ~ :not(template) {
|
||||
border-color: #90cdf4 !important;
|
||||
}
|
||||
|
||||
.divide-blue-400 > :not(template) ~ :not(template) {
|
||||
border-color: #63b3ed !important;
|
||||
}
|
||||
|
||||
.divide-blue-500 > :not(template) ~ :not(template) {
|
||||
border-color: #4299e1 !important;
|
||||
}
|
||||
|
||||
.divide-blue-600 > :not(template) ~ :not(template) {
|
||||
border-color: #3182ce !important;
|
||||
}
|
||||
|
||||
.divide-blue-700 > :not(template) ~ :not(template) {
|
||||
border-color: #2b6cb0 !important;
|
||||
}
|
||||
|
||||
.divide-blue-800 > :not(template) ~ :not(template) {
|
||||
border-color: #2c5282 !important;
|
||||
}
|
||||
|
||||
.divide-blue-900 > :not(template) ~ :not(template) {
|
||||
border-color: #2a4365 !important;
|
||||
}
|
||||
|
||||
.divide-indigo-100 > :not(template) ~ :not(template) {
|
||||
border-color: #ebf4ff !important;
|
||||
}
|
||||
|
||||
.divide-indigo-200 > :not(template) ~ :not(template) {
|
||||
border-color: #c3dafe !important;
|
||||
}
|
||||
|
||||
.divide-indigo-300 > :not(template) ~ :not(template) {
|
||||
border-color: #a3bffa !important;
|
||||
}
|
||||
|
||||
.divide-indigo-400 > :not(template) ~ :not(template) {
|
||||
border-color: #7f9cf5 !important;
|
||||
}
|
||||
|
||||
.divide-indigo-500 > :not(template) ~ :not(template) {
|
||||
border-color: #667eea !important;
|
||||
}
|
||||
|
||||
.divide-indigo-600 > :not(template) ~ :not(template) {
|
||||
border-color: #5a67d8 !important;
|
||||
}
|
||||
|
||||
.divide-indigo-700 > :not(template) ~ :not(template) {
|
||||
border-color: #4c51bf !important;
|
||||
}
|
||||
|
||||
.divide-indigo-800 > :not(template) ~ :not(template) {
|
||||
border-color: #434190 !important;
|
||||
}
|
||||
|
||||
.divide-indigo-900 > :not(template) ~ :not(template) {
|
||||
border-color: #3c366b !important;
|
||||
}
|
||||
|
||||
.divide-purple-100 > :not(template) ~ :not(template) {
|
||||
border-color: #faf5ff !important;
|
||||
}
|
||||
|
||||
.divide-purple-200 > :not(template) ~ :not(template) {
|
||||
border-color: #e9d8fd !important;
|
||||
}
|
||||
|
||||
.divide-purple-300 > :not(template) ~ :not(template) {
|
||||
border-color: #d6bcfa !important;
|
||||
}
|
||||
|
||||
.divide-purple-400 > :not(template) ~ :not(template) {
|
||||
border-color: #b794f4 !important;
|
||||
}
|
||||
|
||||
.divide-purple-500 > :not(template) ~ :not(template) {
|
||||
border-color: #9f7aea !important;
|
||||
}
|
||||
|
||||
.divide-purple-600 > :not(template) ~ :not(template) {
|
||||
border-color: #805ad5 !important;
|
||||
}
|
||||
|
||||
.divide-purple-700 > :not(template) ~ :not(template) {
|
||||
border-color: #6b46c1 !important;
|
||||
}
|
||||
|
||||
.divide-purple-800 > :not(template) ~ :not(template) {
|
||||
border-color: #553c9a !important;
|
||||
}
|
||||
|
||||
.divide-purple-900 > :not(template) ~ :not(template) {
|
||||
border-color: #44337a !important;
|
||||
}
|
||||
|
||||
.divide-pink-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fff5f7 !important;
|
||||
}
|
||||
|
||||
.divide-pink-200 > :not(template) ~ :not(template) {
|
||||
border-color: #fed7e2 !important;
|
||||
}
|
||||
|
||||
.divide-pink-300 > :not(template) ~ :not(template) {
|
||||
border-color: #fbb6ce !important;
|
||||
}
|
||||
|
||||
.divide-pink-400 > :not(template) ~ :not(template) {
|
||||
border-color: #f687b3 !important;
|
||||
}
|
||||
|
||||
.divide-pink-500 > :not(template) ~ :not(template) {
|
||||
border-color: #ed64a6 !important;
|
||||
}
|
||||
|
||||
.divide-pink-600 > :not(template) ~ :not(template) {
|
||||
border-color: #d53f8c !important;
|
||||
}
|
||||
|
||||
.divide-pink-700 > :not(template) ~ :not(template) {
|
||||
border-color: #b83280 !important;
|
||||
}
|
||||
|
||||
.divide-pink-800 > :not(template) ~ :not(template) {
|
||||
border-color: #97266d !important;
|
||||
}
|
||||
|
||||
.divide-pink-900 > :not(template) ~ :not(template) {
|
||||
border-color: #702459 !important;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
|
||||
@ -606,6 +606,574 @@ video {
|
||||
}
|
||||
}
|
||||
|
||||
.space-y-0 > :not(template) ~ :not(template) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.space-x-0 > :not(template) ~ :not(template) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.space-y-1 > :not(template) ~ :not(template) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.space-x-1 > :not(template) ~ :not(template) {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.space-y-2 > :not(template) ~ :not(template) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.space-x-2 > :not(template) ~ :not(template) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.space-y-3 > :not(template) ~ :not(template) {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.space-x-3 > :not(template) ~ :not(template) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.space-y-4 > :not(template) ~ :not(template) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.space-x-4 > :not(template) ~ :not(template) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.space-y-5 > :not(template) ~ :not(template) {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.space-x-5 > :not(template) ~ :not(template) {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.space-y-6 > :not(template) ~ :not(template) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.space-x-6 > :not(template) ~ :not(template) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.space-y-8 > :not(template) ~ :not(template) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.space-x-8 > :not(template) ~ :not(template) {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.space-y-10 > :not(template) ~ :not(template) {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.space-x-10 > :not(template) ~ :not(template) {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.space-y-12 > :not(template) ~ :not(template) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.space-x-12 > :not(template) ~ :not(template) {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.space-y-16 > :not(template) ~ :not(template) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.space-x-16 > :not(template) ~ :not(template) {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.space-y-20 > :not(template) ~ :not(template) {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.space-x-20 > :not(template) ~ :not(template) {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
.space-y-24 > :not(template) ~ :not(template) {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.space-x-24 > :not(template) ~ :not(template) {
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
.space-y-32 > :not(template) ~ :not(template) {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
.space-x-32 > :not(template) ~ :not(template) {
|
||||
margin-left: 8rem;
|
||||
}
|
||||
|
||||
.space-y-40 > :not(template) ~ :not(template) {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
|
||||
.space-x-40 > :not(template) ~ :not(template) {
|
||||
margin-left: 10rem;
|
||||
}
|
||||
|
||||
.space-y-48 > :not(template) ~ :not(template) {
|
||||
margin-top: 12rem;
|
||||
}
|
||||
|
||||
.space-x-48 > :not(template) ~ :not(template) {
|
||||
margin-left: 12rem;
|
||||
}
|
||||
|
||||
.space-y-56 > :not(template) ~ :not(template) {
|
||||
margin-top: 14rem;
|
||||
}
|
||||
|
||||
.space-x-56 > :not(template) ~ :not(template) {
|
||||
margin-left: 14rem;
|
||||
}
|
||||
|
||||
.space-y-64 > :not(template) ~ :not(template) {
|
||||
margin-top: 16rem;
|
||||
}
|
||||
|
||||
.space-x-64 > :not(template) ~ :not(template) {
|
||||
margin-left: 16rem;
|
||||
}
|
||||
|
||||
.space-y-px > :not(template) ~ :not(template) {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.space-x-px > :not(template) ~ :not(template) {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.divide-y-0 > :not(template) ~ :not(template) {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.divide-x-0 > :not(template) ~ :not(template) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.divide-y-2 > :not(template) ~ :not(template) {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.divide-x-2 > :not(template) ~ :not(template) {
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
.divide-y-4 > :not(template) ~ :not(template) {
|
||||
border-top-width: 4px;
|
||||
}
|
||||
|
||||
.divide-x-4 > :not(template) ~ :not(template) {
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.divide-y-8 > :not(template) ~ :not(template) {
|
||||
border-top-width: 8px;
|
||||
}
|
||||
|
||||
.divide-x-8 > :not(template) ~ :not(template) {
|
||||
border-left-width: 8px;
|
||||
}
|
||||
|
||||
.divide-y > :not(template) ~ :not(template) {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.divide-x > :not(template) ~ :not(template) {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.divide-transparent > :not(template) ~ :not(template) {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.divide-current > :not(template) ~ :not(template) {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.divide-black > :not(template) ~ :not(template) {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.divide-white > :not(template) ~ :not(template) {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.divide-gray-100 > :not(template) ~ :not(template) {
|
||||
border-color: #f7fafc;
|
||||
}
|
||||
|
||||
.divide-gray-200 > :not(template) ~ :not(template) {
|
||||
border-color: #edf2f7;
|
||||
}
|
||||
|
||||
.divide-gray-300 > :not(template) ~ :not(template) {
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.divide-gray-400 > :not(template) ~ :not(template) {
|
||||
border-color: #cbd5e0;
|
||||
}
|
||||
|
||||
.divide-gray-500 > :not(template) ~ :not(template) {
|
||||
border-color: #a0aec0;
|
||||
}
|
||||
|
||||
.divide-gray-600 > :not(template) ~ :not(template) {
|
||||
border-color: #718096;
|
||||
}
|
||||
|
||||
.divide-gray-700 > :not(template) ~ :not(template) {
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
.divide-gray-800 > :not(template) ~ :not(template) {
|
||||
border-color: #2d3748;
|
||||
}
|
||||
|
||||
.divide-gray-900 > :not(template) ~ :not(template) {
|
||||
border-color: #1a202c;
|
||||
}
|
||||
|
||||
.divide-red-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fff5f5;
|
||||
}
|
||||
|
||||
.divide-red-200 > :not(template) ~ :not(template) {
|
||||
border-color: #fed7d7;
|
||||
}
|
||||
|
||||
.divide-red-300 > :not(template) ~ :not(template) {
|
||||
border-color: #feb2b2;
|
||||
}
|
||||
|
||||
.divide-red-400 > :not(template) ~ :not(template) {
|
||||
border-color: #fc8181;
|
||||
}
|
||||
|
||||
.divide-red-500 > :not(template) ~ :not(template) {
|
||||
border-color: #f56565;
|
||||
}
|
||||
|
||||
.divide-red-600 > :not(template) ~ :not(template) {
|
||||
border-color: #e53e3e;
|
||||
}
|
||||
|
||||
.divide-red-700 > :not(template) ~ :not(template) {
|
||||
border-color: #c53030;
|
||||
}
|
||||
|
||||
.divide-red-800 > :not(template) ~ :not(template) {
|
||||
border-color: #9b2c2c;
|
||||
}
|
||||
|
||||
.divide-red-900 > :not(template) ~ :not(template) {
|
||||
border-color: #742a2a;
|
||||
}
|
||||
|
||||
.divide-orange-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fffaf0;
|
||||
}
|
||||
|
||||
.divide-orange-200 > :not(template) ~ :not(template) {
|
||||
border-color: #feebc8;
|
||||
}
|
||||
|
||||
.divide-orange-300 > :not(template) ~ :not(template) {
|
||||
border-color: #fbd38d;
|
||||
}
|
||||
|
||||
.divide-orange-400 > :not(template) ~ :not(template) {
|
||||
border-color: #f6ad55;
|
||||
}
|
||||
|
||||
.divide-orange-500 > :not(template) ~ :not(template) {
|
||||
border-color: #ed8936;
|
||||
}
|
||||
|
||||
.divide-orange-600 > :not(template) ~ :not(template) {
|
||||
border-color: #dd6b20;
|
||||
}
|
||||
|
||||
.divide-orange-700 > :not(template) ~ :not(template) {
|
||||
border-color: #c05621;
|
||||
}
|
||||
|
||||
.divide-orange-800 > :not(template) ~ :not(template) {
|
||||
border-color: #9c4221;
|
||||
}
|
||||
|
||||
.divide-orange-900 > :not(template) ~ :not(template) {
|
||||
border-color: #7b341e;
|
||||
}
|
||||
|
||||
.divide-yellow-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fffff0;
|
||||
}
|
||||
|
||||
.divide-yellow-200 > :not(template) ~ :not(template) {
|
||||
border-color: #fefcbf;
|
||||
}
|
||||
|
||||
.divide-yellow-300 > :not(template) ~ :not(template) {
|
||||
border-color: #faf089;
|
||||
}
|
||||
|
||||
.divide-yellow-400 > :not(template) ~ :not(template) {
|
||||
border-color: #f6e05e;
|
||||
}
|
||||
|
||||
.divide-yellow-500 > :not(template) ~ :not(template) {
|
||||
border-color: #ecc94b;
|
||||
}
|
||||
|
||||
.divide-yellow-600 > :not(template) ~ :not(template) {
|
||||
border-color: #d69e2e;
|
||||
}
|
||||
|
||||
.divide-yellow-700 > :not(template) ~ :not(template) {
|
||||
border-color: #b7791f;
|
||||
}
|
||||
|
||||
.divide-yellow-800 > :not(template) ~ :not(template) {
|
||||
border-color: #975a16;
|
||||
}
|
||||
|
||||
.divide-yellow-900 > :not(template) ~ :not(template) {
|
||||
border-color: #744210;
|
||||
}
|
||||
|
||||
.divide-green-100 > :not(template) ~ :not(template) {
|
||||
border-color: #f0fff4;
|
||||
}
|
||||
|
||||
.divide-green-200 > :not(template) ~ :not(template) {
|
||||
border-color: #c6f6d5;
|
||||
}
|
||||
|
||||
.divide-green-300 > :not(template) ~ :not(template) {
|
||||
border-color: #9ae6b4;
|
||||
}
|
||||
|
||||
.divide-green-400 > :not(template) ~ :not(template) {
|
||||
border-color: #68d391;
|
||||
}
|
||||
|
||||
.divide-green-500 > :not(template) ~ :not(template) {
|
||||
border-color: #48bb78;
|
||||
}
|
||||
|
||||
.divide-green-600 > :not(template) ~ :not(template) {
|
||||
border-color: #38a169;
|
||||
}
|
||||
|
||||
.divide-green-700 > :not(template) ~ :not(template) {
|
||||
border-color: #2f855a;
|
||||
}
|
||||
|
||||
.divide-green-800 > :not(template) ~ :not(template) {
|
||||
border-color: #276749;
|
||||
}
|
||||
|
||||
.divide-green-900 > :not(template) ~ :not(template) {
|
||||
border-color: #22543d;
|
||||
}
|
||||
|
||||
.divide-teal-100 > :not(template) ~ :not(template) {
|
||||
border-color: #e6fffa;
|
||||
}
|
||||
|
||||
.divide-teal-200 > :not(template) ~ :not(template) {
|
||||
border-color: #b2f5ea;
|
||||
}
|
||||
|
||||
.divide-teal-300 > :not(template) ~ :not(template) {
|
||||
border-color: #81e6d9;
|
||||
}
|
||||
|
||||
.divide-teal-400 > :not(template) ~ :not(template) {
|
||||
border-color: #4fd1c5;
|
||||
}
|
||||
|
||||
.divide-teal-500 > :not(template) ~ :not(template) {
|
||||
border-color: #38b2ac;
|
||||
}
|
||||
|
||||
.divide-teal-600 > :not(template) ~ :not(template) {
|
||||
border-color: #319795;
|
||||
}
|
||||
|
||||
.divide-teal-700 > :not(template) ~ :not(template) {
|
||||
border-color: #2c7a7b;
|
||||
}
|
||||
|
||||
.divide-teal-800 > :not(template) ~ :not(template) {
|
||||
border-color: #285e61;
|
||||
}
|
||||
|
||||
.divide-teal-900 > :not(template) ~ :not(template) {
|
||||
border-color: #234e52;
|
||||
}
|
||||
|
||||
.divide-blue-100 > :not(template) ~ :not(template) {
|
||||
border-color: #ebf8ff;
|
||||
}
|
||||
|
||||
.divide-blue-200 > :not(template) ~ :not(template) {
|
||||
border-color: #bee3f8;
|
||||
}
|
||||
|
||||
.divide-blue-300 > :not(template) ~ :not(template) {
|
||||
border-color: #90cdf4;
|
||||
}
|
||||
|
||||
.divide-blue-400 > :not(template) ~ :not(template) {
|
||||
border-color: #63b3ed;
|
||||
}
|
||||
|
||||
.divide-blue-500 > :not(template) ~ :not(template) {
|
||||
border-color: #4299e1;
|
||||
}
|
||||
|
||||
.divide-blue-600 > :not(template) ~ :not(template) {
|
||||
border-color: #3182ce;
|
||||
}
|
||||
|
||||
.divide-blue-700 > :not(template) ~ :not(template) {
|
||||
border-color: #2b6cb0;
|
||||
}
|
||||
|
||||
.divide-blue-800 > :not(template) ~ :not(template) {
|
||||
border-color: #2c5282;
|
||||
}
|
||||
|
||||
.divide-blue-900 > :not(template) ~ :not(template) {
|
||||
border-color: #2a4365;
|
||||
}
|
||||
|
||||
.divide-indigo-100 > :not(template) ~ :not(template) {
|
||||
border-color: #ebf4ff;
|
||||
}
|
||||
|
||||
.divide-indigo-200 > :not(template) ~ :not(template) {
|
||||
border-color: #c3dafe;
|
||||
}
|
||||
|
||||
.divide-indigo-300 > :not(template) ~ :not(template) {
|
||||
border-color: #a3bffa;
|
||||
}
|
||||
|
||||
.divide-indigo-400 > :not(template) ~ :not(template) {
|
||||
border-color: #7f9cf5;
|
||||
}
|
||||
|
||||
.divide-indigo-500 > :not(template) ~ :not(template) {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.divide-indigo-600 > :not(template) ~ :not(template) {
|
||||
border-color: #5a67d8;
|
||||
}
|
||||
|
||||
.divide-indigo-700 > :not(template) ~ :not(template) {
|
||||
border-color: #4c51bf;
|
||||
}
|
||||
|
||||
.divide-indigo-800 > :not(template) ~ :not(template) {
|
||||
border-color: #434190;
|
||||
}
|
||||
|
||||
.divide-indigo-900 > :not(template) ~ :not(template) {
|
||||
border-color: #3c366b;
|
||||
}
|
||||
|
||||
.divide-purple-100 > :not(template) ~ :not(template) {
|
||||
border-color: #faf5ff;
|
||||
}
|
||||
|
||||
.divide-purple-200 > :not(template) ~ :not(template) {
|
||||
border-color: #e9d8fd;
|
||||
}
|
||||
|
||||
.divide-purple-300 > :not(template) ~ :not(template) {
|
||||
border-color: #d6bcfa;
|
||||
}
|
||||
|
||||
.divide-purple-400 > :not(template) ~ :not(template) {
|
||||
border-color: #b794f4;
|
||||
}
|
||||
|
||||
.divide-purple-500 > :not(template) ~ :not(template) {
|
||||
border-color: #9f7aea;
|
||||
}
|
||||
|
||||
.divide-purple-600 > :not(template) ~ :not(template) {
|
||||
border-color: #805ad5;
|
||||
}
|
||||
|
||||
.divide-purple-700 > :not(template) ~ :not(template) {
|
||||
border-color: #6b46c1;
|
||||
}
|
||||
|
||||
.divide-purple-800 > :not(template) ~ :not(template) {
|
||||
border-color: #553c9a;
|
||||
}
|
||||
|
||||
.divide-purple-900 > :not(template) ~ :not(template) {
|
||||
border-color: #44337a;
|
||||
}
|
||||
|
||||
.divide-pink-100 > :not(template) ~ :not(template) {
|
||||
border-color: #fff5f7;
|
||||
}
|
||||
|
||||
.divide-pink-200 > :not(template) ~ :not(template) {
|
||||
border-color: #fed7e2;
|
||||
}
|
||||
|
||||
.divide-pink-300 > :not(template) ~ :not(template) {
|
||||
border-color: #fbb6ce;
|
||||
}
|
||||
|
||||
.divide-pink-400 > :not(template) ~ :not(template) {
|
||||
border-color: #f687b3;
|
||||
}
|
||||
|
||||
.divide-pink-500 > :not(template) ~ :not(template) {
|
||||
border-color: #ed64a6;
|
||||
}
|
||||
|
||||
.divide-pink-600 > :not(template) ~ :not(template) {
|
||||
border-color: #d53f8c;
|
||||
}
|
||||
|
||||
.divide-pink-700 > :not(template) ~ :not(template) {
|
||||
border-color: #b83280;
|
||||
}
|
||||
|
||||
.divide-pink-800 > :not(template) ~ :not(template) {
|
||||
border-color: #97266d;
|
||||
}
|
||||
|
||||
.divide-pink-900 > :not(template) ~ :not(template) {
|
||||
border-color: #702459;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
|
||||
89
__tests__/plugins/divideColor.test.js
Normal file
89
__tests__/plugins/divideColor.test.js
Normal file
@ -0,0 +1,89 @@
|
||||
import invokePlugin from '../util/invokePlugin'
|
||||
import plugin from '../../src/plugins/divideColor'
|
||||
|
||||
test('generating divide color utilities', () => {
|
||||
const config = {
|
||||
theme: {
|
||||
divideColor: {
|
||||
default: 'orange', // This should be ignored
|
||||
purple: 'purple',
|
||||
white: {
|
||||
25: 'rgba(255,255,255,.25)',
|
||||
50: 'rgba(255,255,255,.5)',
|
||||
75: 'rgba(255,255,255,.75)',
|
||||
default: '#fff',
|
||||
},
|
||||
red: {
|
||||
1: 'rgb(33,0,0)',
|
||||
2: 'rgb(67,0,0)',
|
||||
3: 'rgb(100,0,0)',
|
||||
},
|
||||
green: {
|
||||
1: 'rgb(0,33,0)',
|
||||
2: 'rgb(0,67,0)',
|
||||
3: 'rgb(0,100,0)',
|
||||
},
|
||||
blue: {
|
||||
1: 'rgb(0,0,33)',
|
||||
2: 'rgb(0,0,67)',
|
||||
3: 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
divideColor: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const { utilities } = invokePlugin(plugin(), config)
|
||||
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.divide-purple > :not(template) ~ :not(template)': {
|
||||
'border-color': 'purple',
|
||||
},
|
||||
'.divide-white-25 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgba(255,255,255,.25)',
|
||||
},
|
||||
'.divide-white-50 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgba(255,255,255,.5)',
|
||||
},
|
||||
'.divide-white-75 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgba(255,255,255,.75)',
|
||||
},
|
||||
'.divide-white > :not(template) ~ :not(template)': {
|
||||
'border-color': '#fff',
|
||||
},
|
||||
'.divide-red-1 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(33,0,0)',
|
||||
},
|
||||
'.divide-red-2 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(67,0,0)',
|
||||
},
|
||||
'.divide-red-3 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(100,0,0)',
|
||||
},
|
||||
'.divide-green-1 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,33,0)',
|
||||
},
|
||||
'.divide-green-2 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,67,0)',
|
||||
},
|
||||
'.divide-green-3 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,100,0)',
|
||||
},
|
||||
'.divide-blue-1 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,0,33)',
|
||||
},
|
||||
'.divide-blue-2 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,0,67)',
|
||||
},
|
||||
'.divide-blue-3 > :not(template) ~ :not(template)': {
|
||||
'border-color': 'rgb(0,0,100)',
|
||||
},
|
||||
},
|
||||
['responsive'],
|
||||
],
|
||||
])
|
||||
})
|
||||
36
__tests__/plugins/divideWidth.test.js
Normal file
36
__tests__/plugins/divideWidth.test.js
Normal file
@ -0,0 +1,36 @@
|
||||
import invokePlugin from '../util/invokePlugin'
|
||||
import plugin from '../../src/plugins/divideWidth'
|
||||
|
||||
test('generating divide width utilities', () => {
|
||||
const config = {
|
||||
theme: {
|
||||
divideWidth: {
|
||||
default: '1px',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
divideWidth: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const { utilities } = invokePlugin(plugin(), config)
|
||||
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.divide-y-2 > :not(template) ~ :not(template)': { 'border-top-width': '2px' },
|
||||
'.divide-x-2 > :not(template) ~ :not(template)': { 'border-left-width': '2px' },
|
||||
'.divide-y-4 > :not(template) ~ :not(template)': { 'border-top-width': '4px' },
|
||||
'.divide-x-4 > :not(template) ~ :not(template)': { 'border-left-width': '4px' },
|
||||
'.divide-y-8 > :not(template) ~ :not(template)': { 'border-top-width': '8px' },
|
||||
'.divide-x-8 > :not(template) ~ :not(template)': { 'border-left-width': '8px' },
|
||||
'.divide-y > :not(template) ~ :not(template)': { 'border-top-width': '1px' },
|
||||
'.divide-x > :not(template) ~ :not(template)': { 'border-left-width': '1px' },
|
||||
},
|
||||
['responsive'],
|
||||
],
|
||||
])
|
||||
})
|
||||
36
__tests__/plugins/space.test.js
Normal file
36
__tests__/plugins/space.test.js
Normal file
@ -0,0 +1,36 @@
|
||||
import invokePlugin from '../util/invokePlugin'
|
||||
import plugin from '../../src/plugins/space'
|
||||
|
||||
test('generating space utilities', () => {
|
||||
const config = {
|
||||
theme: {
|
||||
space: {
|
||||
'1': '1px',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
space: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const { utilities } = invokePlugin(plugin(), config)
|
||||
|
||||
expect(utilities).toEqual([
|
||||
[
|
||||
{
|
||||
'.space-y-1 > :not(template) ~ :not(template)': { 'margin-top': '1px' },
|
||||
'.space-x-1 > :not(template) ~ :not(template)': { 'margin-left': '1px' },
|
||||
'.space-y-2 > :not(template) ~ :not(template)': { 'margin-top': '2px' },
|
||||
'.space-x-2 > :not(template) ~ :not(template)': { 'margin-left': '2px' },
|
||||
'.space-y-4 > :not(template) ~ :not(template)': { 'margin-top': '4px' },
|
||||
'.space-x-4 > :not(template) ~ :not(template)': { 'margin-left': '4px' },
|
||||
'.space-y-8 > :not(template) ~ :not(template)': { 'margin-top': '8px' },
|
||||
'.space-x-8 > :not(template) ~ :not(template)': { 'margin-left': '8px' },
|
||||
},
|
||||
['responsive'],
|
||||
],
|
||||
])
|
||||
})
|
||||
@ -24,6 +24,9 @@ export default function(plugin, config) {
|
||||
plugin(pluginApi)
|
||||
|
||||
return {
|
||||
utilities: addedUtilities,
|
||||
utilities: addedUtilities.map(([utilities, variants]) => [
|
||||
_.merge({}, ..._.castArray(utilities)),
|
||||
variants,
|
||||
]),
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import preflight from './plugins/preflight'
|
||||
import container from './plugins/container'
|
||||
import space from './plugins/space'
|
||||
import divideWidth from './plugins/divideWidth'
|
||||
import divideColor from './plugins/divideColor'
|
||||
import accessibility from './plugins/accessibility'
|
||||
import appearance from './plugins/appearance'
|
||||
import backgroundAttachment from './plugins/backgroundAttachment'
|
||||
@ -96,6 +99,9 @@ export default function({ corePlugins: corePluginConfig }) {
|
||||
return configurePlugins(corePluginConfig, {
|
||||
preflight,
|
||||
container,
|
||||
space,
|
||||
divideWidth,
|
||||
divideColor,
|
||||
accessibility,
|
||||
appearance,
|
||||
backgroundAttachment,
|
||||
|
||||
21
src/plugins/divideColor.js
Normal file
21
src/plugins/divideColor.js
Normal file
@ -0,0 +1,21 @@
|
||||
import _ from 'lodash'
|
||||
import flattenColorPalette from '../util/flattenColorPalette'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
const colors = flattenColorPalette(theme('divideColor'))
|
||||
|
||||
const utilities = _.fromPairs(
|
||||
_.map(_.omit(colors, 'default'), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
|
||||
{
|
||||
'border-color': value,
|
||||
},
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
addUtilities(utilities, variants('divideColor'))
|
||||
}
|
||||
}
|
||||
24
src/plugins/divideWidth.js
Normal file
24
src/plugins/divideWidth.js
Normal file
@ -0,0 +1,24 @@
|
||||
import _ from 'lodash'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
const generators = [
|
||||
(value, modifier) => ({
|
||||
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'border-top-width': `${value}`,
|
||||
},
|
||||
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'border-left-width': `${value}`,
|
||||
},
|
||||
}),
|
||||
]
|
||||
|
||||
const utilities = _.flatMap(generators, generator => {
|
||||
return _.flatMap(theme('divideWidth'), (value, modifier) => {
|
||||
return generator(value, modifier === 'default' ? '' : `-${modifier}`)
|
||||
})
|
||||
})
|
||||
|
||||
addUtilities(utilities, variants('divideWidth'))
|
||||
}
|
||||
}
|
||||
22
src/plugins/space.js
Normal file
22
src/plugins/space.js
Normal file
@ -0,0 +1,22 @@
|
||||
import _ from 'lodash'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
const generators = [
|
||||
(size, modifier) => ({
|
||||
[`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'margin-top': `${size}`,
|
||||
},
|
||||
[`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
'margin-left': `${size}`,
|
||||
},
|
||||
}),
|
||||
]
|
||||
|
||||
const utilities = _.flatMap(generators, generator => {
|
||||
return _.flatMap(theme('space'), generator)
|
||||
})
|
||||
|
||||
addUtilities(utilities, variants('space'))
|
||||
}
|
||||
}
|
||||
@ -206,6 +206,8 @@ module.exports = {
|
||||
move: 'move',
|
||||
'not-allowed': 'not-allowed',
|
||||
},
|
||||
divideColor: theme => theme('borderColor'),
|
||||
divideWidth: theme => theme('borderWidth'),
|
||||
fill: {
|
||||
current: 'currentColor',
|
||||
},
|
||||
@ -374,6 +376,7 @@ module.exports = {
|
||||
},
|
||||
padding: theme => theme('spacing'),
|
||||
placeholderColor: theme => theme('colors'),
|
||||
space: theme => theme('spacing'),
|
||||
stroke: {
|
||||
current: 'currentColor',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user