fix: style links in sys-form-error better

system76 · Jul 31, 2020 · a0ee2b9 · a0ee2b9
1 parent 992a1fa
commit a0ee2b9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/sys-form-error.stories.mdx b/src/components/sys-form-error.stories.mdx
@@ -20,3 +20,17 @@ This is how the input component looks without any given props or data.
     }}
   </Story>
 </Preview>
+
+### With a link
+
+Sometimes we add a link to fix the error. This is what that would look like.
+
+<Preview>
+  <Story height="100px" name="Link">
+    {{
+      template: `<sys-form-error>
+        an error occured. <a href="#">fix it</a>.
+      </sys-form-error>`
+    }}
+  </Story>
+</Preview>
diff --git a/src/components/sys-form-error.vue b/src/components/sys-form-error.vue
@@ -22,6 +22,12 @@
     border: 1px solid var(--color-light-form-input-border);
     color: var(--color-light-form-input-background);
     display: block;
-    padding: 0.5rem;
+    padding: 0.5rem 1rem;
+    margin: 1rem 0;
+  }
+
+  .error a {
+    color: inherit;
+    text-decoration: underline;
   }
 </style>