Merge 3ac6d2d into f8733bc

fremtind · Sep 25, 2024 · c78c927 · c78c927
2 parents f8733bc + 3ac6d2d
commit c78c927
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/packages/jokul/src/components/tooltip/styles/tooltip.scss b/packages/jokul/src/components/tooltip/styles/tooltip.scss
@@ -89,17 +89,33 @@ $_focus-ring-width: jkl.rem(2px);
     @include jkl.motion("exit", "snappy");
     transition-property: color;
     cursor: pointer;
+    position: relative;
     background-color: transparent;
     padding: 0;
     display: inline-flex;
     align-items: center;
     color: var(--button-color);
     transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
     font-size: 1.2em;
+    border-radius: 9999px;
 
     @include jkl.reset-outline;
 
     &:hover {
         --button-color: var(--jkl-color-text-interactive-hover);
     }
+
+    &:focus-visible {
+        @include jkl.focus-outline(0);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+        min-width: 44px;
+        min-height: 44px;
+    }
 }
diff --git a/packages/tooltip/tooltip.scss b/packages/tooltip/tooltip.scss
@@ -89,17 +89,33 @@ $_focus-ring-width: jkl.rem(2px);
     @include jkl.motion("exit", "snappy");
     transition-property: color;
     cursor: pointer;
+    position: relative;
     background-color: transparent;
     padding: 0;
     display: inline-flex;
     align-items: center;
     color: var(--button-color);
     transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
     font-size: 1.2em;
+    border-radius: 9999px;
 
     @include jkl.reset-outline;
 
     &:hover {
         --button-color: var(--jkl-color-text-interactive-hover);
     }
+
+    &:focus-visible {
+        @include jkl.focus-outline(0);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+        min-width: 44px;
+        min-height: 44px;
+    }
 }