fix: ghost button interactive states

Ensure that the ghost type button has the same initial and interactive states as common links Fix #536
mdn · Mar 18, 2021 · dff7778 · dff7778
1 parent f8c46c0
commit dff7778
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/sass/atoms/_buttons-ghost.scss b/sass/atoms/_buttons-ghost.scss
@@ -0,0 +1,17 @@
+/* Turns off background and border and set cursor to pointer. */
+.ghost {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-decoration: underline;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: $primary-50;
+    color: $neutral-600;
+  }
+}
diff --git a/sass/atoms/_buttons.scss b/sass/atoms/_buttons.scss
@@ -103,13 +103,6 @@ a.minimal {
   }
 }
 
-/* Turns off background and border and set cursor to pointer. */
-.ghost {
-  background: none;
-  border: 0;
-  cursor: pointer;
-}
-
 .icon-button {
   svg {
     fill: currentColor;

diff --git a/sass/mdn-minimalist.scss b/sass/mdn-minimalist.scss
@@ -28,6 +28,7 @@
 @import "./atoms/kbd";
 @import "./atoms/primsjs";
 @import "./atoms/buttons";
+@import "./atoms/buttons-ghost";
 @import "./atoms/forms";
 @import "./atoms/tables";
 @import "./atoms/overlays";