weseek__growi/apps/app/src/components/Fab.module.scss

@use '@growi/core/scss/bootstrap/init' as bs;

.grw-fab :global {
  position: fixed;
  right: 1.5rem;
  bottom: 3rem;
  z-index: bs.$zindex-fixed;

  transition: all 200ms linear;

  .btn-create-page {
    width: 60px;
    height: 60px;
    font-size: 24px;

    box-shadow: 2px 3px 6px #0000005d;
    svg {
      width: 28px;
      height: 28px;
    }
  }

  .btn-scroll-to-top {
    width: 40px;
    height: 40px;

    opacity: 0.4;
    svg {
      width: 18px;
      height: 18px;
    }
  }

  // workaround
  // https://stackoverflow.com/a/57667536
  .fadeInUp {
    & :local {
      animation: fab-fadeinup 0.5s ease 0s;
    }
  }
  .fadeOut {
    & :local {
      animation: fab-fadeout 0.5s ease 0s forwards;
    }
  }
}

@keyframes fab-fadeinup {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fab-fadeout {
  100% {
    opacity: 0
  }
}