Button: fix appearance of large button

la-ldaf · Apr 26, 2023 · 3c24bfd · 3c24bfd
1 parent 513c27a
commit 3c24bfd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/src/lib/components/Button/Button.scss b/src/lib/components/Button/Button.scss
@@ -105,23 +105,19 @@ $colors: (
 
 .usa-button--outline-inverse,
 .usa-button.usa-button--outline-inverse {
-  background: none;
   color: map.get($colors, "outline-inverse");
-  border: 2px solid map.get($colors, "base-light");
+  border-color: map.get($colors, "base-light");
   &:hover {
-    background: none;
     color: map.get($colors, "base-lightest");
-    border: 2px solid map.get($colors, "base-lightest");
+    border-color: map.get($colors, "base-lightest");
   }
   &:active {
-    background: none;
     color: #fff;
-    border: 2px solid #fff;
+    border-color: #fff;
   }
   &:disabled {
-    background: none;
     color: map.get($colors, "disabled-dark");
-    border: 2px solid map.get($colors, "disabled-dark");
+    border-color: map.get($colors, "disabled-dark");
   }
 }
 
@@ -142,7 +138,6 @@ $colors: (
 
 .usa-button--big-inverse,
 .usa-button.usa-button--big-inverse {
-  @extend .usa-button--big;
   background: #fff;
   color: map.get($colors, "primary");
   &:hover {

diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
@@ -16,9 +16,9 @@
     inverse: ["usa-button--inverse"],
     "text-only": ["usa-button--text-only"],
     outline: ["usa-button--outline"],
-    "outline-inverse": ["usa-button--outline-inverse"],
+    "outline-inverse": ["usa-button--outline", "usa-button--outline-inverse"],
     big: ["usa-button--big"],
-    "big-inverse": ["usa-button--big-inverse"],
+    "big-inverse": ["usa-button--big", "usa-button--big-inverse"],
   };
 
   $: variantClasses = unstyled ? [] : variantClassesDict[variant];