mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add negative space utility support
This commit is contained in:
Adam Wathan
parent
8df2cd57a0
commit
b3b06e8d55
@ -834,6 +834,222 @@ video {
|
||||
margin-left: calc(1px * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-1 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-0.25rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-0.25rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-1 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-0.25rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-0.25rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-2 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-0.5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-0.5rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-2 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-0.5rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-0.5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-3 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-0.75rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-0.75rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-3 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-0.75rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-0.75rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-4 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-1rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-1rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-4 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-1rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-1rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-5 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-1.25rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-1.25rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-5 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-1.25rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-1.25rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-6 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-1.5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-1.5rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-6 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-1.5rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-1.5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-8 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-2rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-2rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-8 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-2rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-2rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-10 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-2.5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-2.5rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-10 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-2.5rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-2.5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-12 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-3rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-3rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-12 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-3rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-3rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-16 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-4rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-4rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-16 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-4rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-4rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-20 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-5rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-20 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-5rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-5rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-24 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-6rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-6rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-24 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-6rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-6rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-32 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-8rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-8rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-32 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-8rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-8rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-40 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-10rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-10rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-40 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-10rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-10rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-48 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-12rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-12rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-48 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-12rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-12rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-56 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-14rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-14rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-56 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-14rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-14rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-64 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-16rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-16rem * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-64 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-16rem * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-16rem * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.-space-y-px > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0 !important;
|
||||
margin-top: calc(-1px * calc(1 - var(--space-y-reverse))) !important;
|
||||
margin-bottom: calc(-1px * var(--space-y-reverse)) !important;
|
||||
}
|
||||
|
||||
.-space-x-px > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0 !important;
|
||||
margin-right: calc(-1px * var(--space-y-reverse)) !important;
|
||||
margin-left: calc(-1px * calc(1 - var(--space-y-reverse))) !important;
|
||||
}
|
||||
|
||||
.space-y-reverse > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 1 !important;
|
||||
}
|
||||
|
||||
@ -834,6 +834,222 @@ video {
|
||||
margin-left: calc(1px * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-1 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-0.25rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-0.25rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-1 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-0.25rem * var(--space-y-reverse));
|
||||
margin-left: calc(-0.25rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-2 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-0.5rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-0.5rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-2 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-0.5rem * var(--space-y-reverse));
|
||||
margin-left: calc(-0.5rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-3 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-0.75rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-0.75rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-3 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-0.75rem * var(--space-y-reverse));
|
||||
margin-left: calc(-0.75rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-4 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-1rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-1rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-4 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-1rem * var(--space-y-reverse));
|
||||
margin-left: calc(-1rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-5 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-1.25rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-1.25rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-5 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-1.25rem * var(--space-y-reverse));
|
||||
margin-left: calc(-1.25rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-6 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-1.5rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-1.5rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-6 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-1.5rem * var(--space-y-reverse));
|
||||
margin-left: calc(-1.5rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-8 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-2rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-2rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-8 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-2rem * var(--space-y-reverse));
|
||||
margin-left: calc(-2rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-10 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-2.5rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-2.5rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-10 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-2.5rem * var(--space-y-reverse));
|
||||
margin-left: calc(-2.5rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-12 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-3rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-3rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-12 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-3rem * var(--space-y-reverse));
|
||||
margin-left: calc(-3rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-16 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-4rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-4rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-16 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-4rem * var(--space-y-reverse));
|
||||
margin-left: calc(-4rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-20 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-5rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-5rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-20 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-5rem * var(--space-y-reverse));
|
||||
margin-left: calc(-5rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-24 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-6rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-6rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-24 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-6rem * var(--space-y-reverse));
|
||||
margin-left: calc(-6rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-32 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-8rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-8rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-32 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-8rem * var(--space-y-reverse));
|
||||
margin-left: calc(-8rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-40 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-10rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-10rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-40 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-10rem * var(--space-y-reverse));
|
||||
margin-left: calc(-10rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-48 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-12rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-12rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-48 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-12rem * var(--space-y-reverse));
|
||||
margin-left: calc(-12rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-56 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-14rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-14rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-56 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-14rem * var(--space-y-reverse));
|
||||
margin-left: calc(-14rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-64 > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-16rem * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-16rem * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-64 > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-16rem * var(--space-y-reverse));
|
||||
margin-left: calc(-16rem * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.-space-y-px > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 0;
|
||||
margin-top: calc(-1px * calc(1 - var(--space-y-reverse)));
|
||||
margin-bottom: calc(-1px * var(--space-y-reverse));
|
||||
}
|
||||
|
||||
.-space-x-px > :not(template) ~ :not(template) {
|
||||
--space-x-reverse: 0;
|
||||
margin-right: calc(-1px * var(--space-y-reverse));
|
||||
margin-left: calc(-1px * calc(1 - var(--space-y-reverse)));
|
||||
}
|
||||
|
||||
.space-y-reverse > :not(template) ~ :not(template) {
|
||||
--space-y-reverse: 1;
|
||||
}
|
||||
|
||||
@ -8,6 +8,8 @@ test('generating space utilities', () => {
|
||||
'1': '1px',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'-2': '-2px',
|
||||
'-1': '-1px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
@ -50,6 +52,26 @@ test('generating space utilities', () => {
|
||||
'margin-right': 'calc(4px * var(--space-y-reverse))',
|
||||
'margin-left': 'calc(4px * calc(1 - var(--space-y-reverse)))',
|
||||
},
|
||||
'.-space-y-2 > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(-2px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(-2px * var(--space-y-reverse))',
|
||||
},
|
||||
'.-space-x-2 > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': 'calc(-2px * var(--space-y-reverse))',
|
||||
'margin-left': 'calc(-2px * calc(1 - var(--space-y-reverse)))',
|
||||
},
|
||||
'.-space-y-1 > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': 'calc(-1px * calc(1 - var(--space-y-reverse)))',
|
||||
'margin-bottom': 'calc(-1px * var(--space-y-reverse))',
|
||||
},
|
||||
'.-space-x-1 > :not(template) ~ :not(template)': {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': 'calc(-1px * var(--space-y-reverse))',
|
||||
'margin-left': 'calc(-1px * calc(1 - var(--space-y-reverse)))',
|
||||
},
|
||||
'.space-y-reverse > :not(template) ~ :not(template)': {
|
||||
'--space-y-reverse': '1',
|
||||
},
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import _ from 'lodash'
|
||||
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
|
||||
|
||||
export default function() {
|
||||
return function({ addUtilities, e, theme, variants }) {
|
||||
const generators = [
|
||||
(size, modifier) => ({
|
||||
[`.${e(`space-y-${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
[`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {
|
||||
'--space-y-reverse': '0',
|
||||
'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
|
||||
'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
|
||||
},
|
||||
[`.${e(`space-x-${modifier}`)} > :not(template) ~ :not(template)`]: {
|
||||
[`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: {
|
||||
'--space-x-reverse': '0',
|
||||
'margin-right': `calc(${size} * var(--space-y-reverse))`,
|
||||
'margin-left': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
|
||||
|
||||
@ -376,7 +376,10 @@ module.exports = {
|
||||
},
|
||||
padding: theme => theme('spacing'),
|
||||
placeholderColor: theme => theme('colors'),
|
||||
space: theme => theme('spacing'),
|
||||
space: (theme, { negative }) => ({
|
||||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
}),
|
||||
stroke: {
|
||||
current: 'currentColor',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user