mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Add checked variant
This adds a `checked` variant per #1255 to allow styling of checked elements like checkboxes and radios. It is not enabled for anything by default.
This commit is contained in:
parent
63b5cc28f6
commit
c74ff9973f
@ -51,6 +51,27 @@ test('it can generate disabled variants', () => {
|
||||
})
|
||||
})
|
||||
|
||||
test('it can generate checked variants', () => {
|
||||
const input = `
|
||||
@variants checked {
|
||||
.banana { color: yellow; }
|
||||
.chocolate { color: brown; }
|
||||
}
|
||||
`
|
||||
|
||||
const output = `
|
||||
.banana { color: yellow; }
|
||||
.chocolate { color: brown; }
|
||||
.checked\\:banana:checked { color: yellow; }
|
||||
.checked\\:chocolate:checked { color: brown; }
|
||||
`
|
||||
|
||||
return run(input).then(result => {
|
||||
expect(result.css).toMatchCss(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
test('it can generate active variants', () => {
|
||||
const input = `
|
||||
@variants active {
|
||||
|
||||
@ -42,6 +42,7 @@ const defaultVariantGenerators = config => ({
|
||||
active: generatePseudoClassVariant('active'),
|
||||
visited: generatePseudoClassVariant('visited'),
|
||||
disabled: generatePseudoClassVariant('disabled'),
|
||||
checked: generatePseudoClassVariant('checked'),
|
||||
first: generatePseudoClassVariant('first-child', 'first'),
|
||||
last: generatePseudoClassVariant('last-child', 'last'),
|
||||
odd: generatePseudoClassVariant('nth-child(odd)', 'odd'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user