tweb-i2p/src/scss/partials/_peerTyping.scss

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

@use "sass:math";

.peer-typing {
  //display: flex;
  margin-right: 4px;
  
  &-container {
    --color: var(--primary-color);
    color: var(--color);
    //display: inline-block;
    //display: flex;
    //align-items: center;
  }

  /* &-description {
    @include text-overflow();
  } */

  &-flex {
    display: flex;
    align-items: center;
  }

  &:not(.peer-typing-text):not(.peer-typing-choosing-sticker) {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px);
  }

  &-text {
    &-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--color);
      margin: 0 .5px;
      display: inline-block;
      vertical-align: middle;
      animation-duration: .6s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-name: dotMiddle;
    }

    &-dot:first-child {
      animation-name: dotFirst;
    }

    &-dot:last-child {
      animation-name: dotLast;
    }
  }

  &-upload {
    width: 13px;
    height: 5px;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    margin-right: .375rem;
    
    &:before, &:after {
      display: block;
      content: " ";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: var(--color);
      border-radius: inherit;
    }

    &:before {
      opacity: .3;
    }

    &:after {
      animation: upload 1s ease-in-out infinite;
    }
  }

  &-record {
    margin-right: .375rem;

    &:before {
      content: " ";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--color);
      animation: recordBlink 1.25s infinite;
    }
  }

  &-choosing-sticker {
    margin-right: .375rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 16px;

    &-eye {
      width: 8px;
      height: 14px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      border: 1px solid var(--color);
      margin: 0 .0625rem;
      position: relative;
      animation: eye 1.8s ease-in-out infinite;

      &:before {
        content: " ";
        display: block;
        width: .25rem;
        height: .25rem;
        background-color: var(--color);
        border-radius: 50%;
        position: absolute;
        // left: 50%;
        top: 50%;
        // transform: translate(-50%, -50%);
        animation: eye-move 1.8s ease-in-out infinite;
        transform: translate(-1px, -50%);
      }
    }
  }
}

$scale-max: 1;
$scale-step: 1 / 6;
$scale-mid: $scale-max - $scale-step;
$scale-min: $scale-max - ($scale-step * 2);
$opacity-max: 1;
$opacity-step: .1;
$opacity-mid: $opacity-max - $opacity-step;
$opacity-min: $opacity-max - ($opacity-step * 2);
@keyframes dotFirst {
  0% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }
  
  50% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }

  75% {
    transform: scale($scale-max);
    opacity: $opacity-max;
  }

  100% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }
}

@keyframes dotMiddle {
  0% {
    transform: scale($scale-mid);
    opacity: $opacity-mid;
  }

  12.5% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }
  
  62.5% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }

  87.5% {
    transform: scale($scale-max);
    opacity: $opacity-max;
  }

  100% {
    transform: scale($scale-mid);
    opacity: $opacity-mid;
  }
}

@keyframes dotLast {
  0% {
    transform: scale($scale-max);
    opacity: $opacity-max;
  }

  25% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }
  
  75% {
    transform: scale($scale-min);
    opacity: $opacity-min;
  }

  100% {
    transform: scale($scale-max);
    opacity: $opacity-max;
  }
}

@keyframes upload {
  0% {
    transform: translateX(-13px);
  }

  100% {
    transform: translate(13px);
  }
}

@keyframes eye {
  0% {
    transform: scale(1.1) translateX(-.75px);
  }
  
  12.5% {
    transform: scale(1) translateX(0px);
  }

  25% {
    transform: scale(1.1) translateX(.375px);
  }

  50% {
    transform: scale(1.1) translateX(.75px);
  }
  
  62.5% {
    transform: scale(1) translateX(0px);
  }

  75% {
    transform: scale(1.1) translateX(-.375px);
  }

  100% {
    transform: scale(1.1) translateX(-.75px);
  }
}

@keyframes eye-move {
  0% {
    transform: translate(-1px, -50%);
  }

  25% {
    transform: translate(3px, -50%);
  }
  
  50% {
    transform: translate(3px, -50%);
  }

  75% {
    transform: translate(-1px, -50%);
  }
  
  100% {
    transform: translate(-1px, -50%);
  }
}