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

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

.rp {
  position: relative;
  user-select: none;
}

.rp-overflow, 
.btn-menu-toggle.rp, 
.menu-horizontal-div-item.rp, 
.btn-corner.rp,
.pinned-container-wrapper.rp
/* , html.is-safari .c-ripple */ {
  .c-ripple {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;

    &__circle {
      overflow: hidden;
    }
  }
}

/**
 * Utility: Ripple
 * --------------------------------------------------
 */
.c-ripple {
  --ripple-duration: .7s;
  //display: none !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  // ! with these rules ripple lags
  /* width: 100%;
  height: 100%; */
  //overflow: hidden;
  /* background: transparent;
  border-radius: inherit; */

  html.is-safari &:not(:empty) {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
    border-radius: inherit;
  }

  &__circle {
    // opacity: .08;
    background-color: var(--ripple-color);
    display: block;
    position: absolute;
    transform: scale(0);
    border-radius: 50%;
    animation: ripple-effect .7s forwards;
    //animation-timing-function: ease-out;
    transition: .35s opacity, .35s background-color;
    //overflow: hidden;
    pointer-events: none;

    .btn-menu &, 
    .c-ripple.is-square & {
      animation-name: ripple-effect-handhelds;
      //animation-timing-function: ease-out;
      animation-duration: .2s;
      transition-duration: .1s;
      //border-radius: 15%;
    }

    /* @include respond-to(handhelds) {
      animation-duration: .2s;
      transition-duration: .1s;
      //border-radius: 15%;
    } */
  }

  .btn-menu &, 
  &.is-square {
    --ripple-duration: .2s;
  }

  &__circle.hiding, 
  &__square.hiding {
    opacity: 0;
  }
}

@include respond-to(until-floating-left-sidebar) {
  .chatlist-container ul li > .rp {
    .c-ripple {
      --ripple-duration: .2s;

      &__circle {
        animation-name: ripple-effect-handhelds;
        //animation-timing-function: ease-out;
        animation-duration: .2s;
        transition-duration: .1s;
      }
    }
  }
}

@keyframes ripple-effect {
  0% {
    transform: scale(0);
  }

  to {
    transform: scale(2);
  }
}

@keyframes ripple-effect-handhelds {
  0% {
    //transform: scale(.85);
    transform: scale(.27);
  }

  to {
    transform: scale(2);
  }
}