34 lines
676 B
SCSS
34 lines
676 B
SCSS
.root {
|
|
--typing-draft-progress: 0%;
|
|
--typing-draft-spread: 10%;
|
|
|
|
display: inline;
|
|
mask-image:
|
|
linear-gradient(
|
|
to right,
|
|
black var(--typing-draft-progress),
|
|
transparent calc(var(--typing-draft-progress) + var(--typing-draft-spread))
|
|
);
|
|
|
|
&:dir(rtl) {
|
|
mask-image:
|
|
linear-gradient(
|
|
to left,
|
|
black var(--typing-draft-progress),
|
|
transparent calc(var(--typing-draft-progress) + var(--typing-draft-spread))
|
|
);
|
|
}
|
|
}
|
|
|
|
.fullyRevealed {
|
|
--typing-draft-progress: 100%;
|
|
--typing-draft-spread: 0%;
|
|
}
|
|
|
|
.placeholder {
|
|
display: inline-block;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
vertical-align: text-top;
|
|
}
|