Merge pull request #1455 from bring/black-link

solid link
bring · Mar 4, 2021 · 8229285 · 8229285
2 parents c4c9097 + e00bf10
commit 8229285
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/src/shared/_config/variables.css b/src/shared/_config/variables.css
@@ -65,6 +65,7 @@
 
   --hw-color-white: #fff;
   --hw-color-black: #000;
+  --hw-color-black-hover: #1E1E1E;
 
   --hw-color-alert-green: #7BC144;
   --hw-color-alert-yellow: #fdbb2f;

diff --git a/src/shared/components/link/Link.md b/src/shared/components/link/Link.md
@@ -18,6 +18,7 @@ Modifiers:
 [Big]            .hw-link--big
 [Inverted]       .hw-link--inverted
 [No underline]   .hw-link--no-underline
+[Black]          .hw-link--solid
 ```
 
 
@@ -52,6 +53,9 @@ Modifiers:
   <a href="#" class="hw-link hw-link--no-underline">This is a link without an underline until hovered</a>
 ```
 
+```html|span-6,plain,light
+  <a href="#" class="hw-link hw-link--solid">This is a solid link for use on yellow backgrounds</a>
+```
 
 
 

diff --git a/src/shared/components/link/link.css b/src/shared/components/link/link.css
@@ -70,4 +70,14 @@
       border-bottom: none;
     }
   }
+
+  &--solid {
+    color: var(--hw-color-black);
+    border-color: var(--hw-color-black);
+    &:hover,
+    &:active {
+      color: var(--hw-color-black-hover);
+      border-color: var(--hw-color-black-hover);
+    }
+  }
 }