feat: [link] - refacto style focus:visible & :visited pseudo-classes

PrestaShopCorp · Sep 22, 2023 · d060b95 · d060b95
1 parent 8f2db27
commit d060b95
Showing 1 changed file with 16 additions and 7 deletions.
diff --git a/packages/theme/src/link.scss b/packages/theme/src/link.scss
@@ -1,15 +1,24 @@
 @use './common/typography.scss';
 
 .puik-link {
-  @apply text-blue transition m-0.5 p-0.5 decoration-1;
-  &:hover {
-    @apply underline text-blue-700 cursor-pointer;
-  }
-  &:focus-visible {
-    @apply underline outline-none ring-2 ring-blue;
+  @apply relative text-blue transition m-0.5 p-0.5 py-[4px] decoration-1;
+  &:before {
+    content: '';
+    @apply opacity-0 absolute h-[1px] bg-primary-800 bottom-0 left-[50%] translate-x-[-50%] transition-all ease-in-out duration-200;
+    width: calc(100% - 8px);
   }
+  &:hover,
   &:active {
-    @apply underline;
+    @apply text-blue-700 cursor-pointer;
+    &:before {
+      @apply opacity-100 bottom-[3px] transition-all ease-in-out duration-300;
+    }
+    &:before:visited {
+      @apply bg-primary-500;
+    }
+  }
+  &:focus-visible {
+    @apply outline-none ring-2 ring-blue rounded-[4px] shadow-none;
   }
   &:visited {
     @apply text-purple-700;