fix: ifx css button badge layout

tsedio · Jul 15, 2024 · 412ff63 · 412ff63
1 parent fa90300
commit 412ff63
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/docs/.vitepress/theme/molecules/button-badge/ButtonBadge.vue b/docs/.vitepress/theme/molecules/button-badge/ButtonBadge.vue
@@ -73,9 +73,10 @@ const overflow = (text = "") => {
 </script>
 
 <template>
-  <Link :href="href" outbound="false" :title="title" class="block reset-link">
+  <Link :href="href" outbound="false" :title="title" class="button-badge block reset-link">
     <span
-      class="flex flex-col transition-all relative no-underline scale-100 hover:scale-110"
+      data-testid="button-badge-content"
+      class="flex flex-col transition-all relative no-underline"
       :class="[textSize && `text-${textSize}`]"
     >
       <figure
@@ -110,3 +111,12 @@ const overflow = (text = "") => {
     </span>
   </Link>
 </template>
+<style>
+.vp-doc a.button-badge {
+  @apply transition-all scale-100 hover:scale-110 focus:scale-110;
+  outline: none;
+}
+.vp-doc a.button-badge:focus-visible {
+  outline: none !important;
+}
+</style>
diff --git a/docs/.vitepress/theme/organisms/github-contributors/GithubContributors.spec.ts b/docs/.vitepress/theme/organisms/github-contributors/GithubContributors.spec.ts
@@ -62,7 +62,7 @@ describe("<GithubContributors>", () => {
             class=""
           >
             <a
-              class="block reset-link"
+              class="button-badge block reset-link"
               href=""
               innerpadding="0"
               liclass=""
@@ -71,7 +71,8 @@ describe("<GithubContributors>", () => {
             >
               
               <span
-                class="flex flex-col transition-all relative no-underline scale-100 hover:scale-110 text-xxs"
+                class="flex flex-col transition-all relative no-underline text-xxs"
+                data-testid="button-badge-content"
               >
                 <figure
                   class="flex items-center justify-center relative z-2 rounded-2xl overflow-hidden mb-2 bg-gray-lighter"