mirror of
https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git
synced 2026-04-14 12:44:36 +00:00
Animation Smorgasbord (#15637)
Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>
This commit is contained in:
27
packages/ui/src/components/text-strikethrough.css
Normal file
27
packages/ui/src/components/text-strikethrough.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
* TextStrikethrough — spring-animated strikethrough line
|
||||
*
|
||||
* Draws a line-through from left to right using clip-path on a
|
||||
* transparent-text overlay that carries the text-decoration.
|
||||
* Grid stacking (grid-area: 1/1) layers the overlay on the base text.
|
||||
*
|
||||
* Key trick: -webkit-text-fill-color hides the glyph paint while
|
||||
* keeping `color` (and therefore `currentColor` / text-decoration-color)
|
||||
* set to the real inherited text color.
|
||||
*/
|
||||
|
||||
[data-component="text-strikethrough"] {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
[data-slot="text-strikethrough-line"] {
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-decoration-line: line-through;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-slot="text-strikethrough-line"] {
|
||||
clip-path: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user