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:
Geoff Selby 2019-12-27 10:11:04 -06:00
parent 63b5cc28f6
commit c74ff9973f
2 changed files with 22 additions and 0 deletions

View File

@ -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 {

View File

@ -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'),