87 lines
3 KiB
JavaScript
87 lines
3 KiB
JavaScript
|
import { css, quickPluginTest } from '../util/run'
|
||
|
|
|
||
|
|
quickPluginTest('boxShadow', {
|
||
|
|
safelist: [
|
||
|
|
// Arbitrary values
|
||
|
|
'shadow-[0_1px_2px_#0088cc]',
|
||
|
|
],
|
||
|
|
}).toMatchFormattedCss(css`
|
||
|
|
*,
|
||
|
|
:before,
|
||
|
|
:after {
|
||
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||
|
|
--tw-ring-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow-colored: 0 0 #0000;
|
||
|
|
}
|
||
|
|
::-webkit-backdrop {
|
||
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||
|
|
--tw-ring-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow-colored: 0 0 #0000;
|
||
|
|
}
|
||
|
|
::backdrop {
|
||
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
||
|
|
--tw-ring-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow-colored: 0 0 #0000;
|
||
|
|
}
|
||
|
|
.shadow {
|
||
|
|
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
|
||
|
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
.shadow-2xl {
|
||
|
|
--tw-shadow: 0 25px 50px -12px #00000040;
|
||
|
|
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
.shadow-\[0_1px_2px_\#0088cc\] {
|
||
|
|
--tw-shadow: 0 1px 2px #08c;
|
||
|
|
--tw-shadow-colored: 0 1px 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);
|
||
|
|
}
|
||
|
|
.shadow-inner {
|
||
|
|
--tw-shadow: inset 0 2px 4px 0 #0000000d;
|
||
|
|
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
.shadow-lg {
|
||
|
|
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
|
||
|
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
|
||
|
|
0 4px 6px -4px var(--tw-shadow-color);
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
.shadow-md {
|
||
|
|
--tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
|
||
|
|
--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);
|
||
|
|
}
|
||
|
|
.shadow-none {
|
||
|
|
--tw-shadow: 0 0 #0000;
|
||
|
|
--tw-shadow-colored: 0 0 #0000;
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
.shadow-sm {
|
||
|
|
--tw-shadow: 0 1px 2px 0 #0000000d;
|
||
|
|
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
.shadow-xl {
|
||
|
|
--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
|
||
|
|
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
|
||
|
|
0 8px 10px -6px var(--tw-shadow-color);
|
||
|
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||
|
|
var(--tw-shadow);
|
||
|
|
}
|
||
|
|
`)
|