89 lines
2.4 KiB
SCSS
89 lines
2.4 KiB
SCSS
/* =========================================================== *
|
|
* Type Writer Effect *
|
|
/* =========================================================== */
|
|
|
|
@use 'base';
|
|
|
|
/* ==================
|
|
* Graphical Container
|
|
*/
|
|
@mixin typing-wrapper($prompt-width, $command-width) {
|
|
.typing-wrapper-#{$prompt-width}-#{$command-width} {
|
|
// wrapper shape + center position
|
|
margin: auto auto;
|
|
width: $prompt-width + $command-width + 1ch; // +1 for cursor width
|
|
|
|
// flexbox alignments
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: start;
|
|
text-align: start;
|
|
|
|
border: 0.5ch solid base.$color-txt;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
/* ==================
|
|
* TTY Prompt
|
|
*/
|
|
@mixin typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period) {
|
|
.typing-prompt-#{$prompt-width}-#{$command-width}-#{$typing-duration}-#{$blink-period} {
|
|
width: $prompt-width + $command-width; // ignore cursor (right border)
|
|
border-right: 1ch solid; // cursor
|
|
|
|
// hide what the animation hasn't shown yet
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
// typing animation then start cursor blink
|
|
animation:
|
|
typing $typing-duration steps($command-width),
|
|
cursor-blink $blink-period steps(1, start) $typing-duration infinite alternate;
|
|
}
|
|
}
|
|
|
|
@mixin typing($prompt-width) {
|
|
@keyframes typing-#{$prompt-width} {
|
|
from {
|
|
width: $prompt-width // ignore effect for prompt
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes cursor-blink {
|
|
50% {
|
|
border-color: transparent
|
|
}
|
|
}
|
|
|
|
/* =====================
|
|
* TTY Output
|
|
*/
|
|
@mixin typing-result($typing-duration, $reveal-delay) {
|
|
.typing-result-#{$typing-duration}-#{$reveal-delay} {
|
|
visibility: hidden;
|
|
white-space: pre-wrap; // preserve linebreaks
|
|
|
|
// show result once typing ends + delay
|
|
animation:
|
|
unhide-result 1s ($typing-duration + $reveal-delay) forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes unhide-result {
|
|
to {
|
|
visibility: visible
|
|
}
|
|
}
|
|
|
|
/* =========================
|
|
* Intended Public Interface
|
|
*/
|
|
@mixin tty($prompt-width, $command-width, $typing-duration: 3s, $blink-period: 0.6s, $reveal-delay: 0.8s) {
|
|
@include typing-wrapper($prompt-width, $command-width);
|
|
@include typing-prompt($prompt-width, $command-width, $typing-duration, $blink-period);
|
|
@include typing-result($typing-duration, $reveal-delay);
|
|
}
|