fix(Button): ♿ Added 44px clickbound for small size (#676)

digdir · Jul 24, 2023 · 921b9c7 · 921b9c7
1 parent 0314d62
commit 921b9c7
Showing 1 changed file with 26 additions and 6 deletions.
diff --git a/packages/react/src/components/Button/Button.module.css b/packages/react/src/components/Button/Button.module.css
@@ -6,20 +6,40 @@
   --fdsc-icon-size: var(--fds-sizing-4);
 
   composes: focusable from '../../utils/utility.module.css';
+  display: flex;
   align-items: center;
   border-radius: var(--fdsc-border-radius);
   border: var(--fds-border_width-default) solid transparent;
-  box-sizing: border-box;
   color: var(--fdsc-font-and-icon-color);
-  cursor: pointer;
-  display: flex;
   fill: var(--fdsc-font-and-icon-color);
-  font-family: inherit;
   height: var(--fdsc-button-size);
-  justify-content: center;
-  letter-spacing: var(--typography-default-letter-spacing);
   padding: var(--fdsc-button-padding);
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
   text-align: center;
+  letter-spacing: var(--typography-default-letter-spacing);
+  text-decoration: none;
+  position: relative;
+}
+
+.button.small::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: auto;
+  min-height: auto;
+  content: '';
+}
+
+.button.small::after {
+  position: absolute;
+  top: -5px;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  content: '';
 }
 
 .button:disabled,