Reserve space for icon button hover effect (#121)

kangasta · May 28, 2024 · b105ab6 · b105ab6
1 parent db45b45
commit b105ab6
Showing 1 changed file with 30 additions and 23 deletions.
diff --git a/src/components/Menu/IconButton.svelte b/src/components/Menu/IconButton.svelte
@@ -30,40 +30,47 @@
 <!-- The <div> element has a child <button> element that handles keyboard interaction -->
 <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
 <div on:click={onClick} class="icon-button clickable">
-  <button
-    aria-labelledby={labelId}
-    class="clickable"
-    class:open
-    on:click={onClick}
-  >
-    <svg viewBox="0 0 16 16">
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="1"
-        d={icons[icon].path}
-      />
-    </svg>
-  </button>
-  <div class="label" id={labelId}>{label}</div>
+  <div class="content">
+    <button
+      aria-labelledby={labelId}
+      class="clickable"
+      class:open
+      on:click={onClick}
+    >
+      <svg viewBox="0 0 16 16">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1"
+          d={icons[icon].path}
+        />
+      </svg>
+    </button>
+    <div class="label" id={labelId}>{label}</div>
+  </div>
 </div>
 
 <style lang="sass">
   div.icon-button
     display: inline-flex
     flex-direction: column
-    align-items: center
-
-    transition: transform 125ms
+    justify-content: center
+    height: 4.5626rem
 
-    &:hover
-      transform: scale(1.1) translateY(-0.05em)
+    &:hover .content
+      transform: scale(1.1) translateY(-0.15rem)
 
     &:active svg
       transform: translateY(0.15rem)
 
+  div.content
+    display: inline-flex
+    flex-direction: column
+    align-items: center
+    transition: transform 125ms
+
   .clickable
     cursor: pointer