Switch to having transparent borders rather than no borders on the so…

…lid buttons so the buttons are always the same size (#425)
CMSgov · May 29, 2019 · b40b75f · b40b75f
1 parent 7b8a915
commit b40b75f
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/packages/core/src/components/Button/Button.scss b/packages/core/src/components/Button/Button.scss
@@ -61,7 +61,7 @@ Style guide: components.button
 
 .ds-c-button--primary {
   background-color: $button-primary-bg;
-  border: 0; // Remove the default border to support easier theming
+  border-color: transparent;
   color: $color-white;
 
   &:focus,
@@ -71,14 +71,17 @@ Style guide: components.button
 
   &:focus {
     background-color: $button-primary-bg--focus;
+    border-color: transparent;
   }
 
   &:hover {
     background-color: $button-primary-bg--hover;
+    border-color: transparent;
   }
 
   &:active {
     background-color: $button-primary-bg--active;
+    border-color: transparent;
   }
 }
 
@@ -96,37 +99,37 @@ Style guide: components.button
 
 .ds-c-button--danger {
   background-color: $color-error;
-  border-color: $color-error;
+  border-color: transparent;
   color: $color-white;
 
   &:focus,
   &:hover {
     background-color: $color-error-dark;
-    border-color: $color-error-dark;
+    border-color: transparent;
     color: $color-white;
   }
 
   &:active {
     background-color: $color-error-darkest;
-    border-color: $color-error-darkest;
+    border-color: transparent;
   }
 }
 
 .ds-c-button--success {
   background-color: $color-success;
-  border-color: $color-success;
+  border-color: transparent;
   color: $color-white;
 
   &:focus,
   &:hover {
     background-color: $color-success-dark;
-    border-color: $color-success-dark;
+    border-color: transparent;
     color: $color-white;
   }
 
   &:active {
     background-color: $color-success-darker;
-    border-color: $color-success-darker;
+    border-color: transparent;
   }
 }
 
@@ -145,15 +148,15 @@ Style guide: components.button.disabled
 .ds-c-button:disabled,
 .ds-c-button--disabled {
   background-color: $color-gray-lighter;
-  border-color: $color-gray-lighter;
+  border-color: transparent;
   color: $color-gray-dark;
   pointer-events: none;
 
   &:hover,
   &:active,
   &:focus {
     background-color: $color-gray-lighter;
-    border-color: $color-gray-lighter;
+    border-color: transparent;
     color: $color-gray-dark;
   }
 }