_tapTarget.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. .tap-target-wrapper {
  2. width: 800px;
  3. height: 800px;
  4. position: fixed;
  5. z-index: 1000;
  6. visibility: hidden;
  7. transition: visibility 0s .3s;
  8. }
  9. .tap-target-wrapper.open {
  10. visibility: visible;
  11. transition: visibility 0s;
  12. .tap-target {
  13. transform: scale(1);
  14. opacity: .95;
  15. transition:
  16. transform .3s cubic-bezier(.42,0,.58,1),
  17. opacity .3s cubic-bezier(.42,0,.58,1);
  18. }
  19. .tap-target-wave::before {
  20. transform: scale(1);
  21. }
  22. .tap-target-wave::after {
  23. visibility: visible;
  24. animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  25. transition:
  26. opacity .3s,
  27. transform .3s,
  28. visibility 0s 1s;
  29. }
  30. }
  31. .tap-target {
  32. position: absolute;
  33. font-size: 1rem;
  34. border-radius: 50%;
  35. background-color: $primary-color;
  36. box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
  37. width: 100%;
  38. height: 100%;
  39. opacity: 0;
  40. transform: scale(0);
  41. transition:
  42. transform .3s cubic-bezier(.42,0,.58,1),
  43. opacity .3s cubic-bezier(.42,0,.58,1);
  44. }
  45. .tap-target-content {
  46. position: relative;
  47. display: table-cell;
  48. }
  49. .tap-target-wave {
  50. &::before,
  51. &::after {
  52. content: '';
  53. display: block;
  54. position: absolute;
  55. width: 100%;
  56. height: 100%;
  57. border-radius: 50%;
  58. background-color: #ffffff;
  59. }
  60. &::before {
  61. transform: scale(0);
  62. transition: transform .3s;
  63. }
  64. &::after {
  65. visibility: hidden;
  66. transition:
  67. opacity .3s,
  68. transform .3s,
  69. visibility 0s;
  70. z-index: -1;
  71. }
  72. position: absolute;
  73. border-radius: 50%;
  74. z-index: 10001;
  75. }
  76. .tap-target-origin {
  77. &:not(.btn),
  78. &:not(.btn):hover {
  79. background: none;
  80. }
  81. top: 50%;
  82. left: 50%;
  83. transform: translate(-50%,-50%);
  84. z-index: 10002;
  85. position: absolute !important;
  86. }
  87. @media only screen and (max-width: 600px) {
  88. .tap-target, .tap-target-wrapper {
  89. width: 600px;
  90. height: 600px;
  91. }
  92. }