feat(template): github-sponsor-button

templates/github-sponsor-button/template.vue

@@ -1,13 +1,19 @@
 <template>
   <div
     class="sponsor"
-    :class="lineStyle ? 'line' : 'fill'"
+    :class="[lineStyle ? 'line' : 'fill', { animation }]"
     :style="{ borderRadius: `${radius}px` }"
   >
+    <div class="spans" v-if="animation">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
     <simple-icons class="icon" slug="githubsponsors" :color="lineStyle ? '#ea4aaa' : 'white'" />
-    <span class="text">{{ text }}</span>
+    <span class="text" :class="{ uppercase }">{{ text }}</span>
+    <span class="dot">·</span>
     <span class="count">{{ sponsors_count }}</span>
-    <div class="animation" v-if="animation"></div>
   </div>
 </template>
 
@@ -33,6 +39,10 @@
         type: Boolean,
         default: false
       },
+      uppercase: {
+        type: Boolean,
+        default: false
+      },
       animation: {
         type: Boolean,
         default: false
@@ -51,7 +61,15 @@
 
 <style>
   .sponsor {
+    --icon-szie: 18px;
     --color: #ea4aaa;
+    --animation-color: #ffffff;
+  }
+  .sponsor.line {
+    --animation-color: #ea4aaa;
+  }
+
+  .sponsor {
     position: absolute;
     top: 0;
     left: 0;
@@ -72,53 +90,128 @@
     color: white;
     background-color: var(--color);
   }
-
   .sponsor.line {
     color: var(--color);
     border: 1px solid;
   }
 
+  .sponsor .icon {
+    width: var(--icon-szie);
+    height: var(--icon-szie);
+  }
+
   .sponsor .text {
-    margin: 0 0.6em;
+    margin-right: 0.6em;
+    margin-left: 0.8em;
+    letter-spacing: 1px;
+  }
+  .sponsor .dot {
+    margin-right: 0.6em;
   }
 
-  @keyframes scanLights {
+  .sponsor .text.uppercase {
+    text-transform: uppercase;
+  }
+
+  .sponsor.animation {
+    text-decoration: none;
+  }
+  .sponsor.animation.line {
+    border: none;
+    background-color: rgb(234 74 170 / 10%);
+  }
+
+  .sponsor.animation .spans span {
+    position: absolute;
+  }
+
+  .sponsor.animation .spans span:nth-child(1) {
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to left, rgba(8, 20, 43, 0), var(--animation-color));
+    animation: 2s animateTop linear infinite;
+  }
+
+  @keyframes animateTop {
     0% {
-      opacity: 0;
-      transform: translate(-60%, 50%) rotate(-60deg);
+      transform: translateX(100%);
     }
-    14% {
-      opacity: 1;
-      transform: translate(-40%, 50%) rotate(-60deg);
+    100% {
+      transform: translateX(-100%);
     }
-    50% {
-      opacity: 1;
-      transform: translate(0%, 50%) rotate(-60deg);
+  }
+
+  .sponsor.animation .spans span:nth-child(2) {
+    top: 0px;
+    right: 0px;
+    height: 100%;
+    width: 2px;
+    background: linear-gradient(to top, rgba(8, 20, 43, 0), var(--animation-color));
+    animation: 2s animateRight linear -1s infinite;
+  }
+
+  @-webkit-keyframes animateRight {
+    0% {
+      transform: translateY(100%);
     }
     100% {
-      opacity: 0;
-      transform: translate(20%, 50%) rotate(-60deg);
+      transform: translateY(-100%);
     }
   }
 
-  .animation {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 200%;
-    height: 30px;
-    background-image: linear-gradient(
-      to bottom,
-      transparent,
-      rgba(255, 255, 255, 0.3),
-      transparent
-    );
-
-    transition: all 0.2s;
-    transform-origin: center center;
-    transform: translate(-80%, 50%) rotate(-60deg);
-    animation: scanLights 5s linear 1s infinite;
+  @keyframes animateRight {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+
+  .sponsor.animation .spans span:nth-child(3) {
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, rgba(8, 20, 43, 0), var(--animation-color));
+    animation: 2s animateBottom linear infinite;
+  }
+
+  @-webkit-keyframes animateBottom {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes animateBottom {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .sponsor.animation .spans span:nth-child(4) {
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 2px;
+    background: linear-gradient(to bottom, rgba(8, 20, 43, 0), var(--animation-color));
+    animation: 2s animateLeft linear -1s infinite;
+  }
+
+  @keyframes animateLeft {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(100%);
+    }
   }
 </style>