wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add backdrop variant (#7924)

Browse source 
* Update corePlugins.js

* Update variants.test.html

* Update variants.test.css
This commit is contained in:
seb-jean 2022-03-25 20:42:27 +01:00 • committed by GitHub
parent b2dd6ffa42
commit 79f018c16b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/corePlugins.js
View file

@ -26,6 +26,8 @@ export let variantPlugins = {
addVariant('file', '&::file-selector-button')
addVariant('placeholder', '&::placeholder')
addVariant('backdrop', '&::backdrop')
addVariant('before', ({ container }) => {
container.walkRules((rule) => {

6
tests/variants.test.css
View file

@ -261,6 +261,12 @@
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.backdrop\:shadow-md::backdrop {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
.focus-within\:shadow-md:focus-within {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

1
tests/variants.test.html
View file

@ -39,6 +39,7 @@
<div class="out-of-range:shadow-md"></div>
<div class="read-only:shadow-md"></div>
<div class="empty:shadow-md"></div>
<dialog class="backdrop:shadow-md"></dialog>
<!-- Pseudo-element variants -->
<div class="first-letter:text-2xl first-letter:text-red-500"></div>