2
0

Fab.module.scss 935 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. @use '@growi/core/scss/bootstrap/init' as bs;
  2. .grw-fab :global {
  3. position: fixed;
  4. right: 1.5rem;
  5. bottom: 3rem;
  6. z-index: bs.$zindex-fixed;
  7. transition: all 200ms linear;
  8. .btn-create-page {
  9. width: 60px;
  10. height: 60px;
  11. font-size: 24px;
  12. box-shadow: 2px 3px 6px #0000005d;
  13. svg {
  14. width: 28px;
  15. height: 28px;
  16. }
  17. }
  18. .btn-scroll-to-top {
  19. width: 40px;
  20. height: 40px;
  21. opacity: 0.4;
  22. svg {
  23. width: 18px;
  24. height: 18px;
  25. }
  26. }
  27. // workaround
  28. // https://stackoverflow.com/a/57667536
  29. .fadeInUp {
  30. & :local {
  31. animation: fab-fadeinup 0.5s ease 0s;
  32. }
  33. }
  34. .fadeOut {
  35. & :local {
  36. animation: fab-fadeout 0.5s ease 0s forwards;
  37. }
  38. }
  39. }
  40. @keyframes fab-fadeinup {
  41. 0% {
  42. opacity: 0;
  43. transform: translateY(100px);
  44. }
  45. 100% {
  46. opacity: 1;
  47. transform: translateY(0px);
  48. }
  49. }
  50. @keyframes fab-fadeout {
  51. 100% {
  52. opacity: 0
  53. }
  54. }