@spartan-ng/brain 1.0.0 → 1.0.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/hlm-tailwind-preset.css +16 -0
- package/package.json +1 -1
package/hlm-tailwind-preset.css
CHANGED
|
@@ -1,6 +1,22 @@
|
|
|
1
1
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
2
2
|
@import 'tw-animate-css';
|
|
3
3
|
|
|
4
|
+
/* CDK fades the backdrop with its own opacity transition, and the spartan overlay class fades it again
|
|
5
|
+
with a tw-animate keyframe - two fades that visibly double up on iOS (#1555). Neutralize CDK's so the
|
|
6
|
+
spartan keyframe is the sole animator. Kept UNLAYERED so it reliably beats CDK's runtime
|
|
7
|
+
`@layer cdk-overlay` (unlayered wins over any layer; a custom `@layer` here gets dropped by Tailwind).
|
|
8
|
+
The vars let consumers re-enable/tune the CDK fade without `!important`, e.g.
|
|
9
|
+
`:root { --spartan-overlay-backdrop-transition: opacity 200ms ease; }`.
|
|
10
|
+
Note: the spartan keyframe itself doesn't smoothly interpolate on Safari/iOS - upstream tw-animate-css#59
|
|
11
|
+
(the `blur()` in its keyframes) - so on iOS the backdrop appears in one step rather than a smooth fade.
|
|
12
|
+
Tracked upstream; out of scope for this double-fade fix.
|
|
13
|
+
Scoped off `.cdk-overlay-transparent-backdrop` so CDK's invisible click-catcher backdrops (menus,
|
|
14
|
+
popovers) keep their own `opacity: 0` and aren't forced visible. */
|
|
15
|
+
.cdk-overlay-backdrop:not(.cdk-overlay-transparent-backdrop) {
|
|
16
|
+
opacity: var(--spartan-overlay-backdrop-opacity, 1);
|
|
17
|
+
transition: var(--spartan-overlay-backdrop-transition, none);
|
|
18
|
+
}
|
|
19
|
+
|
|
4
20
|
@custom-variant dark (&:is(.dark *));
|
|
5
21
|
|
|
6
22
|
@custom-variant data-open {
|